Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use Canvas in HTML5 to export and upload pictures to the server. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Train of thought:

1. Export the canvas picture using the toDataURL () method, and get the data of base64 at this time

two。 Encapsulate base64 data into blob objects

3. Assemble FormData

4.ajax upload

Of course, the upload process needs to be matched by children's shoes on the server, such as setting cross-domain, such as agreed fields.

A humble demo:

Function handleSave () {/ / Export picture 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 custom fd.append ("fileName", "123jpg"); / / fileName is custom, and the name is randomly generated or written dead. Depending on the demand / / ajax upload, the form of ajax is random, 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. There is no difference between the way data is received and the uploaded file var xmlHttp = new XMLHttpRequest (); xmlHttp.open ("POST", "url you send upload request"); xmlHttp.setRequestHeader ("Authorization", 'Bearer' + localStorage.token); / / set request header, set on demand, 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; iTunes +) {ia [I] = byteString.charCodeAt (I);} return new Blob ([ia], {type: mimeString});}

Knowledge point expansion:

HTML5 Canvas is converted into pictures and uploaded to the server.

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

With js processing at the front end in the above way, no additional processing is required on the server side.

I think it is the most convenient and direct way, on the contrary, a lot of high praise reply, need server for all kinds of processing, do not recommend.

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

On "how to use Canvas in HTML5 to export and upload pictures to the server" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.