javascript - 将背景图像渲染到 Canvas

Question

我有一个 DIV 容器，其中图像设置为背景图像(由 url 指定)。有什么方法可以将此背景图像重绘到 Canvas 中(无需重新联系或从服务器重新下载——因为内容图像是一次性显示的)？

Answer 1

是的。可以获取背景图片的URL，请求图片文件为Blob , 创建一个 <img>元素，设置 src至 Blob URL响应，在 load创建事件 img元素调用 .drawImage()与 img作为第一个参数。

可以缓存背景图像，具体取决于浏览器设置。如果浏览器没有缓存图片，可以先请求图片，然后同时设置css background-image和 <canvas>使用单个请求。

您可以使用 fetch()或 XMLHttpResponse()请求background-image url() , FileReader() , FileReader.prototype.readAsDataURL()设置 src的 <img>至 .result的 FileReader在 load事件。

您还可以使用 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>