The canvas compressed image is converted into a base64 output file stream,

The canvas compressed image is converted into a base64 output file stream,

I studied the canvas image compression method yesterday and uploaded it to share it with you.

<! -- Call the canvas Method --> <canvas id = "canvas"> </canvas> <! -- Path strength of the compressed image -->   <! -- Source Image Compression -->  

// Three call methods of drawimage // ctx. drawImage (Image, dx, dy); // ctx. drawImage (Image, dx, dy, dWidth, dHeight); // ctx. drawImage (Image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); // images Image elements. Three other formats are supported for prediction, htmlvideoElement htmlcanvasElement imagebitmap // todataurl is the canvas Element Method. put back the data url in the specified image format, that is, the base64 encoded string // todataurl method can accept up to two parameters, the two parameters are optional: // type image format. the following three methods are supported: image/jpeg images/png image/webp. the parameters are image.png var canvas = document. getElementById ('canvas '); var source = document. getElementsByClassName ('source'); var preview = document. getElementsByClassName ('preview'); canvas. style. display = "none"; window. onload = function () {// multiple images can be compressed cyclically for (var I = 0; I <preview. length; I ++) {var width = source [I]. width; var height = source [I]. height; var context = canvas. getContext ('2d '); // the offset of the source image area (rectangle) to be drawn to the canvas on the X axis var sx = 0; // sy: The Source image area (rectangle) to be drawn to the canvas offset var sy = 0 on the Y axis; // swidth: the width of the source image area to be drawn to the canvas, if this value is not specified, the width is the distance from sx to the rightmost of the image var sWidth = width; // The width of the source image area to be drawn from sHeight in the canvas, if this value is not specified, the height is the distance from sy to the bottom of the image var sHeight = height; // The offset var dx = 0 on the X axis of the top left corner of the dx source image on the canvas; // The offset var dy = 0 on the Y axis of the canvas in the upper left corner of the dy source image; // The width of the canvas for the dwidth image; // The width of the canvas for the dHeight image; var dWidth = width; var dHeight = height; var quality = 0.2; canvas. width = width; canvas. height = height; context. drawImage (source [I], sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); var dataUrl = canvas. toDataURL ('image/jpeg ', quality); preview [I]. src = dataUrl;} // lele.info (dataUrl) ;}; // traverse the source image for (var I = 0; I <source. length; I ++) {source [I]. src = 'img/'+ (I + 1) + '.jpg ';}

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!