How to generate thumbnails by canvas canvas for mobile web HTML5

The company's mobile page, upload pictures when the thumbnail is generated by the back-end, but with the current mobile phone more and more cattle x (camera than the digital camera is also fierce ~), the picture volume is also getting larger.

A few m of the graph, maybe we just used to generate a 100*100 small map, upload to the back end and then generate thumbnails is greatly wasted, and the waiting time to submit the form is not long, the user experience is not good.

Ordinary Web Forms, uploading images to the back end to generate thumbnails is very common, but with HTML5, for mobile Web development, you can consider using the front-end to generate thumbnails.

Write a plugin for jquery that generates thumbnails, the main parameters:

Width: Generate the width of the thumbnail; Height: generates thumbnails of high;
Fill: If the picture is smaller than the thumbnail size, fills (false: The thumbnail width is automatically scaled to fit the picture, true: The thumbnail size is unchanged)
Background: Generate picture fill background (default #fff, background transparent when setting null)
Type: Generating picture types (' image/jpeg ' or ' image/png ')
Size: Generates thumbnails, the effect of generating thumbnails is mainly referenced by the CSS3 background-size properties:
Contain: equal scaling and stretching, the picture is all displayed;
Cover: equal scaling and stretching, the picture of the container completely covered;
Auto: The picture is not stretched and centered.
Mark: Watermark
Text watermark: Mark = {padding:5, height:18, Text: ' Test ', Color: ' #000 ', font: ' 18px Arial '}
Picture watermark: Mark = {padding:5, src: ' mark.png ', width:34, height:45};
Stretch: Does the small figure force stretching to fit the size of the thumbnail (size = auto/contain)
Success: Callback after generating thumbnails

The general idea is as follows:

First of all to determine whether to support FileReader (support FileReader, canvas is not a cinch)

Unsupported words: Do not do any operation, the default input type= "file" upload, to the back end to generate thumbnails.

Supported by: Input change, judge the selected file is a picture, create a hidden canvas, and the picture into the canvas,

Because you want to generate a thumbnail, so when drawing in the canvas, control the shearing coordinates and cut the width of the job OK.

Also can add watermark, picture watermark or text watermark add to canvas above is also more convenient.

Finally canvas.todataurl into the Base64, post to the back end (first input type= "file" removed, regenerate into a new input type= "hidden" store picture data), after receiving directly saved as a picture on OK.

Mainly used: FileReader and canvas, one to read local pictures, one to generate thumbnails.

Do mobile Web development students can consider.