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 ...
随机推荐
- leetcode_输入一个数组,目标树,检查目标是数组下标的哪两个之和,不准重复
今天是leetcode第一天,但是不太顺利.做这些,想不到 原题目: 我给的答案: class Solution { public: vector<int> twoSum(vector&l ...
- 数组的typedef 和函数的typedef
#include<stdio.h> #include<string.h> #include<stdlib.h> // 数组指针 语法 梳理 // //int a[1 ...
- (效率低下)77. Combinations C++回溯法 组合
https://leetcode.com/problems/combinations/ 沿用78题的思路 class Solution { public: void backTrack(vector& ...
- Oracle表空间状态
1.表空间只读 查看当前表空间状态 SYS@userdata>column file_name format a60 SYS@userdata>column tablespace_name ...
- PostgreSQL数据库单机扩展为流复制
primary:10.189.102.118 standby:10.189.100.195 1. 配置ssh互信机制 在primary主库执行 $ ssh-keygen -t rsa $ cp ~/. ...
- RCNN 目标识别基本原理
RCNN- 将CNN引入目标检测的开山之作 from:https://zhuanlan.zhihu.com/p/23006190 前面一直在写传统机器学习.从本篇开始写一写 深度学习的内容. 可能需要 ...
- spring自定义xml标签&自定义注解
public class YafBeanDefinitionParser implements BeanDefinitionParser { private BeanDefinitionRegistr ...
- windows 下的命令操作
删除文件夹 RD /S D:\aaaaa 删除文件夹下的文件 DEL D:\aaaaa\*.*
- Ubuntu 14.04下如何更换更新源(更新为163源)
之前的安装ubuntu桌面版的之后安装yum,vim等会遇到一些问题, 比如:Ubuntu 14.04下如何更换更新源(更新为163源) 解决: http://jingyan.baidu.com/ar ...
- learning ddr input clock frequency change condition