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. Matlab-10:Ritz-Galerkin方法求解二阶常微分方程

    一.代数多项式法: tic; clear clc % N=input('please key in the value of ''N'''); N=10; M=100; h=1/M; X=0:h:1; ...

  2. SpringBoot项目Shiro的实现(二)

    在看此小节前,您可能需要先看:http://www.cnblogs.com/conswin/p/7478557.html 紧接上一篇,在上一篇我们简单实现了一个Springboot的小程序,但我们发现 ...

  3. JS 设置盒子div 跳转

    方式一 window.location.href=”url”; 在当前窗口跳转 方式二 window.open(‘url’) 在新窗口跳转 window.open(‘url’,’_self’) 在当前 ...

  4. Git:从远程库克隆到本地库及更新本地库

    1.例如我们克隆远程库gitskills 2.克隆 2.1选择合适的地方(文件目录),点击Git Bash Here. 2.2如果是github远程库,进行以下操作: 点击gitskills,再点击红 ...

  5. [luogu P3216] [HNOI2011]数学作业

    [luogu P3216] [HNOI2011]数学作业 题目描述 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 N 和 M,要求计算 Concatenate (1 ...

  6. UNIX发展史简介

    1965年贝尔实验室(Bell Labs).通用电气(General Electric)和麻省理工学院(MIT)欲共同打造MULTICS(Multiplexed Information and Com ...

  7. [IOS微信] 查看微信原始数据(含沙盒中的数据)

    1.下载PP助手,将苹果手机连接到电脑上, 2.备份数据 备份还原——备份数据——全新备份 3.导出数据 备份还原——还原数据,在右边的列表中找到备份记录,点击“查看”, 在弹出窗口的右侧,找到“Ap ...

  8. 关于scratch导出的flash画质很差的问题解决方案

    Scratch的分辨率是480*360,因此把scratch文件转变为flash时,因影像和画质很差,把flash插入到ppt幻灯片后,影像和画质仍然得不到保证.经过不断摸索,这个问题终于得到解决,关 ...

  9. Android 音视频深入 一 AudioRecord录音生成pcm转换为wav(附源码下载)

    本篇项目地址,名字是AudioRecord录音(能暂停,将pch转换为wav),求starhttps://github.com/979451341/Audio-and-video-learning-m ...

  10. 架构之路:nginx与IIS服务器搭建集群实现负载均衡(一)

    最近亮亮在研究IIS的负载均衡!本人由于初出茅庐,防骗意识薄弱,一不小心被亮亮坑上了IIS负载均衡之路(亮亮是真黑哈!).前车之鉴啊!小伙伴们要小心.不过既上了贼船,便决定一条道走到黑.于是乎从大前天 ...