Export HTML5 Canvas images and upload server functions

Export HTML5 Canvas images and upload them to the server

In recent projects, I often encounter the need to draw pictures on canvas, such as puzzles, picture editing, etc. Images processed by canvas must involve saving.

Therefore, the following method may be what you need~

1. Use the toDataURL() method to export the canvas image and get the base64 data.

2. Encapsulate base64 data into blob objects

3. Assemble FormData

4.ajax upload

Of course, the upload process requires the cooperation of the server side, such as setting cross-domain, such as agreed fields. . .

A simple demo:

 function handleSave () { //Export image data in base64 format var mycanvas = document.getElementById(mycanvas); var base64Data = mycanvas.toDataURL(image/jpeg, 1.0); //Encapsulate blob object var blob = dataURItoBlob(base64Data); //Assemble formdata var fd = new FormData(); fd.append(fileData, blob); //fileData is customized fd.append(fileName, 123jpg); //fileName is customized, the name is randomly generated or hard-coded, depending on the requirements //ajax upload, the form of ajax is arbitrary, and there is no problem with the writing of JQ //It should be noted that the server needs to be set to allow cross-domain requests. The way of receiving data is no different from the file uploaded by <input type=file/>var xmlHttp = new XMLHttpRequest(); xmlHttp.open(POST, the url you sent the upload request); localStorage.token);//Set request header, set as needed, optional xmlHttp.send(fd); //ajax callback xmlHttp.onreadystatechange = () => { //todo your code... }; }; function dataURItoBlob (base64Data) { var byteString; if (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]); else byteString = unescape(base64Data.split(' ,')[1]); var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], {type: mimeString});};

 function b64ToUint8Array(b64Image) { var img = atob(b64Image.split(',')[1]); var img_buffer = []; var i = 0; while (i < img.length) { img_buffer.push(img. 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);

Using the above method, it is processed through js on the front end, and no additional processing is required on the server side.

I think it is the most convenient and direct method. However, there are many high-like replies and require various processing by the server, which is not recommended.

Had to convert canvas Base64-encoded image to Uint8Array Blob .

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

The above is the function of exporting HTML5 Canvas images and uploading to the server introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!

If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!