Al dibujar una imagen de enlace externo en el lienzo, nos encontraremos con un problema entre dominios.
Los ejemplos son los siguientes:
<!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=imagen <script> var lienzo = document.getElementById('canvas'); var imagen = nueva Imagen(); imagen.onload = función() { ctx.drawImage(imagen, 0, 0); document.getElementById('imagen').src = canvas.toDataURL('imagen/png'); ; imagen.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg </script></body>Al abrir esta página en un navegador, encontrará este problema:
DOMException no detectada: no se pudo ejecutar 'toDataURL' en 'HTMLCanvasElement': los lienzos contaminados no se pueden exportar.
Esto está limitado por la política CORS y habrá problemas entre dominios. Aunque se pueden usar imágenes, dibujar en el lienzo contaminará el lienzo. Una vez que un lienzo está contaminado, los datos del lienzo no se pueden extraer. el lienzo toBlob() no se puede utilizar. toDataURL() o el método getImageData() se generará el error de seguridad anterior al utilizar estos métodos.
Este es un problema problemático, pero afortunadamente img ha agregado el atributo crossorigin, que determina si la función CORS está habilitada durante el proceso de adquisición de imágenes:
<!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=imagen <script> var lienzo = document.getElementById('canvas'); var imagen = nueva Imagen(); image.setAttribute('crossorigin', 'anonymous'); image.onload = function() { ctx.drawImage(imagen, 0, 0); = lienzo.toDataURL('imagen/png'); imagen.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg </script></body>Comparando las dos piezas de código JS anteriores, encontrará esta línea adicional:
image.setAttribute('crossorigin', 'anonymous');¡Es así de simple, una solución perfecta!
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.