Exporte imagens HTML5 Canvas e carregue funções do servidor

Exporte imagens HTML5 Canvas e carregue-as no servidor

Em projetos recentes, muitas vezes encontro a necessidade de fazer desenhos na tela, como quebra-cabeças, edição de imagens, etc. As imagens processadas pelo canvas devem envolver salvamento.

Portanto, o método a seguir pode ser o que você precisa ~

1. Use o método toDataURL() para exportar a imagem da tela e obter os dados base64.

2. Encapsular dados base64 em objetos blob

3. Monte FormData

4. upload ajax

É claro que o processo de upload requer a cooperação do lado do servidor, como a configuração de domínios cruzados, como campos acordados. . .

Uma demonstração simples:

 function handleSave () { //Exporta dados de imagem no formato base64 var mycanvas = document.getElementById(mycanvas); var base64Data = mycanvas.toDataURL(image/jpeg, 1.0); //Encapsular objeto blob var blob = dataURItoBlob(base64Data); //Montar formdata var fd = new FormData(); blob); //fileData é personalizado fd.append(fileName, 123jpg); //fileName é personalizado, o nome é gerado aleatoriamente ou codificado, dependendo dos requisitos //upload do ajax, a forma do ajax é arbitrária e não há problema com a escrita de JQ //Deve-se observar que o servidor precisa ser configurado para permitir solicitações entre domínios. A forma de receber os dados não é diferente do arquivo enviado por <input type=file/>var xmlHttp = new XMLHttpRequest(); localStorage.token);//Definir o cabeçalho da solicitação, definido conforme necessário, opcional xmlHttp.send(fd); //retorno de chamada do ajax xmlHttp.onreadystatechange = () => { //fazer seu código... } }; (base64Data) { var byteString; (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); ,')[1]); base64Data.split(',')[0].split(':')[1].split(';')[0]; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i } return new Blob([ia], {tipo: mimeString});};

 função b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); charCodeAt(i)); i++ } return new Uint8Array(img_buffer);}var b64Image = canvas.toDataURL('image/jpeg');var u8Image = b64ToUint8Array(b64Image);var formData = new FormData();formData.append(image, new Blob([ u8Image ], {type: image/jpg}) );var xhr = new XMLHttpRequest();xhr.open(POST, /api/upload, true);xhr.send(formData);

Usando o método acima, ele é processado por meio de js no front-end e nenhum processamento adicional é necessário no lado do servidor.

Acho que é o método mais conveniente e direto, porém, existem muitas respostas de alta qualidade e requerem diversos processamentos por parte do servidor, o que não é recomendado.

Tive que converter a imagem codificada em Canvas Base64 em Uint8Array Blob .

Referência: https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server

O texto acima é a função de exportar imagens HTML5 Canvas e enviá-las para o servidor introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!

Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!