我有一個圖像設置爲背景圖像(由url指定)的DIV容器。有沒有辦法如何將這個背景圖像重新繪製到畫布中(無需重新聯繫或從服務器重新下載 - 因爲內容圖像一次顯示)?將背景圖像渲染到畫布
0
A
回答
1
是的。您可以獲取背景圖像的URL,請求圖像文件爲Blob
,創建<img>
元素,設置src
爲Blob URL
的響應,在load
創建的事件img
元素調用.drawImage()
與img
作爲第一個參數。
根據瀏覽器設置,可以緩存背景圖像。如果圖像未在瀏覽器中緩存,則可以先請求圖像,然後使用單個請求設置css
background-image
和<canvas>
。
您可以使用fetch()
或XMLHttpResponse()
要求background-image
url()
,,FileReader.prototype.readAsDataURL()
在load
事件來設置的<img>
src
到FileReader
.result
。
您也可以使用URL.createObjectURL()
創建一個Blob URL
response
Blob
。 URL.revokeObjectURL()
撤銷Blob URL
。
檢查Network
選項卡DevTools
或Developer Tools
,圖像應被檢索
(from cache)
#bg {
width:50px;
height:50px;
background-image:url(http://placehold.it/50x50);
}
<div id="bg"></div>
<br>
<canvas id="canvas" width="50px" height="50px"></canvas>
<script>
window.onload = function() {
var bg = document.getElementById("bg");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image;
img.width = canvas.width;
img.height = canvas.height;
img.onload = (e) => ctx.drawImage(e.target,0,0);
var background = getComputedStyle(bg).getPropertyValue("background-image");
var src = background.replace(/^url|["()]/g, "");
var reader = new FileReader;
reader.onload = (e) => img.src = e.target.result;
fetch(src)
.then(response => response.blob())
.then(blob => {
reader.readAsDataURL(blob);
// const url = URL.createObjectURL(blob); img.src = url;
})
}
</script>
相關問題
- 1. 壞IE11 SVG渲染 - 背景圖像
- 2. Rails SCSS背景圖像不渲染
- 3. Android ViewFlipper動畫不渲染背景?
- 4. 調整畫布的背景圖像 - Fabricjs
- 5. 設置畫布的背景圖像
- 6. 在畫布上繪製背景圖像
- 7. wpf動態畫布背景圖像
- 8. 透明圖像背景HTML5畫布
- 9. 渲染2張圖像,頂部圖像背景色透明
- 10. 在渲染到畫布上之前模糊圖像
- 11. IE6不渲染格背景
- 12. C渲染面板背景#
- 13. 將圖像帶到背景
- 14. Safari在iPad上渲染背景色作爲背景圖像的邊框
- 15. 動畫UIButton背景圖像
- 16. jQuery背景圖像動畫
- 17. 將畫布對象保存爲圖像 - 黑色背景
- 18. 如何將上傳的圖像設置爲畫布背景?
- 19. 如何將畫布背景圖像另存爲Json
- 20. 如何將背景圖像設置爲畫布
- 21. CSS:在另一個圖像(或畫布)內的背景圖像
- 22. 在畫布上渲染位圖[Java-Android]
- 23. 加載圖像到織物畫布背景
- 24. 野生動物園渲染圖像背景加載黑色
- 25. 在rails 4.1中的背景圖像渲染問題
- 26. CoreGraphics在圖像從OpenGL的渲染具有黑色背景
- 27. wp7上的背景圖像渲染問題
- 28. 背景圖像不會渲染Ruby on Rails應用程序
- 29. 背景圖像渲染出XAML事件屏幕
- 30. IE瀏覽器不能正確渲染PNG背景圖像
請問這個方法接觸服務器?或者瀏覽器在內部處理它?我試圖得到的圖像是根據請求生成的 –
這取決於瀏覽器設置。通常,瀏覽器不會發送另一個緩存圖像請求。如果禁用了緩存,則可以使用來自單個請求的響應將背景圖像和圖像設置爲「canvas」。 _「我想要得到的圖像是根據請求生成的」_圖像是如何請求的?你可以包括'html','''你試圖解決問題的問題? – guest271314
我正在顯示僅使用背景圖像顯示圖像的第三方頁面(它們從不使用IMG標籤)。我的目標是下載所有圖像(在畫布的幫助下),但我無法承擔重新連接服務器,因爲它會返回另一個圖像(對於相同的圖像URL;每個顯示的圖像都有唯一的url,但重新連接服務器會生成新圖像) –