使用带有 img 元素的 css 背景图像
Using css-background image with img element
是否可以将存储在img元素中的图像数据加载到css背景图像属性中?
例如,假设我们已将图像数据下载到"img"元素中
var img = Image();
img.src = '/foo/bar'
img.onload = ....
然后,我想将该图像加载到 css 背景图像属性中
.something {
background-image: img
}
这可能吗?使用图像元素和 css 背景图像属性进行混合,以便 CSS 可以使用 img 元素中的图像数据作为背景图像
编辑:第一个答案只是为了解决使用图像元素时提出的原始问题。 向下滚动以获取获取图像数据的更好替代方案。
如果您尝试安全地捕获原始数据以供以后使用,则可以将图像绘制到 canvas
元素上,以便生成 base-64 编码的数据 URL。尽管此解决方案将受到同源限制。
- 请参阅:MDN:允许跨源使用图像和画布
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(即HTML/CSS/JS),除非明确规避,否则只依赖它们下载一次。
或者,将图像加载为 Blob 会更干净。
注意:我在这里使用 CORS 代理纯粹是为了方便一个可运行的示例。 您可能不希望在生产环境中通过任意第三方传递自己的资产。
- 参见:MDN:跨域资源共享
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>
你可以
用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>
相关文章:
- JS幻灯片与CSS背景颜色变化
- 设置 CSS 背景在 Firefox 中不起作用
- jQuery-仅更改Y轴的CSS背景位置
- Jquery CSS背景图像旋转
- 动态生成的css背景图像属性中的重音字符
- 我的'body'css背景图像在chrome中跳跃
- 如果类中的数字大于0,请使用JavaScript更改CSS背景
- Javascript可能阻止加载css背景图像
- 如何将CSS背景位置属性从百分比转换为像素
- 目标 css:背景图像 Javascript
- CSS背景图像突然消失
- 使用javascript变量更改css背景颜色
- CSS背景颜色有效性
- 正在分析CSS背景图像2015
- 许多css背景的性能
- 通过Ajax上传照片后替换css背景图像
- 为动态css背景预加载图像
- 预加载CSS背景图像[Can't use sprite]
- CSS背景图像将不会显示
- 悬停时的CSS背景