在镶边中选择渲染的图片元素图像

Select rendered picture element image in chrome

本文关键字：元素 图像 选择      更新时间：2023-09-26

我需要重用图片元素的渲染图像。有没有一种直接的方法可以使用javascript访问chrome/opera渲染的图像文件路径，而无需复制图片填充完成的逻辑。

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" >
</picture>

使用上面的示例，在宽度为 1200px 的 retina 桌面浏览器窗口上，支持图片的浏览器将渲染 head-2x.jpg。或者，如果我在宽度小于 450px 的智能手机上使用 chrome 浏览器，并带有视网膜显示屏，它将使用 head-fb-2x.jpg。如何直接访问此动态渲染的图像？

有没有办法访问这个渲染的图像，而不必自己解析源元素？

有currentSrc属性，只有在加载了候选时才会更新。函数可能如下所示：

function getCurrentSrc(element, cb){
    var getSrc;
    if(!window.HTMLPictureElement){
        if(window.respimage){
            respimage({elements: [element]});
        } else if(window.picturefill){
            picturefill({elements: [element]});
        }
        cb(element.src);
        return;
    }
    getSrc = function(){
        element.removeEventListener('load', getSrc);
        element.removeEventListener('error', getSrc);
        cb(element.currentSrc);
    };
    element.addEventListener('load', getSrc);
    element.addEventListener('error', getSrc);
    if(element.complete){
        getSrc();
    }
}

注意：您必须传递 img DOM 元素和一个回调函数。

相关文章：