"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Por qué canvas.toDataURL() genera una excepción de seguridad al cargar imágenes desde diferentes servidores?

¿Por qué canvas.toDataURL() genera una excepción de seguridad al cargar imágenes desde diferentes servidores?

Publicado el 2024-11-11
Navegar:961

Why Does canvas.toDataURL() Throw a Security Exception When Loading Images From Different Servers?

Problema de origen cruzado en Canvas toDataURL()

A pesar de garantizar suficiente descanso, los usuarios pueden encontrar excepciones de seguridad al usar canvas.toDataURL() . Considere el siguiente código:

var frame = document.getElementById("viewer");
frame.width = 100;
frame.height = 100;

var ctx = frame.getContext("2d");
var img = new Image();
img.src = "http://www.ansearch.com/images/interface/item/small/image.png"

img.onload = function() {
    // Draw image
    ctx.drawImage(img, 0, 0)

    // Security exception occurs here:
    window.open(frame.toDataURL("image/png"));
}

Este código intenta abrir una imagen de un servidor diferente como datos base64 en una nueva ventana, pero genera una excepción SECURITY_ERR.

Según las especificaciones, el método toDataURL() de un elemento de lienzo genera una excepción SECURITY_ERR si su indicador de limpieza de origen está establecido en falso. Cuando se carga una imagen desde un servidor diferente, el lienzo se contamina y su indicador de origen limpio se establece en falso.

Por lo tanto, no es posible usar directamente toDataURL() para obtener datos base64 para imágenes provenientes de diferentes servidores. Es posible que se necesiten técnicas alternativas, como CORS o proxies, para manejar imágenes de orígenes cruzados.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3