2011-12-21 93 views
13

是否有可能通過HTML 5 File API加載圖像並使其成爲使用javascript/jquery的css背景圖像?如果可能的話,它是如何完成的?HTML 5文件加載圖像作爲背景圖像

+8

也許加載的數據轉換爲數據URI。這可以用作背景圖片網址。看到這裏的例子:http://sveinbjorn.org/dataurls_css – dronus 2011-12-21 16:13:14

+0

真的有幫助!非常感謝。我會盡快發佈我是如何做到的,但是由於聲譽限制,我無法在接下來的5個月內完成 – 2011-12-21 17:08:49

回答

6

dronus給了我很大回答這個問題張貼在評論部分此鏈接: sveinbjorn.org/dataurls_css

您簡單的必須做以下使用的圖像數據的CSS背景圖片: 這將節省在創建後一個新的,並填寫 並且使用的FileReader()數據填充圖像的src數據

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

現在你只需要利用這個變種,並將其設置爲背景圖片的URL

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

閱讀鏈接,以獲得更好的理解這裏發生了什麼,並再次感謝dronus