HTML 5文件加载图像作为背景图像 [英] HTML 5 File load image as background-image

问题描述

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

解决方案

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

你简单的做了下面的事情来使用一个css背景图像的图像数据：
这将保存你的图像的src数据后，你创建一个新的和填充
和填充数据使用FileReader（）

  var imgFileData = $（'＃image'）。attr（'src'）
  

现在你只需要把这个var设置为背景图片url



  $（'＃yourDiv）.css（{'background-image'：'url（'+ imgFileData +'）'}）; 
 $（'＃image'）。hide（）; //可选
  

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


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?

解决方案

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

这篇关于HTML 5文件加载图像作为背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！