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

发布于 2024-12-22 01:57:44 字数 84 浏览 1 评论 0原文

是否可以通过 HTML 5 文件 API 加载图像并使用 javascript / jquery 将其设为 css 背景图像?如果可能的话,是如何做到的?

is it possible to load an image via the HTML 5 File API and make it a css background-image using javascript / jquery? If it's possible, how is it done?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

原谅过去的我 2024-12-29 01:57:44

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

您只需执行以下操作即可将图像数据用于 css 背景图像:
这将在您创建新图像并填充后保存图像的 src 数据
并使用 FileReader() 填充数据

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

现在您只需获取此 var 并将其设置为背景图像 url

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

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

dronus gave me a great answer to this question by posting this link in the comment section:
sveinbjorn.org/dataurls_css

You simple have to do the following to use the image data for a css background image:
This will save the src data of your image after you create a new and fill
and fill it with data using the FileReader()

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

Now you simply have to take this var and set it as the background-image url

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

Read the link to get a better understanding what is happening here, and thanks again to dronus

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文