在钉钉小程序中实现宽高不定的图片裁剪后等比例缩放中心对齐显示在固定宽高的canvas容器中并生成临时url路径的实例

落日映苍穹つ 2023-02-23 12:19 7阅读 0赞

###### *最新更新时间：2020年07月07日15:59:41* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：在做业务的过程中，遇到图片需要中心对齐自适应显示在固定宽高的容器中，同时对图片裁剪后生成临时url路径上传到服务器，本文记录详细的过程，以及实现方案。

#### 图片中心对齐显示在固定宽高的容器中 ####

*  需求：图片横向或纵向至少有一个方向显示全部内容  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]

> 注意：容器为固定宽高，图一宽高比小于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

*  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][-createCanvasContext]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][- 1] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200707161855337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA==,size_16,color_FFFFFF,t_70
[-]: https://ding-doc.dingtalk.com/doc#/dev/canvas-component
[-createCanvasContext]: https://ding-doc.dingtalk.com/doc#/dev/ui-canvas
[- 1]: https://blog.csdn.net/wanshaobo888/article/details/86249460