91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

js使用canvas實現生成圖片縮略圖

發布時間:2020-10-29 16:16:38 來源:億速云 閱讀:1088 作者:Leah 欄目:開發技術

js使用canvas實現生成圖片縮略圖?相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。

使用Canvas我們可以輕松生成各種尺寸的圖片,具體實現如下:

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);
    //以長寬最大值作為最終生成圖片的依據
    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;
      }
    }
    //以傳入的長寬作為最終生成圖片的尺寸
    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;
}

看完上述內容,你們掌握js使用canvas實現生成圖片縮略圖的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

平顶山市| 射阳县| 广南县| 宜章县| 阿克陶县| 镇江市| 徐汇区| 栾川县| 建阳市| 古田县| 阿坝| 乐业县| 静海县| 开远市| 南通市| 河池市| 闻喜县| 兴宁市| 莱阳市| 咸阳市| 永康市| 香格里拉县| 玉环县| 台南市| 扎鲁特旗| 济源市| 连平县| 吉隆县| 宣化县| 湘潭县| 隆回县| 周口市| 新密市| 江门市| 类乌齐县| 沙雅县| 大新县| 许昌市| 合肥市| 神木县| 阜阳市|