Este artigo apresenta a solução para o problema de toDataURL() relatar um erro ao introduzir imagens de vários domínios no Canvas. Gostaria de compartilhar com você.
【Cena】
Quando um usuário abre uma página da web, ele solicita fotos no Tencent COS (servidor de imagens). Desenhe usando tela.
O usuário pode então selecionar novamente a imagem, recortá-la e carregá-la.
【pergunta】
Quando a imagem é carregada pela primeira vez, não há problema em recortar e desenhar após selecionar uma nova imagem. Mas o upload falhou com o seguinte erro:
Falha ao executar 'toDataURL' em 'HTMLCanvasElement': telas contaminadas não podem ser exportadas.
Após o entendimento, você precisa definir o campo crossOrigin quando a imagem for referenciada pela primeira vez:
var c=document.getElementById(cover_show); var img=new Image(); : img.setAttribute(crossOrigin,'anônimo'); img.onload = function(){ var cxt=c.getContext(2d).cxt.drawImage(img,0,0,300,150,0,0,200,126 });Em seguida, execute-o novamente. Descobri que a imagem não foi exibida quando foi carregada pela primeira vez. . .
O erro do console é o seguinte:
【Solução final】
Faça login no Tencent Cloud COS, encontre este bucket e configure o CORS de acesso entre domínios. (O mesmo se aplica a outros servidores PHP/JAVA)
Teste novamente: a imagem é exibida com sucesso e o upload da imagem é feito com sucesso.
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.