Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
CORS_habilitar_imagens
The HTML specification introduces acrossorigin attribute for images that, in combination with an appropriateCORS header, allows images defined by the<img> element that are loaded from foreign origins to be used in canvas as if they were being loaded from the current origin.
SeeCORS settings attributes for details on how thecrossorigin attribute is used.
O que é um "contaminado" canvas?
Embora você possa usar imagens sem aprovação do CORS em seu canvas, criando contaminação ao canvas. Uma vez o canvas tenhya sido "contaminado" você não pode mais "puxar" informações do canvas.Por exemplo, você pode não mais usar os métodos canvas toBlob(), toDataURL(), ou getImageData(), fazendo isto você irá lançar um erro de sergurança.
Esta proteção de usuário tem tido dados expostos por uso de informações de imagens de site web remoto sem permissão.
Exemplo: Armazenando uma imagem de uma origem estrangeira
Você precisa ter um servidor hospedando as imagenscom o apropriado Access-Control-Allow-Origin cabeçalho. Adicionando atributos crossOrigin faz uma requisição ao cabeçalho. Você pode usar este exemplo dasConfigurações Apache Server HTML5 Boilerplate para aproximadamente responder com este cabeçalho de resposta.
<IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$"> SetEnvIf Origin ":" IS_CORS Header set Access-Control-Allow-Origin "*" env=IS_CORS </FilesMatch> </IfModule></IfModule>Dado que está tudo classificado, você permiti salvar àquelas imagens noArmazenamento DOM
var img = new Image(), canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"), src = "http://example.com/image"; // insert image url hereimg.crossOrigin = "Anonymous";img.onload = function () { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); localStorage.setItem("savedImageData", canvas.toDataURL("image/png"));};img.src = src;// make sure the load event fires for cached images tooif (img.complete || img.complete === undefined) { img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; img.src = src;}