HTML5 Canvas front-end generation thumbnail image

HTML5 Canvas front-end generation thumbnail image

Update :
2013/08/01: Resolves the bug that was encountered later: the picture was squashed (IOS6); The picture is rotated;
The whole source is stacked in: https://github.com/kairyou/html5-make-thumb
The new scheme needs to be implemented later, which is the function in the old version below (watermark/whether to force stretching to fit the target size and so on).

W3ctech Changsha Station Exchange, sharing the Ppt:http://www.slideshare.net/99leon/html5-create-thumbnail

The previous bug version is in branch old (deprecated), please use the updated scheme ~

2013/01/07:
11 to do the company's mobile page, upload pictures when the thumbnail is generated by the backend, but with the current mobile phone more and more bull X (camera than digital camera), picture volume is also getting bigger.
A few m figure, maybe we just used to generate a small map of the 100*100, upload to the backend to generate thumbnails is a waste of time, and the submission of the form is not long-lasting, the user experience is not good.
Normal Web Forms, uploading pictures by the backend to generate thumbnails is very common, but with HTML5, for mobile Web development You can consider using the front-end to generate thumbnails.

wrote a plugin for jquery that generated thumbnails, the main parameters:

2. width : generates the width of the thumbnail image; Height : generate a high thumbnail image;
4. Fill : when the picture is smaller than the thumbnail size, whether to fill (false: thumbnail width height auto zoom to fit picture,true: thumbnail size unchanged)
6. background : Create picture fill background (default #fff, background transparent when NULL is set)
8. type : Create a picture type (' image/jpeg ' or ' image/png ')
10. size : generate thumbnail mode, the effect of creating thumbnails is mainly referenced by CSS3 of the background - size Properties:
12. contain : equal to scale and stretch, The pictures are all displayed;
14. cover : equal to scale and stretch, The picture covers the container completely;
16. Auto: The picture is not stretched and is centered.
18. Mark : Watermark
20. text watermark: mark ={padding:5, Height : - , text : ' Test ' , Color : ' #000 ' , Font : ' 18px Arial ' }
22. picture watermark: mark ={padding:5, src :' mark.png ', width : Height: $;
24. Stretch : whether the small graph forces stretching to fit the thumbnail size (size =auto/contain )
26. Success : after you generate a thumbnail image Callback

The general idea is as follows:
First judge whether support FileReader (support FileReader, canvas is a cinch)
Unsupported words: Do not do anything, the default input type= "file" upload, by the backend to generate thumbnails.
Supported scenarios: When input change is selected, the chosen file is a picture, creating a hidden canvas and drawing the picture into the canvas,
Because you want to generate thumbnails, when you draw in canvas, you control the cut coordinates and the width of the cut is OK.
In addition, watermark can be added, image watermark or text watermark added to the canvas is more convenient.
Finally Canvas.todataurl turn into Base64, post to the back end (first input type= "file" removed, regenerated into a new input type= "hidden" storage image data), the backend after receiving directly saved as a picture is OK.
Mainly used: FileReader and canvas, one to read local images, one to generate thumbnails.

The students who do mobile web development can be considered.

Transferred from: http://www.fantxi.com/blog/archives/create-thumbnail-images-html5/