微信小程序CanvasContext.drawImage的用法

最近做了一个生成海报的项目，有个需求需要画出图片。

我个人的想法是生成的图片像image的mode模式中的aspectFill显示的图片那样，“缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。”

也就是说保证图片的短边显示出来，超过的部分会被截取掉，图片不会变形

翻看了小程序文档的CanvasContext.drawImage。然后整理了一下以下的代码，此代码只为了说明CanvasContext.drawImage

wxml：

<canvas style="width:300px;height:300px" canvas-id="actReview"></canvas>

 

js中的生成图片的代码如下：

let ctx = wx.createCanvasContext('actReview')
let img = {
  url:'/static/images/img-actImage.png'
}

// 取得图片的宽高
wx.getImageInfo({
  src:img.url,
  success (res) {
    // 绘制白色背景
    ctx.setFillStyle('#fff')
    ctx.fillRect(0, 0, 300, 300)
    
    let imgX = 50 //图片在画布上的x轴座标
    let imgY = 50 //图片在画布上的y轴座标
    let imgW = 200 //图片在画布上的宽度
    let imgH = 200 //图片在画布上的高度

    let visibleW = res.width//截取的图片的宽度
    let visibleH = res.height//截取的图片的高度
    let visibleX = null // 所截取的图片的x轴座标
    let visibleY = null // 所截取的图片的y轴座标
    let imgBili = imgW / imgH
    let visibleBili = visibleW / visibleH
    if(imgBili < visibleBili){
      let newW = (imgH / visibleH) * visibleW
      const bili = newW / visibleW
      visibleX = Math.abs(imgW - newW) / 2 / bili
      visibleY = 0
      visibleW = imgW * visibleH / imgH
    }else {
      visibleX = 0
      let newH = (imgW * visibleH) / visibleW
      const bili = newH / visibleH
      visibleY = Math.abs(imgH - newH) /2 / bili
      visibleH = visibleW * imgH / imgW
    }
    /**
     * ctx.drawImage(
     *  图片的url, 
     *  所截取的图片的X轴座标, 
     *  所截取的图片的Y轴座标, 
     *  所截取的图片的宽度, 
     *  所截取的图片的高度,
     *  图片在画布的X轴座标,
     *  图片在画布的Y轴座标, 
     *  图片在画布的宽度, 
     *  图片在画布的高度)
     */
    ctx.drawImage(img.url, visibleX, visibleY, visibleW, visibleH,imgX, imgY, imgW, imgH)

    ctx.draw()
  },
  fail (e) {
    console.log(e)
  }
})

生成的效果图（红色框框部分）：

图片原图：