How to solve the problem of picture upload pre-processing in HTML5

This article is about how to solve the problem of image upload pre-processing in HTML5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Get a picture

Get the picture through File API.

Var input = document.createElement ('input'); input.type =' file';input.addEventListener ('change', function () {var file = this.files [0];}); input.click ()

Preview picture

Use createObjectURL () or FileReader to preview the picture:

Var img = document.createElement ('img'); img.src = window.URL.createObjectURL (file); var img = document.createElement ("img"); var reader = new FileReader (); reader.onload = function (e) {img.src = e.target.result;} reader.readAsDataURL (file)

Use canvas to make thumbnails

Var canvas = document.createElement ("canvas"); var ctx = canvas.getContext ("2d"); var MAX_WIDTH = 800 X var MAX_HEIGHT = 600 X var width = img.width;var height = img.height;if (width > height) {if (width > MAX_WIDTH) {height * = MAX_WIDTH / width; width = MAX_WIDTH;}} else {if (height > MAX_HEIGHT) {width * = MAX_HEIGHT / height; height = MAX_HEIGHT }} canvas.width = width;canvas.height = height;ctx.drawImage (img, 0,0, width, height)

Upload thumbnails

Canvas.toBlob (function (blob) {var form = new FormData (); form.append ('file', blob); fetch (' / api/upload', {method: 'POST', body: form});}); Thank you for reading! This is the end of this article on "how to solve the problem of picture upload pre-processing in HTML5". 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, you can share it out for more people to see!