HTML5 Lab Profile Canvas image processing (i.)

As a front-end, presumably to HTML5 are not unfamiliar, especially mobile, now is compared to the fire, the amount of gold is far better than the PC, rather than the HTML5 is a new era of web revolutionary technology, rather, it is a modern web application of novel ideas; On the one hand, with JavaScript, The wings of the front are more plump; on the other hand, the Web application is pushed to a new height across terminals; you will see more high-end, atmospheric, cool, interactive experience will be more humane, your device consumption is greatly reduced, running smoother; In short, you'll be amazed at the same time you will be very comfortable! And it's all based on HTML5!

As a small front-end, Caishuxueqian, personal station (flower full floor: http://www.famanoder.com) HTML5 Laboratory plate, will gradually organize some HTML5 small application and personal experience, silly humble opinion, not caught dead! There is no knowledge point of the detailed, there is no demo for June copy, here you see is a whole, but this whole is by the HTML5 of some knowledge points together, because I think all the demo is not a program!

One of the most attractive parts of HTML5 is the canvas, which provides a range of interfaces for manipulating the Web page canvas, and you can manipulate the graphics directly on the HTML and control every pixel in the area! For example: Generate thumbnails, mosaic, resize the image, and even implement a PS-like filter. Wonderful infinity, found by you!

Don't say much nonsense. First we need to get the picture up, here I use the HTML5 file API to read the local image directly and draw it onto the canvas Build a small wheel hooc.js (the detailed code is not complicated, HTML5 the lab is interested to be able to teach on-line), thus to instantiate a canvas;

var hooc=new Hooc ({

ID: ' Canvas ',

WIDTH:500,

height:300

});

by <input type= "file" id= "IFile" name= "IFile"/> The Change event to get the file object (for the time being not consider many files);

document.getElementById (' IFile '). Onchange=function () {

Hooc. Onfile (this.files[0],function (file) {

Now the file contains information about the image you read.

file={

Preimg: ...,

Name: ...,

Size: .....,

Type: .....,

Base64: .....,

Width: .....,

Height: .....

//}

Now draw it onto the canvas.

HOOC.CONTEXT2D (function (CX,CN) {

CX is a 2dcontext object

CN is a Canvas object

Cx.clearrect (0,0,cn.width,cn.height);

Cx.drawimage (File.preimg,0,0,file.width,file.height);

OK, so the picture is drawn up.

Then you can do something else, like a simple filter ...

Well, now you need to save the pictures you've processed.

Download.onclick=function () {

Hooc. Saveasimage (File.type,file.name);

}

});

});

}

The method of saving the canvas as a picture todataurl (); There is no consideration for IE9 and the following low-level browser compatibility, Although there are Google's excanvas.js, but in fact, we are clear, can only solve some of the compatibility issues, we should not be too naïve, there is to save Urldata when IE9 will quote characters too long limit error, so here the download to the local, using HTML5 download method a.download; To be triggered in a timely manner, the direct call is OK, not restricted by the DOM node type; Part of the code is as follows:

Saveasimage:function (type,name) {

if (Navigator.userAgent.toLowerCase (). IndexOf (' msie ')!=-1) {

BSIE

return false;

}

var dataurl=this.canvas.todataurl (' Image/octet-stream ');

Dataurl=dataurl.replace (' image/png ', ' image/' +type+ ');

var name=name.tolowercase (). LastIndexOf ('. ') +type.tolowercase () + ')!=-1?name: (name+ '. ') +type);

var a=document.createelement (' a ');

A.href=dataurl;

A.download=name;

var event=document.createevent (' mouseevents ');

Event.initmouseevent (' click ', True,true,document.defaultview,0,0,0,0,0,false,false,false,false,0,null)

A.dispatchevent (event);

}

As you can see, the content of HTML5 Lab will not consider the compatibility of low-level IE, all use HTML5 related APIs to achieve, I just want to say, really good, meet never miss!

Hooc.js will also be able to organize a number of possible based on the canvas image processing more methods, to achieve a minips, on the one hand as a summary of the canvas learning, on the other hand, can assist themselves to deal with the picture; If you have the privilege of discussing with June, or to the reader benefit, feel honored, please look forward to!

HTML5 Lab Profile Canvas image processing (i.)