save_share_img:function(img){

      var that = this;
let { result } = that.data; getData.getData(
"save_share_img",
{
id : result.id,
share_img_link : img,
method : "POST"
},
function(data) {
if (data.errno){
console.log(data.errdesc);
return;
} result.share_img = img;
that.setData({
result: result
}); }
);
},
download:function(){
var that = this;
let { urls,result } = that.data; console.log(result);
if (result.share_img == ''){ // 临时图片上传cdn
wx.uploadFile({            // 需要传到cdn 才可以下载!!!!!
url : "https://a.xxxxx.com/xxxxx/Public/upload_more_img",
filePath : urls,
name : "file",
success : res => {
},
fail : res => {
},
complete: res => {
var imgdata = JSON.parse(res.data);
var img = imgdata.data[];
that.save_share_img(img);
urls = img;
}
})
} else {
urls = result.share_img;
} console.log('download---start');
console.log(urls); wx.downloadFile({
url: urls,
//url:'https://cdn.xxxxxx.net/avatar_3.png', // canvas 生成的临时图片不可
success: function(res) { // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
console.log(res)
if (res.statusCode == ) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function(res) {
console.log(res);
console.log('succ');
wx.showToast({
title: '保存图片成功!~',
}); that.setData({
mask_btn: ,
share_btn: false,
canvas_btn:false
});
},
fail: function(res) {
console.log(res);
console.log('fail');
wx.showToast({
title: '保存图片失败!~'
});
},
complete:function(res){
console.log(res);
console.log('complete');
}
})
} else {
console.log('下载图片发生错误----');
wx.showToast({
title: '保存图片发生错误!~'
});
}
},
fail: function(res){
console.log('下载图片发生错误');
console.log(res); }
}); console.log('download---over'); },
previewImg: function() {
var that = this; wx.getSetting({
success(res) {
console.log('-------------');
console.log(res); if (!res.authSetting['scope.writePhotosAlbum']) {      // 获取授权!!!!
wx.authorize({
scope:'scope.writePhotosAlbum',
success() {
that.download();
console.log('授权成功')
}
}); } else {
that.download();
console.log('已授权');
}
}
})

小程序下载canvas生成图片的更多相关文章

  1. 关于微信小程序使用canvas生成图片,内容图片跨域的问题

    最近有个项目是保存为名片(图片),让用户发送给朋友或朋友圈,找了很多方案都不适用,绞尽脑汁之后还是选了使用canvas,但是用这玩意儿生成图片最大的缺点就是,如果你的内容中有图片,并且这个图片是通过外 ...

  2. wx小程序用canvas生成图片流程与注意事项

    1.需要画入canvas的 图片都需要先缓存到本地 let ps = [] ps.push(that.loadImageFun(this.statusInfo.avatar_url, "he ...

  3. 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  4. 微信小程序-基于canvas画画涂鸦

    代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  5. 微信小程序 在canvas画布上划动,页面禁止滑动

    要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...

  6. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  7. 微信小程序利用canvas生成海报分享图片

    一 . 效果 这是借用女神照生成的分享的海报,图片来自网络. 新增了poster组件和更新图片自适应 二 . 准备 准备两张图片连接,最好是自己开发账号验证的https图片链接. 三 . 实现思路 其 ...

  8. 兼容小程序的canvas画图组件jmGraph

    基于CANVAS的简单画图组件让你用类似于dom的方式,在canvas上画图,感觉会不会很爽. 主页:http://graph.jm47.com/示例:http://graph.jm47.com/ex ...

  9. 微信小程序之canvas绘制海报分享到朋友圈

    绘制canvas内容 首先,需要写一个canvas标签,给canvas-id命名为shareBox <canvas canvas-id="shareBox"></ ...

随机推荐

  1. linux其他

    1.安装上传下载指令 sz/rz yum install -y lrzsz 2.flask+gunicorn 代码更新升级部署 ps -ef | grep gunicorn 获取master进程 ki ...

  2. jdk1.8 ConcurrentHashMap 的工作原理及代码实现,如何统计所有的元素个数

    ConcurrentHashMap 的工作原理及代码实现: 相比于1.7版本,它做了两个改进 1.取消了segment分段设计,直接使用Node数组来保存数据,并且采用Node数组元素作为锁来实现每一 ...

  3. HTML 001 入门介绍

    HTML 教程- (HTML5 标准) 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 您可以使用 HTML 来建立自己的 ...

  4. 003_硬件基础电路_LM2596

    以下内容全部从文档中获取有用信息的 链接:https://pan.baidu.com/s/1fEbtY616bJWsuaDOZ0CUjw提取码:1byu 复制这段内容后打开百度网盘手机App,操作更方 ...

  5. C++构造函数的default和delete

    C++11中,当类中含有不能默认初始化的成员变量时,可以禁止默认构造函数的生成, myClass()=delete;//表示删除默认构造函数 myClass()=default;//表示默认存在构造函 ...

  6. 前端代码规范-Javascript

    命名规范 ECMAScript 规范中标识符采用驼峰大小写格式,驼峰命名法由小(大)写字母开始,后续每个单词首字母都大写.根据首字母是否大写,分为两种方式: Pascal Case 大驼峰式命名法:首 ...

  7. CF786E ALT

    题意 有一棵 \(n\) 个点的树和 \(m\) 个人,第 \(i\) 个人从 \(u_i\) 走到 \(v_i\) 现在要发宠物,要求一个人要么他自己发到宠物,要么他走的路径上的都有宠物. 求最小代 ...

  8. C# 下划线转驼峰

    /// <summary> /// 转换 /// </summary> /// <param name="sender"></param& ...

  9. 自动化运维工具pssh、pdsh、pscp

    pssh命令是一个python编写可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具中很出色的,类似pdsh,个人认为相对pdsh更为简便,使用必须在各个服务器上配置好密钥认证访问. 以下 ...

  10. java集合——Map

    声明:以下内容都是来自网络总结,将会参考很多,没有声明转载来源. 一.Map接口 1.HashMap HashMap和HashTable的区别:http://blog.csdn.net/shohoku ...