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

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

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

【问题讨论】：

【解决方案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

【讨论】：