Exporte imágenes HTML5 Canvas y cargue funciones del servidor

Exporte imágenes HTML5 Canvas y cárguelas en el servidor

En proyectos recientes, a menudo me encuentro con la necesidad de dibujar sobre lienzo, como rompecabezas, edición de imágenes, etc. Las imágenes procesadas por lienzo deben implicar guardado.

Por lo tanto, el siguiente método puede ser lo que necesitas~

1. Utilice el método toDataURL() para exportar la imagen del lienzo y obtener los datos base64.

2. Encapsular datos base64 en objetos blob

3. Reúna los datos del formulario

4.carga ajax

Por supuesto, el proceso de carga requiere la cooperación del lado del servidor, como la configuración de dominios cruzados, como los campos acordados. . .

Una demostración sencilla:

 function handleSave () { // Exportar datos de imagen en formato base64 var mycanvas = document.getElementById(mycanvas var base64Data = mycanvas.toDataURL(image/jpeg, 1.0); //Encapsular objeto blob var blob = dataURItoBlob(base64Data); //Ensamblar formdata var fd = new FormData(); fd.append(fileData, blob); //fileData está personalizado fd.append(fileName, 123jpg); //fileName está personalizado, el nombre se genera aleatoriamente o está codificado, según los requisitos //carga de ajax, la forma de ajax es arbitraria y no hay problema con la escritura de JQ // Cabe señalar que el servidor debe configurarse para permitir solicitudes entre dominios. La forma de recibir datos no es diferente del archivo cargado por <input type=file/>var xmlHttp = new XMLHttpRequest(); xmlHttp.open(POST, la URL a la que envió la solicitud de carga); localStorage.token);//Establecer encabezado de solicitud, configurar según sea necesario, opcional xmlHttp.send(fd); //devolución de llamada ajax xmlHttp.onreadystatechange = () => { //todo tu código... }; (base64Data) { var byteString; (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); ,')[1]); var cadenamime = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i } return new Blob([ia], {tipo: mimeString});};

 función b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); var img_buffer = []; mientras (i < img.length) { img_buffer.push(img. charCodeAt(i)); i++; } devolver nuevo Uint8Array(img_buffer);}var b64Image = canvas.toDataURL('image/jpeg');var u8Image = b64ToUint8Array(b64Image);var formData = new FormData();formData.append(imagen, new Blob([ u8Image ], {tipo: imagen/jpg}) );var xhr = nueva XMLHttpRequest();xhr.open(POST, /api/upload, verdadero);xhr.send(formData);

Con el método anterior, se procesa a través de js en el front-end y no se requiere procesamiento adicional en el lado del servidor.

Creo que es el método más conveniente y directo. Sin embargo, hay muchas respuestas similares y requieren varios procesamientos por parte del servidor, lo cual no se recomienda.

Tuve que convertir la imagen codificada en Base64 del lienzo a Uint8Array Blob.

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

Lo anterior es la función de exportar imágenes HTML5 Canvas y cargarlas en el servidor introducida por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!

Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!