渲染背景图像到画布

Question

我有一个DIV容器，图像设置为background-image（由url指定）。有没有办法如何将这个背景图像重绘为画布（没有重新联系或从服务器重新下载 - 因为内容图像是一次显示）？

Answer 1

是。您可以获取背景图片的网址，请求图片文件为Blob，创建<img>元素，将src设置为Blob URL的响应，位于{{1}已创建的load元素调用事件img，其中.drawImage()为第一个参数。

可以缓存背景图片，具体取决于浏览器设置。如果图片未在浏览器中缓存，您可以先请求图片，然后使用单个请求同时设置img css和background-image。

您可以使用<canvas>或fetch()请求XMLHttpResponse() background-image，url()，FileReader()设置FileReader.prototype.readAsDataURL() { {1}} src <img> .result事件{/ 1}}。

您还可以使用FileReader从load URL.createObjectURL()创建Blob URL。 response要撤消Blob。

检查URL.revokeObjectURL()或Blob URL处的Network标签，应检索图片

DevTools

＆＃13;

＆＃13;

Developer Tools

＆＃13;

(from cache)    

＆＃13;

＆＃13;

＆＃13;