Work accumulation (i)--using canvas to achieve foreground picture base64 transcoding

Use HTML5 <canvas></canvas> tags and canvasapi , we can get pictures of the Base64 code, can be completed in front of the picture to base64 transcoding instead of using the background, look at the implementation method below.

1.HTML Code snippet:

The HTML code is very simple, just need to use the HTML5 <canvas></canvas> tag, specify its ID so that we can find the element:

<canvas id= "Load-area" ></canvas>

However, it is important to note that images that need to be converted to Base64 codes need to be included in the tag beforehand, and doing so gives us the true width and height values of the image. To not affect the display, you can choose to set it to hidden:

2.JavaScript Code snippet:

javascript code we use the Canvas API drawImage (tmpimage, 0, 0) We're not going to delve into these methods, just know "2d" image 0, 0 The number of pixels from the left and the top of the resulting picture, respectively. To see the specific code:

$ (window). Load (function () {var Loadcanvas = document.getElementById ("Load-area"), context = Loadcanvas.getcontext ("2d  "), Tmpimage = new Image (), base64str =" ";  Loadcanvas.width = $ (' #convert-img '). width ();  Loadcanvas.width = $ (' #convert-img '). Height ();  TMPIMAGE.SRC = "Img/demo.png";  Context.drawimage (tmpimage, 0, 0); Base64str = Loadcanvas.todataurl ("Image/png");};

At this point , the variable base64str is the base64 code that the picture is converted to . Through the Ajax to the direct POST to the backstage, through the base64 decoding save, complete the image upload.

Add:

in the In the JavaScript code we used the JQuery

$ (window). Load (function () {});

method, the method is almost equivalent to JavaScript in the

Window.onload =function () {};

Only the former can be used multiple times on the same page, while the latter is only used once on the same page. Not used here

$ (document). Ready (function () {}); $ (function () {});

is because the time node of the method is the DOM is loaded, and large files, such as pictures, music, and so on, may still be loaded. If you want to use it, you need to make the following modifications to JavaScript:

$ (function () {var tmpimage = new Image ();  TMPIMAGE.SRC = "Img/demo.png"; Tmpimage.onload = function () {var Loadcanvas = $ (' #load-area '). Get (0), context = Loadcanvas.getcontext ("2d"), BA    Se64str = "";    Loadcanvas.height = $ (' #convert-img '). Height ();    Loadcanvas.width = $ (' #convert-img '). width ();    Context.drawimage (tmpimage, 0, 0);  Base64str = Loadcanvas.todataurl ("Image/png"); };});

Note: Accessories for the demo source code, for reference (originally, the. html file, because the upload is not allowed to convert to a. txt file, you can modify the file suffix name after downloading).

This article is from the "barrel of fake dog excrement" blog, please be sure to keep this source http://xitongjiagoushi.blog.51cto.com/9975742/1637698

Work accumulation (i)--using canvas to achieve foreground picture base64 transcoding