- 小程序初始页面(首页)放video组件上体验版或开发版后通过小程序助手打开有一定概率造成视频卡死
如题,将小程序初始页面(首页)放video组件上体验版或开发版后通过小程序助手打开有一定概率造成视频卡死(非冷启动状态),冷启动时是好的,不清楚是啥原因,并且正常的线上打开也有一定概率复现。
2022-11-18 - 小程序生成海报函数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就是使用[代码]canvas[代码]的[代码]drawImage()[代码]方法。 [代码]canvas[代码]的[代码]drawImage()[代码]方法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() } }) 把一张大的图片,直接画在一张小小的画布上。
2020-05-29