评论

小程序生成海报函数drawImage

小程序drawImage

本文通过前端压缩图片的场景来熟悉小程序api、drawImage的参数


该文提取自小程序海报生成模块


https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html

有三个版本的写法:

  • drawImage(imageResource, dx, dy)
  • drawImage(imageResource, dx, dy, dWidth, dHeight)
  • drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持


该api传递的参数信息


要想使用该api实现图片的压缩效果,原理其实很简单,核心API就是使用canvasdrawImage()方法。

canvasdrawImage()方法API如下:

ctx.drawImage(img, dx, dy);
ctx.drawImage(img, dx, dy, dWidth, dHeight);
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

后面最复杂的语法虽然看上去有9大参数,但不用慌,实际上可以看出就3个参数:

img

就是图片对象,可以是页面上获取的DOM对象,也可以是虚拟DOM中的图片对象。

dx, dy, dWidth, dHeight

表示在canvas画布上规划处一片区域用来放置图片,dx, dy为canvas元素的左上角坐标,dWidth, dHeight指canvas元素上用在显示图片的区域大小。如果没有指定sx,sy,sWidth,sHeight这4个参数,则图片会被拉伸或缩放在这片区域内。

sx,sy,swidth,sheight

这4个坐标是针对图片元素的,表示图片在canvas画布上显示的大小和位置。sx,sy表示图片上sx,sy这个坐标作为左上角,然后往右下角的swidth,sheight尺寸范围图片作为最终在canvas上显示的图片内容。

drawImage()方法有一个非常怪异的地方,大家一定要注意,那就是5参数和9参数里面参数位置是不一样的,这个和一般的API有所不同。一般API可选参数是放在后面。但是,这里的drawImage()9个参数时候,可选参数sx,sy,swidth,sheight是在前面的。如果不注意这一点,有些表现会让你无法理解。

下图为MDN上原理示意:

对于本文的图片压缩,需要用的是是5个参数语法。举个例子,一张图片(假设图片对象是img)的原始尺寸是4000*3000,现在需要把尺寸限制为400*300大小,很简单,原理如下代码示意:

const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 400, 300)
    ctx.draw()
  }
})

把一张大的图片,直接画在一张小小的画布上。

最后一次编辑于  05-29  
点赞 0
收藏
评论

1 个评论

  • wang li
    wang li
    05-29

    源码呢

    05-29
    赞同
    回复
登录 后发表内容