function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = 1920;
canvas.height = 1080;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL("image/jpg");
return dataURL.replace(/^data:image\/(jpg);base64,/, "");
}
我正在上传这张图片,但是我想确保如果上传图片的像素小于480p,它会在上传前在画布上绘制一张480p的图片,如果上传图片的像素大于1080p,它会在上传前在画布上绘制一张1080p的图片。
所以基本上我的问题是,有没有办法在画布上设置最小高度、最大高度、最小宽度和最大宽度,或者任何其他可以在上传前更改图像分辨率的替代方案。
您可以执行以下操作,请注意您可能想要改进代码的快速答案:
function getBase64Image(img) {
var canvas = document.createElement("canvas");
let image = document.createElement("img");
image.setAttribute("src", img);
setTimeout(function(){
if(image.height == 1080){
canvas.width = 1920;
canvas.height = 1080;
}
if(image.height == 480){
canvas.width = 640;
canvas.height = 480;
}
},0)
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL("image/jpg");
return dataURL.replace(/^data:image\/(jpg);base64,/, "");
}