js使用canvas實(shí)現(xiàn)生成圖片縮略圖

function resizeImage(src,callback,w,h){
  var canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    im = new Image();
    w = w || 0,
    h = h || 0;
  im.onload = function(){
    //為傳入縮放尺寸用原尺寸
    !w && (w = this.width);
    !h && (h = this.height);
    //以長(zhǎng)寬最大值作為最終生成圖片的依據(jù)
    if(w !== this.width || h !== this.height){
      var ratio;
      if(w>h){
        ratio = this.width / w;
        h = this.height / ratio;
      }else if(w===h){
        if(this.width>this.height){
          ratio = this.width / w;
          h = this.height / ratio;
        }else{
          ratio = this.height / h;
          w = this.width / ratio;
        }
      }else{
        ratio = this.height / h;
        w = this.width / ratio;
      }
    }
    //以傳入的長(zhǎng)寬作為最終生成圖片的尺寸
    if(w>h){
      var offset = (w - h) / 2;
      canvas.width = canvas.height = w;
      ctx.drawImage(im,0,offset,w,h);
    }else if(w<h){
      var offset = (h - w) / 2;
      canvas.width = canvas.height = h;
      ctx.drawImage(im,offset,0,w,h);
    }else{
      canvas.width = canvas.height = h;
      ctx.drawImage(im,0,0,w,h);
    }
    callback(canvas.toDataURL("image/png"));
  }
  im.src = src;
}