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

  

  1. let ps = []
  2. ps.push(that.loadImageFun(this.statusInfo.avatar_url, "headImg"))
  3. Promise.all(ps).then(res => {
  4. // 画图
  5. })
  6.  
  7. loadImageFun(url, index) {
  8. let _this = this
  9. return new Promise((resolve, reject) => {
  10. wx.downloadFile({
  11. url,
  12. success(res) {
  13. if (res.statusCode === 200) {
  14. _this.loadedImgs[index] = res.tempFilePath
  15. resolve()
  16. }
  17. else
  18. reject()
  19. },
  20. fail() {
  21. reject()
  22. }
  23. })
  24. })
  25. },

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

  1. //绘制图片
  2. ctx.draw(false, () => {
  3. setTimeout(()=>{
  4. wx.canvasToTempFilePath({
  5. x: 0,
  6. y: 0,
  7. width: size,
  8. height: imgHeight,
  9. destWidth: size,
  10. destHeight: imgHeight,
  11. canvasId: 'shcanvas',
  12. success: function (res) {
  13. var tempFilePath = res.tempFilePath;
  14. that.share_img = tempFilePath;
  15. // wx.previewImage({
  16. // urls: [that.share_img],
  17. // })
  18. }
  19. })
  20. },1000)
  21. })

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. 【微信公众号开发】【10】JSJDK相关

    前言: 1,优点:官方提供的,会调用后还算使用方便,不用费劲了解各个原生组件 缺点:使用上有限制(如:上传文件有大小限制),很容易踩坑,部分安卓手机及电脑端不支持pjax 总结:上手容易,坑很多 2, ...

  2. spring cloud服务发现注解之@EnableDiscoveryClient与@EnableEurekaClient区别

    在使用服务发现的时候有两种注解, 一种为@EnableDiscoveryClient, 一种为@EnableEurekaClient, 用法上基本一致,下文是从stackoverflow上面找到的对这 ...

  3. Spring注解之@Transactional对于事务异常的处理

    spring对于事务异常的处理 unchecked   运行期Exception   spring默认会进行事务回滚       比如:RuntimeException checked       用 ...

  4. 2015-09-16 html课程总结1

    HTML (HyperText Makeup Language)是超文本标记语言. 1.HTML结构 <html> <head> <title>标题</tit ...

  5. 整合elk(2)(十三)

    配置.启动kibana 到kibana的安装目录: 1 ./bin/kibana 默认配置即可. 访问localhost:5601,网页显示: 证明启动成功. 创建springboot工程 起步依赖如 ...

  6. Win10系列:VC++ 定时器

    计时器机制俗称"心跳",表示以特定的频率持续触发特定事件和执行特定程序的机制.在开发Windows应用商店应用的过程中,可以使用定义在Windows::UI::Xaml命名空间中的 ...

  7. Win10系列:JavaScript动画3

    "交叉进出"动画也是Windows动画库中的动画效果."交叉进出"动画的动画效果是在应用程序界面上隐藏一个元素并同时在相同位置显示另一个元素的时候,被隐藏的元素 ...

  8. img2html实现将图片转换成网页

    简单介绍img2html的用法,安装就不用说了pip.这个包现只支持python2,支持python的话需改下源码这几个部分: 加注释的是修改的地方 #!/usr/bin/env python # e ...

  9. SignalR 前期简单配置

    一.随便你在哪个命名空间下新建一个Startup类,并在在该类中注册SignalR. using Owin; using System; using System.Collections.Generi ...

  10. Cracking The Coding Interview 1.1

    //原文: // // Implement an algorithm to determine if a string has all unique characters. What if you c ...