Resumo do desbloqueio de N posturas para exportar imagens do canvas entre domínios

Este artigo apresenta um resumo de N posturas para desbloquear imagens exportadas entre domínios do canvas. Gostaria de compartilhá-las com você.

DOMException não capturada: falha ao executar 'toDataURL' em 'HTMLCanvasElement': telas contaminadas não podem ser exportadas.

Acredito que todos encontraram o erro acima ao usar o canvas para executar toDataUrl para exportar imagens. O nome de domínio do servidor de imagens é diferente do atual porque a política de segurança não permite a exportação de imagens entre domínios.

Quando a imagem se torna base64, não há necessidade de falar sobre o nome de domínio e, naturalmente, não há entre domínios

Nota: Converta a imagem para base64 e aumente o tamanho do arquivo de imagem. Se a imagem for relativamente grande, não é recomendado converter para base64, caso contrário, aumentará o tempo de carregamento da página da web e afetará a velocidade do site. para imagens pequenas.

Ou seja, o cabeçalho de resposta retornado pela solicitação da imagem contém Access-Control-Allow-Origin com o valor definido como * (permitindo solicitações entre domínios de todos os sites) ou o nome de domínio do site atual (permitindo apenas solicitações entre domínios em nomes de domínio fixos) e, em seguida, o front-end carrega a imagem Defina o atributo de origem cruzada da imagem img.crossOrigin=anonymous。 O código específico é o seguinte

 var canvas = document.getElementById('myCanvas') var ctx = canvas.getContext('2d') var img = document.createElement('img') img.crossOrigin=anonymous img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg' img.onload = function() { ctx.drawImage(img,0,0,500,300); console.log(canvas. toDataURL()) }

Desta forma, os problemas de domínio cruzado podem ser facilmente resolvidos combinando os componentes dianteiro e traseiro.

Perdoe-me por rir mal, esta é realmente uma solução para o problema.

MAS Em projetos reais, as imagens geralmente são armazenadas em CDN, portanto esse método não é realista.