js通過canvas生成圖片縮略圖

更新時(shí)間：2020年10月02日 18:11:55 作者：Dean

對于生成縮略圖一般做法是通過后端語言php等來生成，但是為了給服務(wù)器減壓，我們或許可以從前端來著手，先生成好不同尺寸的縮略圖，傳給后端，而后端只需要將前端傳過來的圖片進(jìn)行存儲就好了

現(xiàn)今大部分的網(wǎng)絡(luò)應(yīng)用在上傳圖片的時(shí)候都會同時(shí)保存幾種尺寸的圖片，專業(yè)術(shù)語也就是生成縮略圖，而對于生成縮略圖一般做法是通過后端語言php等來生成，但是為了給服務(wù)器減壓，我們或許可以從前端來著手，先生成好不同尺寸的縮略圖，傳給后端，而后端只需要將前端傳過來的圖片進(jìn)行存儲就好了。

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

在線實(shí)例地址：http://demo.jb51.net/js/2020/thumbnail/,圖片素材是拿的我們做的一個相框制作應(yīng)用的截圖，有興趣的朋友可以聯(lián)系我哦,大家一起討論，一起玩。

您可能感興趣的文章:

相關(guān)文章

webpack打包js的方法
這篇文章主要介紹了webpack打包js的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
鼠標(biāo)滑過出現(xiàn)預(yù)覽的大圖提示效果
這篇文章主要介紹了如何實(shí)現(xiàn)鼠標(biāo)滑過出現(xiàn)預(yù)覽的大圖提示效果,需要的朋友可以參考下
2014-02-02
JavaScript?setTimeout和setInterval的用法與區(qū)別詳解
Javascript的setTimeOut和setInterval函數(shù)應(yīng)用非常廣泛,它們都用來處理延時(shí)和定時(shí)任務(wù),下面這篇文章主要給大家介紹了關(guān)于JavaScript?setTimeout和setInterval的用法與區(qū)別,需要的朋友可以參考下
2022-04-04
JS簡單數(shù)組排序操作示例【sort方法】
這篇文章主要介紹了JS簡單數(shù)組排序操作,結(jié)合實(shí)例形式分析了javascript使用sort方法進(jìn)行數(shù)組排序的相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
基于JavaScript實(shí)現(xiàn)帶縮略圖的輪播效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)帶縮略圖的輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JS高級調(diào)試技巧：捕獲和分析 JavaScript Error詳解
前端工程師都知道 JavaScript 有基本的異常處理能力。我們可以 throw new Error()，瀏覽器也會在我們調(diào)用 API 出錯時(shí)拋出異常。但估計(jì)絕大多數(shù)前端工程師都沒考慮過收集這些異常信息
2014-03-03
JavaScript的11個小技巧整理
這篇文章介紹了JavaScript的11個小技巧，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
詳解JS中的柯里化(currying)
這篇文章主要介紹了JS中的柯里化(currying),需要的朋友可以參考下
2017-08-08
JS計(jì)算輸出100元錢買100只雞問題的解決方法
這篇文章主要介紹了JS計(jì)算輸出100元錢買100只雞問題的解決方法,簡單描述了100元錢買100只雞問題并結(jié)合實(shí)例形式分析了問題解決的思路與具體實(shí)現(xiàn)方法,需要的朋友可以參考下
2018-01-01
前端echarts加標(biāo)記點(diǎn)及標(biāo)記線和提示框詳細(xì)代碼示例
ECharts中的標(biāo)記線是一條平行于x軸的水平線,有最大值、最小值、平均值等數(shù)據(jù)的標(biāo)記線,它也是在series字段下進(jìn)行配置的,下面這篇文章主要給大家介紹了關(guān)于前端echarts加標(biāo)記點(diǎn)及標(biāo)記線和提示框的相關(guān)資料,需要的朋友可以參考下
2024-06-06