Beim Zeichnen eines externen Linkbilds im Canvas tritt ein domänenübergreifendes Problem auf.
Beispiele sind wie folgt:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var image = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image').src = canvas.toDataURL('image/png'); ; image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';Wenn Sie diese Seite in einem Browser öffnen, wird dieses Problem auftreten:
Nicht abgefangene DOMException: „toDataURL“ konnte nicht auf „HTMLCanvasElement“ ausgeführt werden: Befleckte Leinwände können möglicherweise nicht exportiert werden.
Dies wird durch die CORS-Richtlinie eingeschränkt und es kann zu domänenübergreifenden Problemen kommen. Das Zeichnen auf der Leinwand führt jedoch zu einer Verschmutzung der Leinwand. Beispielsweise können die Daten der Leinwand nicht extrahiert werden. Die Canvas-Methode „toBlob()“ oder „getImageData()“ kann nicht verwendet werden
Dies ist ein lästiges Problem, aber glücklicherweise hat img das Crossorigin-Attribut hinzugefügt, das bestimmt, ob die CORS-Funktion während des Bilderfassungsprozesses aktiviert ist:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>crossorigin</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var image = new Image(); image.setAttribute('crossorigin', 'anonymous'); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image'). = canvas.toDataURL('image/png'); 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';Wenn Sie die beiden oben genannten Teile des JS-Codes vergleichen, finden Sie diese zusätzliche Zeile:
image.setAttribute('crossorigin', 'anonymous');So einfach ist das, eine perfekte Lösung!
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.