Permisos de recursos de imágenes entre dominios (imagen habilitada para CORS)

El documento de especificación HTML introduce el atributo crossorigin para imágenes. Al configurar la información de encabezado CORS adecuada, las imágenes img se pueden cargar desde otros sitios y usarse en lienzo, tal como se descargan directamente desde el sitio actual (origen actual).

Para obtener detalles sobre el uso de atributos de origen cruzado, consulte los atributos de configuración de CORS.

Aunque es posible utilizar imágenes en el lienzo sin la autorización de CORS, hacerlo contaminará el lienzo. Mientras el lienzo esté contaminado, los datos ya no se podrán extraer del lienzo, lo que significa que no se pueden llamar a métodos como toBlob(), toDataURL() y getImageData(); de lo contrario, se generará un error de seguridad.

En realidad, esto es para proteger la información personal de los usuarios y evitar cargar información de imágenes de los usuarios desde sitios web remotos sin permiso, lo que provoca fugas de privacidad.

(Nota del traductor: si el usuario ha iniciado sesión en sitios de redes sociales como QQ, si no se proporciona protección, el sitio web puede usar lienzo para obtener y cargar la información de la imagen del usuario después de abrir un sitio web, lo que provoca filtraciones).

Primero, el servidor de imágenes debe configurar el encabezado de respuesta Access-Control-Allow-Origin correspondiente. Agregue el atributo crossOrigin del elemento img al encabezado de la solicitud. Por ejemplo, el servidor Apache puede copiar la información de configuración en las configuraciones del servidor Apache HTML5 Boilerplate para responder:

 <IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch /.(cur|gif|ico|jpe?g|png|svgz?|webp)$> SetEnvIf Origen: IS_CORS Conjunto de encabezado Acceso-Control-Permitir-Origin * env=IS_CORS </FilesMatch> </IfModule></IfModule>

Una vez que estas configuraciones surtan efecto, puede guardar imágenes de otros sitios en el almacenamiento DOM (u otros lugares) al igual que los recursos de este sitio.

 var img = nueva imagen, lienzo = document.createElement(canvas), ctx = canvas.getContext(2d), src = http://example.com/image; // Dirección de imagen específica img.crossOrigin = Anonymous;img. = función() { lienzo.ancho = img.ancho; lienzo.alto = img.alto; 0 ); localStorage.setItem( saveImageData, canvas.toDataURL(image/png) );}img.src = src;// Asegúrese de que la imagen almacenada en caché también active el evento de carga si ( img.complete || img.complete == = indefinido) { img.src = datos:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==; img.src = src;}

Compatibilidad del navegador

De oficina

Móvil

Ver también

Chrome: uso de imágenes de orígenes cruzados en WebGL

Atributo HTML de especificación de origen cruzado

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.