看如下效果图,第一张是原图,点击Convert按钮后,第二张图显示压缩后的图,可以看到第一张的图的宽度是1600,压缩后图片的宽度是800
废话少说,直接上代码。
<textarea id="a">
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QB0RXhpZgAATU0AKgAAAAgABAEaAAUAAA//2wBDAQICAgQEBAcEBAcQCwkLEBAQEAUUUUAf//Z
</textarea>
<img id="imga" width="200" height="200" />
<HR>
<button type="button" onclick="convert()">convert</button>
<textarea id="b">
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAkACQAAD/4QB0RX+tD0jMjqn0q5VR/v1mdBFRRRQAUUUUAf//Z
</textarea>
<img id="imgb" width="200" height="200" />
<HR>
<script>
imga.src = a.innerHTML;
imgb.src = b.innerHTML;
function convert() {
compress(a.innerHTML, 800, 0.5).then(function (val) {
imgb.src = val;
});
}
function compress(base64String, w, quality) {
var getMimeType = function (urlData) {
var arr = urlData.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
// return mime.replace("image/", "");
return mime;
};
var newImage = new Image();
var imgWidth, imgHeight;
var promise = new Promise(resolve => newImage.onload = resolve);
newImage.src = base64String;
return promise.then(() => {
imgWidth = newImage.width;
imgHeight = newImage.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = w * imgHeight / imgWidth;
} else {
canvas.height = w;
canvas.width = w * imgWidth / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL(getMimeType(base64String), quality);
console.log(base64);
return base64;
});
}
</script>