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

This article mainly introduces "how to use html5's canvas mobile browser to achieve picture compression upload". In the daily operation, I believe many people have doubts about how to use html5's canvas mobile browser to achieve picture compression upload. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for everyone to answer the question of "how to use html5's canvas mobile browser to achieve picture compression upload". Next, please follow the editor to study!

First, get the local picture and draw the picture into the canvas. The difficulty here is that due to the protection mechanism of the browser, the image path of the local file cannot be obtained directly, so the local image needs to be compiled into base64 format before uploading, as follows:

JavaScript Code copies content to the clipboard

Var result = document.getElementById ("/ * error message display block * /")

Var input = document.getElementById ("/ * upload file tag * /")

If (typeof FileReader = = 'undefined') {

Result [XSS _ clean] = "Sorry, your browser does not support FileReader

"

Input.setAttribute ('disabled','disabled')

} else {

Input.addEventListener ('change',readFile,false)

}

Function readFile () {

Var file = this.files [0]

If (! / image///w+/.test (file.type)) {

Alert ("Please make sure the file is an image type")

Return false

}

Var reader = new FileReader ()

Reader.readAsDataURL (file)

Reader.onload = function (e) {

/ / the compiled image coding of this.result can be directly displayed in src.

}

}

2. Image processing in canvas

JavaScript Code copies content to the clipboard

Var c=document.getElementById ("/ * id * /" of the canvas tag)

Var cxt=c.getContext ("2d")

Var img=new Image ()

The image encoding address obtained by img.src=/* * /

Var width = img.width

Var height = img.height

Dic = height / width

C.width = 200; / / Image compression standard, which is calculated according to the fixed 200px.

C.height = 200 * dic

Cxt.clearRect (0Pol. 0200200. Dec)

Cxt.drawImage (img,0,0200200*dic)

Var finalURL = c.toDataURL ()

/ / the resulting finalURL is the compressed image encoding, which can be used to upload or directly generate img tags.

Here are a few points to note:

1. An error will be reported during local debugging because of a cross-domain problem, which needs to be debugged on the server.

2. The drawImage () method in canvas has the function of image clipping, but if the image is stretched and clipped at the same time, the clipping method will be performed first.

3. When uploading image encoding using AJAX, the plus sign in the code will be converted to blank space and the background compilation will fail.

At this point, the study on "how to use html5's canvas mobile browser to achieve picture compression and upload" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.