Render background-image to canvas

Question

У меня есть контейнер DIV с изображением, установленным в качестве фонового изображения (указывается URL-адресом). Есть ли способ перерисовать это фоновое изображение на холст (без повторного контактирования или повторной загрузки с сервера - как изображение контента отображается на экране)?

Answer 1

Да. Вы можете получить URL фонового изображения, запросить файл изображения как Blob, создать <img> элемент, установите src в Blob URL ответ на load случае созданного img элемента вызова .drawImage() с img в качестве первого параметра.

Фоновое изображение может быть кэшировано в зависимости от настроек браузера. Если изображение не кэшировано в браузере, вы можете сначала запросить изображение, а затем установить как cssbackground-image, так и <canvas>, используя один запрос.

Вы можете использовать fetch() или XMLHttpResponse() просить background-imageurl(), FileReader(), FileReader.prototype.readAsDataURL() установить src из <img> к .result из FileReader на load события.

Вы также можете использовать URL.createObjectURL(), чтобы создать Blob URL от responseBlob. 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>