Question

是否可以将存储在img元素中的图像数据加载到css background-image属性中？

例如，假设我们已将图片数据下载到“img＆＃39;元件

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

然后，我想将该图像加载到css background-image属性

.something {
  background-image: img
}

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

Answer 1

您可以使用 JQuery

执行此操作

var img = new Image();
img.src = 'http://placehold.it/350x150';
$('div').css('background-image', 'url('+img.src+')');

div {
  height: 150px;
  width: 300px;
  background-size: cover;
  background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

或纯 Javascript

var img = new Image();
img.src = 'http://placehold.it/350x150';
document.getElementById('element').style.backgroundImage = "url("+img.src+")";

div {
  height: 150px;
  width: 300px;
  background-size: cover;
  background-position: center;
}

<div id="element"></div>

Answer 2

编辑：第一个答案只是为了解决围绕使用图像元素的原始问题。向下滚动以获取更好的替代方法来获取图像数据。

如果您尝试安全捕获稍后要使用的原始数据，可以将图像绘制到canvas元素上，以生成base-64编码的数据URL。虽然此解决方案将受到同源限制。

请参阅：MDN: Allowing cross-origin use of images and canvas

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)
    return canvas.toDataURL()
}

const img = new Image
img.addEventListener('load', () => 
    // assign to some CSS rule
    console.log(getImageData(img))
)
img.src = '/foo/bar'

在行之间阅读你的评论，“不会让浏览器下载图像两次吗？”听起来像一个误解 - 浏览器已经缓存了资源，你可以在任何上下文中重用资产URL在你的页面中（ ie HTML / CSS / JS），除非明确规避，否则只能下载一次。

或者，将图像作为Blob加载会更清晰。

注意：我在这里使用CORS代理纯粹是为了方便一个可运行的例子。您可能不希望通过生产环境中的任意第三方传递您自己的资产。

请参阅：MDN: Cross-Origin Resource Sharing

const getImage = async url => {
    const proxy = 'https://cors-anywhere.herokuapp.com/'
    const response = await fetch(`${proxy}${url}`)
    const blob = await response.blob()
    return URL.createObjectURL(blob)
}

const imageUrl = 
    'https://cdn.sstatic.net/Sites/stackoverflow/' +
    'company/img/logos/so/so-logo.png?v=9c558ec15d8a'
    
const example = document.querySelector('.example')

getImage(imageUrl).then(objectUrl => 
    example.style.backgroundImage = `url(${objectUrl})`
)

.example {
    min-height: 140px;
    background-size: contain;
    background-repeat: no-repeat;
}

<div class="example"></div>

使用带有img元素的css-background图像

2 个答案:

或者，将图像作为Blob加载会更清晰。