/***Thoughts: Create a HTML5 Canvas custom size, pass the picture in, and then get the canvas content. Simple, crude and effective! ****/
/** March 3, 2016
* Picture compression, made by Daxian
* Technical Communication 495120021
* @param fil
* @param id
*/
function getUrl(fil, id) {
var Cnv = ('myCanvas');
var Cntx = ('2d');//Get 2d edit container
var imgss = new Image();
var agoimg=("ago");
for (var intI = 0; intI < ; intI++) {
var tmpFile = fil[intI];
var reader = new FileReader();
(tmpFile);
= function (e) {
url = ;
= url;
=url;
= function () {
//Equal ratio zoom
var m = / ;
=300;//This value affects the size of the picture after scaling
= 300*m;
//Put img into the canvas
//Set the start coordinate and end coordinate
(agoimg, 0, 0,300*m,300);
}
}
}
}
function pressss(){//
//Get the image data compressed by canvas
var Pic = ("myCanvas").toDataURL("image/png");
var imgs =("press");
=Pic;
//Upload
// Remove the excess and get the base64-encoded picture byte stream
Pic = (/^data:image\/(png|jpg);base64,/, "");
//You can submit it to the background using ajax. After submission, you can directly save the database or save it as a picture. This is omitted here.
}
<input type="file" name="fileId" value="upload image"
hidefocus="true" οnchange="getUrl(,);"/>
<canvas style="display: none" >/canvas>
old img-><img src="" alt="" style="width: 500px;"/>
<input type="button" value="ya suo->" οnclick="pressss()" />
new img-><img src="" alt="" />
</body>
</html>Copy and paste the above html code directly or download it through the link below
Download address:demo download