图片等比例缩放问题

核心：通过给定的宽度等比例计算出新的高度——>然后通过给定的长宽得在画布上得到新的图片

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

    })