HTML 5文件加载图像作为背景图像

Posted

技术标签:

【中文标题】HTML 5文件加载图像作为背景图像【英文标题】:HTML 5 File load image as background-image 【发布时间】:2012-01-25 08:35:22 【问题描述】:

是否可以通过 html 5 File API 加载图像并使用 javascript / jquery 将其设置为 css 背景图像?如果可以,是怎么做到的?

【问题讨论】:

也许将加载的数据转换为数据 uri。这可以用作背景图像 URL。在此处查看示例:sveinbjorn.org/dataurls_css 这真的很有帮助!非常感谢。我会尽快发布我是如何做到的,但是由于声誉限制,我无法在接下来的 5 个小时内做到这一点 【参考方案1】:

dronus 通过在评论部分发布此链接给了我一个很好的答案: sveinbjorn.org/dataurls_css

您必须简单地执行以下操作才能将图像数据用于 css 背景图像: 这将在您创建新并填充后保存图像的 src 数据 并使用 FileReader() 用数据填充它

var imgFileData = $('#image').attr('src') 

现在你只需要获取这个变量并将其设置为背景图片 url

$('#yourDiv).css('background-image':'url(' + imgFileData + ')');
$('#image').hide(); //optional

阅读链接以更好地了解这里发生的事情,再次感谢 dronus

【讨论】:

以上是关于HTML 5文件加载图像作为背景图像的主要内容,如果未能解决你的问题,请参考以下文章

在加载视频之前将Youtube视频缩略图设置为背景图像

iOS 7 / Xcode 5:以编程方式访问设备启动图像

无法为 QLabel 背景加载图像

php 将后缩略图作为背景图像添加到任何div

Angular 2从资产文件夹加载CSS背景图像

使用PNG作为背景图像 - 在设计视图中无法看到它[关闭]