Render-Hintergrundbild auf Canvas

Question

Ich habe einen DIV-Container mit einem Bild als Hintergrundbild festgelegt (durch URL angegeben). Gibt es eine Möglichkeit, dieses Hintergrundbild in Canvas neu zu zeichnen (ohne den Server erneut zu kontaktieren oder erneut herunterzuladen - da das Inhaltsbild einmalig angezeigt wird)?

Answer 1

Ja. Sie können die URL des Hintergrundbildes erhalten, fordern Sie die Bilddatei als Blob, erstellen Sie ein <img> Element, setzen src-Blob URL der Reaktion, bei load Fall erstellt img Element Anruf .drawImage() mit img als ersten Parameter.

Das Hintergrundbild kann je nach Browsereinstellungen zwischengespeichert werden. Wenn das Bild nicht im Browser zwischengespeichert wird, können Sie zuerst ein Bild anfordern und dann cssbackground-image und <canvas> mit einer einzigen Anforderung festlegen. zu setzen src von <img>-.result von FileReader bei load Ereignis

Sie können fetch() oder XMLHttpResponse() verwenden background-imageurl(), FileReader.prototype.readAsDataURL()FileReader(), beantragen.

Sie können auch URL.createObjectURL() verwenden, um eine Blob URL von responseBlob zu erstellen. URL.revokeObjectURL(), um die Blob URL zu widerrufen.

prüfen Network Registerkarte DevTools oder Developer Tools, sollte das Bild

(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>