solución canvas.toDataURL () en la que el error de todos

información detallada del error

Uncaught DOMException: Error al ejecutar 'toDataURL' en 'HTMLCanvasElement': lienzos Tainted no pueden ser exportados.

palabra clave

canvas.toDataURL()

crossOrigin

Access-Control-Allow-Origin

prefacio

Recientemente hacer un cuadro de herramientas a la clase creativa síntesis, Qi es probablemente personalizados texto y con imágenes generadas por splicing unas imágenes de los productos similares funcionan, el proyecto utiliza fabric.jsla biblioteca de mesa de dibujo, el último paso antes indicado en el momento de las imágenes guardadas una larga lista de errores, encontró una pared exterior de la pared otra vez, la solución no se le da el pleno con el fin de evitar que los estudiantes entró en boxes de nuevo, por lo que con este artículo

texto

Somos convertDOM2Image, si DOMlos recursos de memoria en la imagen, donde el recurso web-serverno es compatible con varios dominios, guardar la imagen no tendrá éxito.

Por lo tanto, la hora de solucionar un problema, hay que determinar primero

1. web-serverYa sea para permitir multidominio, tenemos que nginx, por ejemplo, response-headerdentro de existir Access-Control-Allow-Orgin:xxxx(puede ser *, requisitos relativamente altos de seguridad puede ser personalizado de acuerdo con el nombre de dominio principal)

2. Si imgla etiqueta, si se añade crossorigin="anonymous", si es Imageel objeto, ya sea para añadir el mismo cambio de atributoobj.crossOrigin='anonymouse'

3. Si no es suficiente, la respuesta no está aquí para poner hacia fuera, echamos un vistazo castañas

---

En los próximos castañas, vamos a utilizar se Imagepuede convertir en canvasmétodos de objeto

  function convertImageToCanvas(image) {
    // 创建canvas DOM元素，并设置其宽高和图片一样   
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    // 我们在实际的开发中，需要将抓换后的base64图片编码传输到后台图片服务器，由server直接存储或者生成一张图片；
    // 所以会用到 toDataURL
    console.log(canvas.toDataURL('image/jpeg'))
    return canvas;
  }

Las castañas 1

Local no permitirá conjunto de opciones entre dominios crossorigin=anonymous, web-serverno se establece para permitir opciones de varios dominios

  <div id="d1">
    <img style="width: 300px;height: 240px;" src="http://es6.ruanyifeng.com/images/cover_thumbnail_3rd.jpg" alt="">
    <p>本地未设置跨域允许选项crossorigin=anonymous,web-server未设置跨域允许选项</p>
  </div>
  <button onclick="setCanvas('d1')">canvas保存</button>

    function setCanvas(DOMID) {
      let img = document.getElementById(DOMID).querySelector('img')
        document.body.appendChild(convertImageToCanvas(img))
    }

Obviamente, un error

Las castañas 2

Una etiqueta de opciones de configuración locales permiten que entre dominios, web-serverdominios cruzados permite que la opción no está establecida

Las imágenes no son ni siquiera salir, el error directa

Esto es fácil de entender, el navegador de política mismo origen restricciones Bueno

El acceso a la imagen en 'xxxx' (redireccionado de 'xxxx') desde el origen 'nulo' ha sido bloqueado por la política CORS: No "Access-Control-Allow-Origin cabecera está presente en el recurso solicitado.

Las castañas 3

a través del dominio local permite la opción no está establecido crossorigin=anonymous, web-serverestablece la opción de permitir varios dominios

Error, adecuadamente correctamente.

4 castañas

Ubicado en un sello local para permitir la opción de varios dominios crossorigin=anonymous, web-serverconfigurar la opción de permitir varios dominios

  <div id="d4">
    <img style="width: 300px;height: 240px;" src="https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png" alt="" crossorigin="anonymous">
    <p>本地设置跨域允许选项`crossorigin=anonymous`,`web-server`设置跨域允许选项</p>
  </div>
  <button onclick="setCanvas('d4')">canvas保存</button>

En realidad , pero - si se establece en el código para varios dominios?

castaño de 5

  function setCanvas(DOMID) {
    let img = document.getElementById(DOMID).querySelector('img')
    
    img.crossOrigin= 'anonymous'
    
    document.body.appendChild(convertImageToCanvas(img))
  }

Error de
Veo Documentos oficiales medios que deben ser sincronizados conjunto crossOrigin=anonymouse, la imagen no se puede confiar en las credenciales

Esto significa que CORS está activado y las credenciales se envían si la imagen se capta del mismo origen desde el que se cargó el documento.

De lo contrario, los datos de imagen almacenados en caché todavía serán considerados como lienzo la contaminación cruzada del contenido de origen.

¿Cómo hacer? Vuelva a tomar la fotografía de nuevo el canto, además de un número, imagen aleatoria o la imagen, pero añade un chaleco, el navegador no conoce la

Las castañas 6

  function setCanvas(DOMID) {
    let img = document.getElementById(DOMID).querySelector('img')
    
    img.src =img.src+'?v='+Math.random()
    img.crossOrigin= 'anonymous'
    
    img.onload=()=>{
      document.body.appendChild(convertImageToCanvas(img))
    }
  }

binggo , solución perfecta

Por lo tanto, en el proceso de desarrollo, las nuevas imágenes, cambiar imágenes, restaurar imágenes y otras funciones dentro del código, el mejor cada vez que añada un número aleatorio, para asegurarse de que la fuente es hasta la fecha, no se vaya caché

---

Diga un bar poco, en fabric.jsla configuración de varios dominios pertinente, véase más adelante

    let _fabricConfig = {
        // ....
        crossOrigin:'anonymous'
    };
    /* fabric对象 */
    let _fabricObj = new fabric.Canvas(id, _fabricConfig);


    // 新建图片对象时
    let imgInstance = new fabric.Image.fromURL(url + '?v='+ Math.random(), img => {}, {crossOrigin: 'anonymous'})
    
    // 动态更新图片时
    let currentActive = _fabricInstance.getActiveObj();
    currentActive.setSrc(randomURL, img =>{}, {crossOrigin: 'anonymous'})