核心：通过给定的宽度等比例计算出新的高度——>然后通过给定的长宽得在画布上得到新的图片
oldWith=image.width;
oldHeight=image.height;
newHeight=Math.floor(oldHeight/oldWidth*newWidth)
过程：
export constdownscaleImage= (dataUrl, newWidth, callback, imageType, imageArguments) => {
let image, oldWidth, oldHeight, newHeight, canvas, ctx, newDataUrl;
// Provide default values
imageType = imageType ||"image/jpeg";
imageArguments = imageArguments ||0.7;
// Create a temporary image so that we can compute the height of the downscaled image.
image =newImage();
image.src = dataUrl;
image.addEventListener("load", function () {
oldWidth = image.width;
oldHeight = image.height;
console.log('old width: %o, old height: %o', oldWidth, oldHeight)
newHeight = Math.floor(oldHeight / oldWidth * newWidth)
// Create a temporary canvas to draw the downscaled image on.
canvas = document.createElement("canvas");
canvas.width = newWidth;
canvas.height = newHeight;
// Draw the downscaled image on the canvas and return the new data URL.
ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, newWidth, newHeight);
newDataUrl = canvas.toDataURL(imageType, imageArguments);
returncallback(newDataUrl)
// return newDataUrl;
});
}
调用部分：
let fileData = files.map(element => {
downscaleImage(element.url, 750, (src) => {
element.url = src
})
return element
})