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. 第一阶段——站立会议总结DAY01

    1.昨天做了什么:无 2.今天准备做什么:准备开始做个人中心界面,首先是创建页面 3.遇到的困难:“无从下手”,怕写完某个界面之后就会找不到相关的名字接口什么的.

  2. 【其他】【服务器】【4】删除Windows系统中不想要的服务

    步骤: 1,开始菜单栏查找“服务”,打开后找到想要删除的服务 2,右键单击想要删除的服务,选择“属性”-“常规”-“服务名称”,记下服务名称(AA) 3,开始菜单栏输入“cmd”打开命令行窗口,输入s ...

  3. 大数据分析引擎Apache Flink

    Apache Flink是一个高效.分布式.基于Java实现的通用大数据分析引擎,它具有分布式 MapReduce一类平台的高效性.灵活性和扩展性以及并行数据库查询优化方案,它支持批量和基于流的数据分 ...

  4. 基本数据类型int,bool,str

    .基本数据类型(int,bool,str) 基本数据数据类型: int 整数 str 字符串. 一般不存放大量的数据 bool 布尔值. 用来判断. True, False list 列表.用来存放大 ...

  5. 解决SSH Secure Shell 连接Liunx 有乱码情况。

    输入:echo $LANG:查看当前使用系统语言 locale :安装是否是LANG="zh_CN.UTF-8":说明已经安装中文语言 步骤1:用root账户登录linux系统,或 ...

  6. weblogic安装教程(以weblogic 11g为例)

    1.下载jdk和weblogic安装介质 一般的搭配是jdk1.5+weblogic92.jdk1.6+weblogic11g(weblogic10.3.6) jdk历史版本下载链接:http://w ...

  7. Java Web(二) Servlet详解

    什么是Servlet? Servlet是运行在Web服务器中的Java程序.Servlet通常通过HTTP(超文本传输协议)接收和响应来自Web客户端的请求.Java Web应用程序中所有的请求-响应 ...

  8. laravel 的 intervention-image 图像处理笔记(备用)

    原文地址: http://blog.csdn.net/beyond__devil/article/details/62230610

  9. linux网络操作 配置文件

    网络接口配置文件(网卡信息文件) '/etc/sysconfig/network-srcipts/ifcfg-*(eth0)' (注意区分大小写) DEVICE=eth0 网卡编号 HWADDR=08 ...

  10. 4.3 if-else语句使用

    Q:对输入的成绩进行登记划分. #include<iostream> #include<cstdio> using namespace std; int main() { in ...