solução canvas.toDataURL () no qual o erro de todos

informações detalhadas do erro

Uncaught DOMException: Falhou a execução do 'toDataURL' on 'HTMLCanvasElement': telas Tainted não pode ser exportado.

palavra chave

canvas.toDataURL()

crossOrigin

Access-Control-Allow-Origin

prefácio

Recentemente fazendo uma imagem de ferramentas a classe criativa síntese, Qi é provavelmente personalizados texto e de imagens mensagens geradas por splicing de imagens de produtos semelhantes funcionar, o projeto usa fabric.jsa biblioteca prancheta de desenho, o último passo relatado acima, no momento das imagens guardadas uma longa lista de erros, encontrou uma parede fora da parede novamente, a solução não é dada a completa, a fim de evitar os estudantes pisou pit novamente, então com este artigo

texto

Estamos convertDOM2Image, se DOMos recursos de memória da imagem, onde o recurso web-servernão suporta cross-domain, salve a imagem não será bem sucedido.

Portanto, ao solucionar um problema, devemos primeiro determinar

1. web-serverQuando permitir cross-domain, temos que nginx, por exemplo, response-headerdentro de existir Access-Control-Allow-Orgin:xxxx(pode ser *, requisitos relativamente altos de segurança podem ser personalizados de acordo com o nome de domínio principal)

2. Se imgo rótulo, se forem adicionadas crossorigin="anonymous", se for Imageo objeto, seja para adicionar a mesma alteração de atributoobj.crossOrigin='anonymouse'

3. Se não bastasse, a resposta não está aqui para colocar para fora, vamos dar uma olhada castanhas

---

Nos próximos castanhas, vamos usar vai Imageser convertida para canvasmétodos de objetos

  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;
  }

castanhas 1

Local não permitir cross-domain conjunto de opções crossorigin=anonymous, web-servernão definida para permitir opções de domínio cruzado

  <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, um erro

castanhas 2

A locais opções de configuração de etiquetas permitir cross-domain, web-servercross-domain permite que a opção não está definida

As imagens não são sequer sair, erro directo

Isso é fácil de entender, o navegador da política mesma origem restrições Bem

Acesso a imagem no 'xxxx' (redirecionado de 'xxxx') de origem 'nulo' foi bloqueado pela política CORS: No 'Access-Control-Allow-Origin' header está presente no recurso solicitado.

castanhas 3

cross-domain local permite que a opção não está definida crossorigin=anonymous, web-serverdefina a opção para permitir cross-domain

Erro, corretamente corretamente.

castanhas 4

Situado no interior de uma etiqueta local para permitir opção de cross-domain crossorigin=anonymous, web-serverdefinir a opção para permitir cross-domain

  <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>

Na verdade ele , mas - se você configurá-lo no código para cross-domain?

castanha 5

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

Erro
vejo documentos oficiais meios que devem ser sincronizados conjunto crossOrigin=anonymouse, a imagem não será confiável credenciais

Isto significa que CORS está ativado e as credenciais são enviadas se a imagem é obtido a partir da mesma origem a partir do qual o documento foi carregado.

Caso contrário, os dados de imagem em cache ainda será considerado como lona contaminação cruzada do conteúdo de origem.

Como fazer? Re-tire a foto novamente cantando, mais um número, imagem aleatória ou a imagem, mas acrescentou um colete, o navegador não sabe o

castanhas 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 , solução perfeita

Portanto, no processo de desenvolvimento, as novas imagens, alterar as imagens, restaurar imagens e outras funções dentro do código, o melhor de cada vez para adicionar um número aleatório, para garantir que a fonte é até à data, não vá de cache

---

Digamos que um pequeno bar, na fabric.jsconfiguração de domínio cruzado relevante, veja abaixo

    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'})