将背景图像渲染到画布

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>