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. leetcode_输入一个数组,目标树,检查目标是数组下标的哪两个之和,不准重复

    今天是leetcode第一天,但是不太顺利.做这些,想不到 原题目: 我给的答案: class Solution { public: vector<int> twoSum(vector&l ...

  2. 数组的typedef 和函数的typedef

    #include<stdio.h> #include<string.h> #include<stdlib.h> // 数组指针 语法 梳理 // //int a[1 ...

  3. (效率低下)77. Combinations C++回溯法 组合

    https://leetcode.com/problems/combinations/ 沿用78题的思路 class Solution { public: void backTrack(vector& ...

  4. Oracle表空间状态

    1.表空间只读 查看当前表空间状态 SYS@userdata>column file_name format a60 SYS@userdata>column tablespace_name ...

  5. PostgreSQL数据库单机扩展为流复制

    primary:10.189.102.118 standby:10.189.100.195 1. 配置ssh互信机制 在primary主库执行 $ ssh-keygen -t rsa $ cp ~/. ...

  6. RCNN 目标识别基本原理

    RCNN- 将CNN引入目标检测的开山之作 from:https://zhuanlan.zhihu.com/p/23006190 前面一直在写传统机器学习.从本篇开始写一写 深度学习的内容. 可能需要 ...

  7. spring自定义xml标签&自定义注解

    public class YafBeanDefinitionParser implements BeanDefinitionParser { private BeanDefinitionRegistr ...

  8. windows 下的命令操作

    删除文件夹 RD /S D:\aaaaa 删除文件夹下的文件 DEL D:\aaaaa\*.*

  9. Ubuntu 14.04下如何更换更新源(更新为163源)

    之前的安装ubuntu桌面版的之后安装yum,vim等会遇到一些问题, 比如:Ubuntu 14.04下如何更换更新源(更新为163源) 解决: http://jingyan.baidu.com/ar ...

  10. learning ddr input clock frequency change condition