wx小程序用canvas生成图片流程与注意事项
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生成图片流程与注意事项的更多相关文章
- 关于微信小程序使用canvas生成图片,内容图片跨域的问题
最近有个项目是保存为名片(图片),让用户发送给朋友或朋友圈,找了很多方案都不适用,绞尽脑汁之后还是选了使用canvas,但是用这玩意儿生成图片最大的缺点就是,如果你的内容中有图片,并且这个图片是通过外 ...
- 微信小程序使用canvas绘制图片的注意事项
1.单位换算问题,canvas的尺寸单位是px,所以单位需要做个换算,可以通过wx.getSystemInfo获取屏幕宽高(单位是px),微信小程序无论什么机型,屏幕宽度都是750rpx,因此可以做个 ...
- 小程序下载canvas生成图片
save_share_img:function(img){ var that = this; let { result } = that.data; getData.getData( "sa ...
- 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
- 微信小程序开发的基本流程
微信小程序开发的基本流程 一,微信小程序简介 1,微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日. 2,微信小程序这个词可以分解为“微信”和“小程序 ...
- 微信小程序-基于canvas画画涂鸦
代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
- wx小程序获取用户位置信息
wx小程序内置的接口只能获取用户的坐标,通过微信位置服务获取用户地址: http://lbs.qq.com/qqmap_wx_jssdk/index.html 注:需要在key的设置中打开webSer ...
- 微信小程序 在canvas画布上划动,页面禁止滑动
要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...
随机推荐
- poj 1080 基因组(LCS)
Human Gene Functions Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 19376 Accepted: ...
- loj 10001 种树
*********贪心,把需要的路段终止点排序,然后在每个区间内判断是否已经满足条件,不满足的从区间右端向左端种树. #include<cstdio> #include<algori ...
- 思科恶意加密TLS流检测论文记录——由于样本不均衡,其实做得并不好,神马99.9的准确率都是浮云啊,之所以思科使用DNS和http一个重要假设是DGA和HTTP C&C(正常http会有图片等)。一开始思科使用的逻辑回归,后面17年文章是随机森林。
论文记录:Identifying Encrypted Malware Traffic with Contextual Flow Data from:https://songcoming.github. ...
- 反向代理/负载均衡/session/cookie
正向代理:客户端将流量重定向到burpsuite等软件或连接到VPN再访问服务器而不是直接访问服务器的场景.流量流动方向是真正机器--代理服务器.正向代理又称代理.普通代理. 反向代理:服务器端使用反 ...
- chrome google mozilla firefox bookmarks import export
chrome导出导入bookmarks 1◆ google帐号 自己申请,脑补 2◆ google访问 脑补 suggestion Lantern 3◆ 步骤 4◆ 导入 sample ...
- IntelliJ Idea 快捷键列表
最重要:1Ctrl+Alt+Shift+T:查找类2重构3提取父类 Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift ...
- spark使用正则表达式读入多个文件
String dir = "s3a://example/";String currentDir = dir + "{1[5-9],2[01]}/*.txt";J ...
- shell 整数条件判断
两个整数的比较 '整数1 -eq 整数2' 判断整数1是否和整数2相等(相等为真) '整数1 -ne 整数2' 判断整数1是否和整数2不相等(不相等位置) '整数1 -gt 整数2' 判断整数1是否大 ...
- linux 定时任务 日志记录
1 不记录日志 > /dev/null 2>&1 2 日志记录追加到指定文件 >> /path/mylog.log 2>&1
- VS Code 常用快捷键
VS Code 常用快捷键 1.注释: 单行注释:ctrl+/, 注释后再按取消 取消单行注释:alt+shift+A 注释后再按取消 2.移动行 向上移动一行:alt+up 向下移动一行:alt+d ...