Source reproduced https://www.cnblogs.com/goloving/p/8260206.html
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8">
<Script the src = "https://cdn.bootcss.com/jquery/3.4. . 1 / jquery.min.js "> </ Script>
<Script Language =" JavaScript ">
the window.onload = function () {
var eleFile = document.querySelector ( '# jjfxSoft_iconPath');
// number of elements in the compressed image needed and object
var Reader = new new FileReader (),
img = new new Image ();
// select the file object
var file = null;
// scale the image needs Canvas
var Canvas = document.createElement ( 'Canvas');
var context = canvas.getContext ( '2d');
after // base64 loaded address Images
= function img.onload () {
targetWidth = maxWidth;
Debugger
// pictures original size
var originWidth = this.width;
var originHeight = this.height;
// maximum size limit
var maxWidth = 300, for the maxHeight = 300;
// target size
var targetWidth = originWidth, targetHeight = originHeight;
// pictures 300x300 size exceeding the limit
IF (originWidth> maxWidth || originHeight> the maxHeight) {
IF (originWidth / originHeight> maxWidth / the maxHeight) {
targetHeight = Math.round (maxWidth * (originHeight / originWidth));
} the else {
= the maxHeight targetHeight;
targetWidth = Math.round (the maxHeight * (originWidth / originHeight));
}
}
// Canvas picture zoom
canvas.width = targetWidth;
canvas.height = targetHeight;
// Clear canvas
context.clearRect (0, 0, targetWidth, targetHeight);
// image compression
context.drawImage (img, 0, 0, targetWidth, targetHeight);
var type = 'image/jpeg';
// the image canvas elements into DataURL
var = dataUrl canvas.toDataURL (of the type);
$ ( " # ceshi1 ".) attr (" src ", dataurl);
// extract data portion in DataURL, Base64 format conversion from binary format
var = atoB bin (dataurl.split ( ',') [. 1]);
// Create an empty Uint8Array
var = new new Uint8Array Buffer (bin.length) ;
// byte by byte into the image data in Uint8Array
for (var I = 0; I <bin.length; I ++) {
Buffer [I] = bin.charCodeAt (I);
}
// Create a Blob object using Uint8Array
var = new new Blob BLOB ([buffer.buffer], {type: type});
var = window.URL.createObjectURL URL (BLOB);
$ ( "# ceshi") attr ( "the src", URL);.
};
// base64 of files, in order to know the size of the original image
reader.onload = function (E) {
img.src = e.target.result;
};
eleFile.addEventListener ( 'Change', function (Event) {
File = event.target .files [0];
// the selected file is picture
IF (file.type.indexOf ( "image") == 0) {
reader.readAsDataURL (file);
}
});
}
</ Script>
</ head>
<body>
<IMG ID = "ceshi">
<IMG ID = "ceshi1">
<INPUT name = "File" type = "File" ID = "jjfxSoft_iconPath">
</body>
</html>