1、需要画入canvas的 图片都需要先缓存到本地

  

let ps = []
ps.push(that.loadImageFun(this.statusInfo.avatar_url, "headImg"))
Promise.all(ps).then(res => {
// 画图
}) loadImageFun(url, index) {
let _this = this
return new Promise((resolve, reject) => {
wx.downloadFile({
url,
success(res) {
if (res.statusCode === 200) {
_this.loadedImgs[index] = res.tempFilePath
resolve()
}
else
reject()
},
fail() {
reject()
}
})
})
},

2、从canvas中导出图片时,android手机生成不了图片。(原因是,draw的回调函数在android上是假回调,ios上貌似是真的555,因为canvas还没准备好,所以得手动加延时了...)

//绘制图片
ctx.draw(false, () => {
setTimeout(()=>{
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: size,
height: imgHeight,
destWidth: size,
destHeight: imgHeight,
canvasId: 'shcanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.share_img = tempFilePath;
// wx.previewImage({
// urls: [that.share_img],
// })
}
})
},1000)
})

wx小程序用canvas生成图片流程与注意事项的更多相关文章

  1. 关于微信小程序使用canvas生成图片,内容图片跨域的问题

    最近有个项目是保存为名片(图片),让用户发送给朋友或朋友圈,找了很多方案都不适用,绞尽脑汁之后还是选了使用canvas,但是用这玩意儿生成图片最大的缺点就是,如果你的内容中有图片,并且这个图片是通过外 ...

  2. 微信小程序使用canvas绘制图片的注意事项

    1.单位换算问题,canvas的尺寸单位是px,所以单位需要做个换算,可以通过wx.getSystemInfo获取屏幕宽高(单位是px),微信小程序无论什么机型,屏幕宽度都是750rpx,因此可以做个 ...

  3. 小程序下载canvas生成图片

    save_share_img:function(img){ var that = this; let { result } = that.data; getData.getData( "sa ...

  4. 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  5. 微信小程序开发的基本流程

    微信小程序开发的基本流程 一,微信小程序简介 1,微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日. 2,微信小程序这个词可以分解为“微信”和“小程序 ...

  6. 微信小程序-基于canvas画画涂鸦

    代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  7. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  8. wx小程序获取用户位置信息

    wx小程序内置的接口只能获取用户的坐标,通过微信位置服务获取用户地址: http://lbs.qq.com/qqmap_wx_jssdk/index.html 注:需要在key的设置中打开webSer ...

  9. 微信小程序 在canvas画布上划动,页面禁止滑动

    要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...

随机推荐

  1. 4月18 数据库的CRUD操作

    php主要是实现B/S Brower Server;此外还有C/S:Client Server暂时不考虑: LAMP: Linux系统 A阿帕奇服务器 Mysql数据库 Php语言,而现在学的是在wi ...

  2. 四则运算Java语言实验设计过程1

    题目要求: 像二柱子那样,花二十分钟写一个能自动生成三十道小学四则运算题目的 “软件”.要求:除了整数以外,还要支持真分数的四则运算(需要验证结果的正确性).题目避免重复.可定制出题的数量. 设计思路 ...

  3. 安天透过北美DDoS事件解读IoT设备安全——Mirai的主要感染对象是linux物联网设备,包括:路由器、网络摄像头、DVR设备,入侵主要通过telnet端口进行流行密码档暴力破解,或默认密码登陆,下载DDoS功能的bot,运行控制物联网设备

    安天透过北美DDoS事件解读IoT设备安全 安天安全研究与应急处理中心(安天CERT)在北京时间10月22日下午启动高等级分析流程,针对美国东海岸DNS服务商Dyn遭遇DDoS攻击事件进行了跟进分析. ...

  4. java多线程读一个变量需要加锁吗?

    如果只是读操作,没有写操作,则可以不用加锁,此种情形下,建议变量加上final关键字: 如果有写操作,但是变量的写操作跟当前的值无关联,且与其他的变量也无关联,则可考虑变量加上volatile关键字, ...

  5. linux下crontab的原理和用法

    linux 系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的.另 外, 由于使用者自己也可以设置计划任务,所以, ...

  6. Ubuntu16.10下mysql5.7的安装及远程访问配置

    如何安装mysql 1.sudo apt-get update,如果很慢或者失败,需要在软件和更新中选择最佳服务器,勾选所有互联网下载选项及去掉其他软件所有勾选项 2.sudo apt-get upg ...

  7. POJ 1088 滑雪(记忆化搜索+dp)

    POJ 1088 滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 107319   Accepted: 40893 De ...

  8. Win10系列:UWP界面布局基础7

    2.附加属性 有一些XAML元素,其自身的属性大多是在其它的元素中声明和使用的,该元素本身却很少使用,这些在其他元素中声明和使用的属性被称为附加属性(Attached Properties).附加属性 ...

  9. Java 方法重载 方法重写

    方法重载规则 参数个数不同 参数个数相同,但参数列表中对应的某个参数的类型不一样 方法的返回类型和参数名称不参与重载 "编译期绑定",,因为未产生对象,只看参数.引用类型绑定方法 ...

  10. go语言byte类型报错cannot use "c" (type string) as type byte in assignment

    练习Go修改字符串的时候遇到这个问题:cannot use "c" (type string) as type byte in assignment,代码如下: package m ...