O documento de especificação HTML introduz o atributo crossorigin para imagens. Ao definir o CORS de informações de cabeçalho apropriado, as imagens img podem ser carregadas de outros sites e usadas no canvas, assim como baixadas diretamente do site atual (origem atual).
Para obter detalhes sobre o uso de atributos de origem cruzada, consulte atributos de configurações do CORS.
O que é uma tela contaminada?Embora seja possível usar imagens no canvas sem autorização do CORS, isso danificará o canvas. Enquanto a tela estiver contaminada, os dados não poderão mais ser extraídos da tela, o que significa que métodos como toBlob(), toDataURL() e getImageData() não poderão ser chamados, caso contrário, um erro de segurança será gerado.
Na verdade, isso serve para proteger as informações pessoais dos usuários e evitar carregar informações de imagens dos usuários de sites remotos sem permissão, causando vazamentos de privacidade.
Exemplo: Salvando fotos de outros sites(Nota do tradutor: Se o usuário tiver feito login em sites de redes sociais como o QQ, se nenhuma proteção for fornecida, o site poderá usar o canvas para obter e fazer upload das informações da imagem do usuário após abrir um site, causando vazamento.)
Primeiro, o servidor de imagem deve definir o cabeçalho de resposta Access-Control-Allow-Origin correspondente. Adicione o atributo crossOrigin do elemento img ao cabeçalho da solicitação. Por exemplo, o servidor Apache pode copiar as informações de configuração nas configurações do servidor HTML5 Boilerplate Apache para responder:
<IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch /.(cur|gif|ico|jpe?g|png|svgz?|webp)$> SetEnvIf Origem: IS_CORS Conjunto de cabeçalho Access-Control-Allow-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>
Depois que essas configurações entrarem em vigor, você poderá salvar imagens de outros sites no armazenamento DOM (ou em outros locais), assim como os recursos deste site.
var img = new Image, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), src = http://example.com/image; // Endereço específico da imagem img.crossOrigin = Anonymous;img. = function() { canvas.width = img.width; canvas.height = img.height; 0 ); localStorage.setItem( saveImageData, canvas.toDataURL(image/png) );}img.src = src;// Certifique-se de que a imagem em cache também acione o evento de carregamento if ( img.complete || img.complete == = indefinido) { img.src = dados:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==;Compatibilidade do navegador
Área de trabalho
| Recurso | Cromo | Raposa de fogo (Gecko) | Internet Explorer | Ópera | Safári |
|---|---|---|---|---|---|
| Suporte básico | 13 | 8 | Sem suporte | Sem suporte | ? |
Móvel
| Recurso | Android | Firefox Móvel (Gecko) | Ou seja, celular | Ópera móvel | Safári Móvel |
|---|---|---|---|---|---|
| Suporte básico | ? | ? | ? | ? | ? |
Veja também
Chrome: usando imagens de origem cruzada no WebGL
Atributo de especificação HTML de origem cruzada
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.