码迷,mamicode.com
首页 > Web开发 > 详细

JS 缩小图片

时间:2021-02-24 13:05:00      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:color   data   image   this   后端   context   class   前端   else   

前端或APP上传图片,图片太大,后端也没必要要原图,

太大的图片,做以下处理。固定大小。

 getBase64Image(imgpath:string) { 
    var img = new Image(); //新建一个图片对象
    img.src = imgpath;

    let canvas = document.createElement("canvas"); 
    
    let w=img.width;
    let h=img.height;

    if(h>w) {
      h=1024;
      w=w*h/img.height;
    }else{
      w=1024;
      h=w*h/img.width;
    }

    canvas.width = w;
    canvas.height = h; 
    const ctx = canvas.getContext("2d"); 


    ctx?.drawImage(img, 0, 0, w, h); 
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); 
    var dataURL = canvas.toDataURL("image/"+ext); 
    this.src=dataURL;
    console.log(dataURL);
    return dataURL; 
} 

 

JS 缩小图片

标签:color   data   image   this   后端   context   class   前端   else   

原文地址:https://www.cnblogs.com/qgbo/p/14437395.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!