Ao desenhar uma imagem de link externo no canvas, encontraremos um problema de domínio cruzado.
Os exemplos são os seguintes:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>origem cruzada</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var imagem = new Image(); image.onload = function() { ctx.drawImage(image, 0, 0); document.getElementById('image').src = canvas.toDataURL('image/png' }); ;imagem.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg' </script></body>Ao abrir esta página em um navegador, você encontrará este problema:
DOMException não capturada: falha ao executar 'toDataURL' em 'HTMLCanvasElement': telas contaminadas não podem ser exportadas.
Isso é limitado pela política CORS e haverá problemas entre domínios. Embora as imagens possam ser usadas, o desenho na tela poluirá a tela. Uma vez que uma tela esteja poluída, os dados da tela não poderão ser extraídos. o método toBlob() não pode ser usado ou o método getImageData();
Este é um problema problemático, mas felizmente img adicionou o atributo crossorigin, que determina se a função CORS está habilitada durante o processo de aquisição de imagem:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>origem cruzada</title></head><body> <canvas width=600 height=300 id=canvas>< /canvas> <img id=image <script> var canvas = document.getElementById('canvas'); var imagem = new Image(); image.setAttribute('crossorigin', 'anonymous'); image.onload = function() { ctx.drawImage(image, 0, 0); = canvas.toDataURL('imagem/png'); 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg' </script></body>Comparando as duas partes de código JS acima, você encontrará esta linha extra:
image.setAttribute('crossorigin', 'anônimo');É simples assim, uma solução perfeita!
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.