將背景圖像渲染到畫布

Question

我有一個圖像設置爲背景圖像（由url指定）的DIV容器。有沒有辦法如何將這個背景圖像重新繪製到畫布中（無需重新聯繫或從服務器重新下載 - 因爲內容圖像一次顯示）？

Answer 1

是的。您可以獲取背景圖像的URL，請求圖像文件爲Blob，創建<img>元素，設置src爲Blob URL的響應，在load創建的事件img元素調用.drawImage()與img作爲第一個參數。

根據瀏覽器設置，可以緩存背景圖像。如果圖像未在瀏覽器中緩存，則可以先請求圖像，然後使用單個請求設置cssbackground-image和<canvas>。

您可以使用fetch()或XMLHttpResponse()要求background-imageurl()，​​，FileReader.prototype.readAsDataURL()在load事件來設置的<img>src到FileReader.result。

您也可以使用URL.createObjectURL()創建一個Blob URLresponseBlob。 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>