微信小程序如何将图片画到canvas中

发布时间：2020-12-14 19:20:15 所属栏目：资源来源：网络整理

导读：微信小程序开发第二弹:canvas是新的h5标签，相信在前端技术中大家使用的已经非常多了，但是在微信小程序开发中，应该如何将图片置入canvas中呢?这篇经验来和大家分享一下! 工具/原料微信web开发者工具方法/步骤1: 先是照样先写好一个html文件，不过由于是

微信小程序开发第二弹:canvas是新的h5标签，相信在前端技术中大家使用的已经非常多了，但是在微信小程序开发中，应该如何将图片置入canvas中呢?这篇经验来和大家分享一下!

工具/原料

微信web开发者工具

方法/步骤1:

先是照样先写好一个html文件，不过由于是微信小程序，所以要按照wxml的标准来写。头尾文件都不需要，直接修改index.wxml,

方法/步骤2:

寻找一张准备置入的图片，保存在网络环境中。可以转换成base64，也可以保存在自己的服务器端。本地调试的时候需要使用。我就拿这个小黄人来举例吧。

方法/步骤3:

在canvas内进行图像绘制，要先定义一个函数。

方法/步骤4:

我们先建立一个动作，将图片置入进去。引用函数context.drawImage()函数即可，但是要调整图片大小;

方法/步骤5:

但是不能使用draw(true)来进行铺满，所以尺寸必须自己来指定，或者使用js来读取device的height和width。使图片达到预想的效果。

方法/步骤6:

微信小程序的WXML和HTML格式有点差别，不能直接调用函数，所以必须使用匿名函数的形式，或者直接绑定事件。

方法/步骤7:

最后是进行不同机型的调试，在微信开发工具左上方可以调整，主要是看不同尺寸显示问题，如果有必要还要进行wifi，4G，2G测试

注意事项

使用context.drawImage();的时候，还需要限制起始位置与图片大小

这里仅仅提供思路，如果是制作页面，还需要使用wx.downloadFile

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!