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. poj 1080 基因组(LCS)

    Human Gene Functions Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19376   Accepted:  ...

  2. loj 10001 种树

    *********贪心,把需要的路段终止点排序,然后在每个区间内判断是否已经满足条件,不满足的从区间右端向左端种树. #include<cstdio> #include<algori ...

  3. 思科恶意加密TLS流检测论文记录——由于样本不均衡,其实做得并不好,神马99.9的准确率都是浮云啊,之所以思科使用DNS和http一个重要假设是DGA和HTTP C&C(正常http会有图片等)。一开始思科使用的逻辑回归,后面17年文章是随机森林。

    论文记录:Identifying Encrypted Malware Traffic with Contextual Flow Data from:https://songcoming.github. ...

  4. 反向代理/负载均衡/session/cookie

    正向代理:客户端将流量重定向到burpsuite等软件或连接到VPN再访问服务器而不是直接访问服务器的场景.流量流动方向是真正机器--代理服务器.正向代理又称代理.普通代理. 反向代理:服务器端使用反 ...

  5. chrome google mozilla firefox bookmarks import export

    chrome导出导入bookmarks 1◆ google帐号 自己申请,脑补   2◆ google访问 脑补   suggestion   Lantern   3◆ 步骤 4◆ 导入 sample ...

  6. IntelliJ Idea 快捷键列表

    最重要:1Ctrl+Alt+Shift+T:查找类2重构3提取父类 Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift ...

  7. spark使用正则表达式读入多个文件

    String dir = "s3a://example/";String currentDir = dir + "{1[5-9],2[01]}/*.txt";J ...

  8. shell 整数条件判断

    两个整数的比较 '整数1 -eq 整数2' 判断整数1是否和整数2相等(相等为真) '整数1 -ne 整数2' 判断整数1是否和整数2不相等(不相等位置) '整数1 -gt 整数2' 判断整数1是否大 ...

  9. linux 定时任务 日志记录

    1  不记录日志 > /dev/null 2>&1 2 日志记录追加到指定文件 >> /path/mylog.log 2>&1

  10. VS Code 常用快捷键

    VS Code 常用快捷键 1.注释: 单行注释:ctrl+/, 注释后再按取消 取消单行注释:alt+shift+A 注释后再按取消 2.移动行 向上移动一行:alt+up 向下移动一行:alt+d ...