Javascript 使用带有img元素的css背景图像

是否可以将img元素中存储的图像数据加载到css背景图像属性中

例如，假设我们已将图像数据下载到“img”元素中

var img = Image();
img.src = '/foo/bar'
img.onload = ....

然后，我想将该图像加载到css背景图像属性中

.something {
  background-image: img
}

---

这可能吗？混合使用image元素和css background image属性，以便css可以使用img元素中的图像数据作为背景图像

var img=newimage（）；
img.src=http://placehold.it/350x150';
$（'div'）.css（'background-image'，'url（'+img.src+'））
div{
高度：150像素；
宽度：300px；
背景尺寸：封面；
背景位置：中心；
}


编辑：这第一个答案只是为了解决关于使用图像元素的原始问题。向下滚动以获得获取图像数据的更好选择

如果您试图安全地捕获原始数据以供以后使用，则可以将图像绘制到
画布
元素上，以生成base-64编码的数据URL。尽管此解决方案将受到相同来源的限制


见：

const getImageData=imageElement=>{
const canvas=document.createElement（'canvas'）
const ctx=canvas.getContext（'2d'）
canvas.width=imageElement.width
canvas.height=imageElement.height
ctx.drawImage（imageElement，0，0）
返回canvas.toDataURL（）
}
const img=新图像
img.addEventListener（'load'，（）=>
//分配给某个CSS规则
控制台日志（getImageData（img））
)
img.src='/foo/bar'

然而，在字里行间阅读您的评论“这不会让浏览器下载两次图像吗？”听起来像是一种误解——浏览器已经缓存了资源，您可以在页面中的任何上下文中重用资源URL（即HTML/CSS/JS），除非明确规避，否则只能下载一次


或者，将图像作为Blob加载会更干净。
注意：我在这里使用CORS代理纯粹是为了方便一个可运行的示例。您可能不希望在生产环境中通过任意的第三方传递您自己的资产


见：


const getImage=async url=>{
常量代理服务器https://cors-anywhere.herokuapp.com/'
const response=wait fetch（`${proxy}${url}`）
const blob=wait response.blob（）
返回URL.createObjectURL（blob）
}
常量imageUrl=
'https://cdn.sstatic.net/Sites/stackoverflow/' +
'公司/img/logos/so/so logo.png？v=9c558ec15d8a'
const example=document.querySelector（'.example'）
getImage（imageUrl）。然后（objectUrl=>
example.style.backgroundImage=`url（${objectUrl}）`
)
。示例{
最小高度：140px；
背景尺寸：包含；
背景重复：无重复；
}
这难道不会让浏览器下载两次图像吗？我想在这里做的是制作CSS，将img元素的图像数据用作背景图像我不确定您是否正在寻找类似的内容，但我认为您还不能用CSS做类似的事情。