在釘釘小程序中實現寬高不定的圖片裁剪後等比例縮放中心對齊顯示在固定寬高的canvas容器中並生成臨時url路徑的實例

最新更新時間：2020年07月07日15:59:41

《猛戳-查看我的博客地圖-總有你意想不到的驚喜》

本文內容：在做業務的過程中，遇到圖片需要中心對齊自適應顯示在固定寬高的容器中，同時對圖片裁剪後生成臨時url路徑上傳到服務器，本文記錄詳細的過程，以及實現方案。

圖片中心對齊顯示在固定寬高的容器中

• 需求：圖片橫向或縱向至少有一個方向顯示全部內容
  

注意：容器爲固定寬高，圖一寬高比小於1，圖二寬高比大於1

• 如圖一，圖片的寬高比小於1，此時需要將圖片的橫向全部內容顯示。如果圖片的寬度大於等於容器的寬度，需要以容器的固定寬度爲基準值對圖片的縱向等比例縮小；如果圖片的寬度小於容器的寬度，需要以容器的固定寬度爲基準值對圖片的縱向等比例放大；
• 如圖二，圖片的寬高比大於等於1，此時需要將圖片的縱向全部內容顯示。如果圖片的高度大於等於容器的高度，需要以容器的固定高度爲基準值對圖片的橫向等比例縮小；如果圖片的高度小於容器的高度，需要以容器的固定高度爲基準值對圖片的橫向等比例放大；

將網絡圖片加載到本地

• 獲取圖片原始寬高

let url = "https://www.wanshaobo.com/static/1.png";
var img = new Image();
img.src = url;
img.onload = function(){
	//圖片原始寬高
	let w = img.width;
	let h = img.height;
}

對圖片進行裁剪

• drawImage(image, x1, y1,w1, h1, x2, y2, w2, h2) 截取圖片固定區域繪製在canvas上

//DOM 佈局
<canvas id="canvas" width="590" height="328" style="width:295px;height:164px;background:#00ffff"/>

let url = "https://www.wanshaobo.com/static/1.png";
const ctx = dd.createCanvasContext('canvas');
//圖片原始寬高
let w;
let h;
//圖片裁剪的起始座標
let startX = 0;
let startY = 0;
//圖片裁剪後的寬高
let clipW = 0;
let clipH = 0;
//canvas容器的寬高
let canvasW = 295;
let canvasH = 164;
//canvas容器的寬高比
let canvasRatio = canvasW / canvasH;
//drawImage(image, x1, y1,w1, h1, x2, y2, w2, h2) 參數介紹
//(x1, y1)和(w1, h1)是裁剪圖片的起始座標和寬高
//(x2, y2)和(w2, h2)是圖片在畫布上繪製的起始座標和畫布爲圖片開闢的可用寬高
ctx.drawImage(url, startX, startY, clipW, clipH, 0, 0, canvasW*2, canvasH*2);

將canvas容器內容轉化爲圖片臨時url路徑

ctx.toTempFilePath({
	success(res) {
		console.log(res.filePath);// http://resource/******.image
	}
});

將圖片臨時url路徑上傳到服務器

let url = "http://resource/******.image";
dd.uploadFile({
	url:'請使用自己服務器地址',
	fileType: 'image',
	fileName: 'file',
	filePath: url,
	success: (res) => {}
});

完整工程實例

注意：canvas 尺寸，移動端使用二倍尺寸，PC端使用單倍尺寸

• DOM

<canvas id="canvas" width="590" height="328" style="width:295px;height:164px;background:#00ffff"/>

• CSS

#canvas{
	position: absolute;
	top: -999rpx;
}

• JS

/**
 * 採用canvas異步裁剪圖片
 * @param url
 * @return promise實例 then方法會拿到裁剪後的圖片url
 */
function ayncClipImage(url) {
  return new Promise((resolve,reject)=>{
    const ctx = dd.createCanvasContext('canvas');
    var img = new Image();
    img.src = url;
    img.onload = function(e) {
      //圖片原始寬高
      let w = img.width;
      let h = img.height;
      //圖片裁剪的起始座標
      let startX = 0;
      let startY = 0;
      //圖片裁剪後的寬高
      let clipW = 0;
      let clipH = 0;
      //canvas容器的寬高
      let canvasW = 295;
      let canvasH = 164;
      //canvas容器的寬高比
      let canvasRatio = canvasW / canvasH;
      //圖片寬度大於等於高度
      if(w >= h){
        clipW = canvasRatio * h;
        clipH = h;
        startX = (w - clipW) / 2;
        startY = 0;
      }else{
        clipW = w;
        clipH = w / canvasRatio;
        startX = 0;
        startY = (h - clipH) / 2;
      }
      //drawImage(image, x1, y1, w1, h1, x2, y2, w2, h2) 參數介紹
      //(x1, y1)和(w1, h1)是裁剪圖片的起始座標和寬高
      //(x2, y2)和(w2, h2)是圖片在畫布上繪製的起始座標和畫布爲圖片開闢的可用寬高
      ctx.drawImage(url, startX, startY, clipW, clipH, 0, 0, canvasW*2, canvasH*2)
      // setTimeout(()=>{ctx.draw();},500);
      ctx.toTempFilePath({
        success(res) {
          resolve(res.filePath)
        },
      });
    }
  });
}

//使用
let url = "https://www.wanshaobo.com/static/1.png";
ayncClipImage(url).then((res)=>{
	console.log(res);// http://resource/******.image
});

參考資料

• 釘釘開發文檔-畫布
• 釘釘開發文檔-createCanvasContext

感謝閱讀，歡迎評論^-^

打賞我吧^-^