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文件加载图像作为背景图像的主要内容,如果未能解决你的问题,请参考以下文章