使用canvas调整图片大小

原创已于 2024-12-27 16:04:16 修改 · 322 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #elementui #vue.js

于 2024-12-27 16:03:25 首次发布

最近在做图片上传，上传前需要做图片大小的统一处理

/**
 * 调整图片大小
 * @param { string } url 图片地址或Base64格式图片
 */
const resize = (url) => {
  return new Promise((resolve, reject) => {
    const imgSize = 100
    const canvas = document.getElementById('canvas') // 记得将界面canvas隐藏
    const ctx = canvas.getContext('2d')
    canvas.width = imgSize
    canvas.height = imgSize
    const image = new Image();
    image.src = url;
    image.onload = function() {
      ctx.drawImage(image, 0, 0, imgSize, imgSize);
      resolve(canvas.toDataURL()) // 将canvas转为base64
    };
  })
}