canvas改变图片原始尺寸

原理：确定canvas画布大小，将图片画到画布上，然后导出图片，就这么简单

画布大小，需要得到原始图片宽高比例，然后选择画布的宽计算出高

代码：

<div class="imagehandler_setting">
  <span class="imagehandler_chooseFile">选择文件</span>
  
  <input id="upload-input" type="file" accept="image/*" style="display: none;">
  <div class="setting_size" style="display:none;">
    <span class="imagehandler_download">下载</span>
    <div class="setting_size_choose">
      选择尺寸：
      <select name="" id="">
        <option value="0">原大小</option>
        <option value="16">16*16</option>
        <option value="32">32*32</option>
        <option value="64">64*64</option>
        <option value="80">80*80</option>
        <option value="100">100*100</option>
        <option value="120">120*120</option>
        <option value="128">128*128</option>
        <option value="256">256*256</option>
        <option value="512">512*512</option>
      </select>
    </div>
    <div class="custom_size">
      <div class="custom_size_inp">
        自定义宽：
        <input type="text" class="custom_width">
        自定义高：
        <input type="text" class="custom_height">
      </div>
      <p class="sizeTips" style="display: none;">建议高：<span>500</span></p>
    </div>
    <div class="imagehandler_btn">开始处理</div>
  </div>
</div>
<img src="" alt="" id="hideImg" style="display: none;">
<div class="img_result" style="display: none;">
    <img src="" alt="">
</div>

处理：

var s_handlerWidth;    //图片原始宽
var s_handlerHeight;   //图片原始高
var handlerWidth;    //图片宽
var handlerHeight;   //图片高
var scale;           //宽高比例
var imgFile;
var downloadBase;
var fileName;

//图片选择
$("#upload-input").change(function(e){
   imgFile = e.target.files[0];
   var reader = new FileReader();
   fileName = imgFile.name;
   var img = document.createElement('img');
   reader.onload = function (e) {
     img.src = e.target.result;
     img.onload = function () {
       $(".setting_size").show();
       handlerWidth = this.width;
       handlerHeight = this.height;
       s_handlerWidth = this.width;
       s_handlerHeight = this.height;
       scale = (handlerWidth / handlerHeight).toFixed(2);//原图宽高比例
       handerImg(imgFile,handlerWidth,handlerHeight)
     }
   }
   reader.readAsDataURL(imgFile);
 })
 //自定义宽输入
 $(".custom_width").bind("input propertychange",function(e){
   var custom_width = $(this).val();
   $(".sizeTips").show();
   if(custom_width.length==0){
     $(".sizeTips").hide();
   }
   $(".sizeTips span").text((custom_width/scale).toFixed(0))
   handlerWidth = custom_width;
 })
 //处理自定义宽高
 $(".imagehandler_btn").click(function(){
   var _w = $(".custom_width").val();
   var _h = $(".custom_height").val();
   if(_w>0&&_h>0){
     handerImg(imgFile,_w,_h)
   }
 })
 //选择默认尺寸
 $(".setting_size_choose select").change(function(){
   var imgWidthsize = $(this).find("option:selected").val();
   var imgHeightsize = (imgWidthsize/scale).toFixed(0)
   if(imgWidthsize == 0){
     imgWidthsize = s_handlerWidth;
     imgHeightsize = s_handlerHeight;
   }
   handerImg(imgFile,imgWidthsize,imgHeightsize)
 })
 $(".imagehandler_download").click(function(){
   downLoad(downloadBase,fileName)
 })

 // 拖拽文件
 var dp = document.querySelector( '#dropZone' );
 document.addEventListener('drop', function (e) {
     e.preventDefault()
 }, false)
 document.addEventListener('dragover', function (e) {
     e.preventDefault()
 }, false)
 if(dp==null){
     return;
 }
 dp.addEventListener('dragover', function(e) {
     e.stopPropagation();
     e.preventDefault();
     e.dataTransfer.dropEffect = '导入';
 });
 dp.addEventListener("drop", function(e) {
     e.stopPropagation();
     e.preventDefault();
     var file = e.dataTransfer.files;
     imgFile = file[0];
     var _fileName = file[0].name;
     fileName = _fileName;
     var fileType = _fileName.substring(_fileName.lastIndexOf(".") + 1).toLowerCase();
     var fileFlag;
     if(file.length>1){
         alert("文件只能单个上传")
     }else{
         if(fileType!=="png"&&fileType!=="jpg"&&fileType!=="webp"&&fileType!=="gif"&&fileType!=="jpeg"&&fileType!=="bmp"){
           alert("请上传图片格式")
         }else{
           var reader = new FileReader();
           var img = document.createElement('img');
           reader.onload = function (e) {
             img.src = e.target.result;
             img.onload = function () {
               $(".setting_size").show();
               handlerWidth = this.width;
               handlerHeight = this.height;
               s_handlerWidth = this.width;
               s_handlerHeight = this.height;
               scale = (handlerWidth / handlerHeight).toFixed(2);//原图宽高比例
               handerImg(imgFile,handlerWidth,handlerHeight)
             }
           }
           reader.readAsDataURL(imgFile);
         }
     }
 });

关键方法：

//画图
function handerImg(file,width,height){
   var reader = new FileReader();
   var img = document.createElement('img');
   reader.onload = function (e) {
     img.src = e.target.result;
     img.onload = function () {
       var canvas = document.createElement('canvas');
       var context = canvas.getContext('2d');
       canvas.width = width;//canvas的宽=图片的宽
       canvas.height = height;//canvas的高=图片的高

       context.clearRect(0, 0, width, height)//清理canvas
       context.drawImage(img, 0, 0, width, height)//canvas绘图
       var newUrl = canvas.toDataURL('image', 1);//canvas导出成为base64
       downloadBase = newUrl;
       $(".img_result img").attr("src",newUrl)
       $(".img_result").show();
     }
   }
   reader.readAsDataURL(file);
 }
//下载
 function dataURIToBlob(dataURI) {
   var binStr = atob(dataURI.split(',')[1]),
     len = binStr.length,
     arr = new Uint8Array(len);

   for (var i = 0; i < len; i++) {
     arr[i] = binStr.charCodeAt(i);
   }
   return new Blob([arr])
 }
 
 function downLoad(base,name){
   const bloburl = dataURIToBlob(base)
   var downloadElement = document.createElement("a");
   downloadElement.href =  URL.createObjectURL(bloburl);
   downloadElement.download = name; //下载后文件名
   document.body.appendChild(downloadElement);
   downloadElement.click(); //点击下载
   document.body.removeChild(downloadElement); //下载完成移除元素
   window.URL.revokeObjectURL(downloadElement.href); //释放掉blob对象
 }

看懂画图函数就可以了。