这是自己做小程序生成推广海报,并保存到本地相册的方法,向后台发起请求,返回一个海报图片,下载保存到相册,

如果只是单纯的下载图片代码43行-63行就足够了

如果想直接保存到相册,则不要做downFile的处理,直接调用saveImageToPhotoAlbum,线上版本无法保存临时路径的图片

具体看代码:

//选中轮播图中的一个作为海报背景图。可自行实验,只是自己的总结
bindchange: function(a) {
for (var t = this, o = a.detail.current, i = t.data.imgUrls, n = 0; n < i.length; n++) {
var e = i[o].plogo;
var title = i[o].title;
t.setData({
imgcxs: e,
title: title
});
}
t.setData({
tuhight: o,
      //选中图片的id
nowid:a.detail.currentItemId,
});
},
//选中海报背景,拿到id后向后台发起请求,生成海报
bao: function() {
var that = this;
wx.showLoading({
title: "生成中",
mask: true,
});
    //向后台发起请求,
wx.request({
url: api.url.poster,
method: "POST",
data:{
uid: app.globalData.userInfo.id,
postid:that.data.nowid,
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res)
wx.hideLoading();
wx.showToast({
title: res.data.msg,
icon: "none"
})
//下载图片
    //这里不能用wx.savefile()去保存,它不会自动保存在自己相册中的,只能用wx.saveImageToPhotosAlbum()调起相册
wx.downloadFile({
url: 后台返回图片的url(或者是网上的图片url),
success: function(a) {
       //图片下载时的临时路径
var t = a.tempFilePath;
//通过wx.saveImageToPhotoAlbum调起本地相册,并保存
wx.saveImageToPhotosAlbum({
       //需要保存的临时文件路径
filePath: a.tempFilePath ,
success: function (a) {
console.log(a);
wx.showToast({
title: "保存成功",
icon: "success",
duration: 2e3,
})
},
fail: function (err) {
console.log(err)
}
});
},
fail:err=>{
  console.log(err)
}
  })
}
  

真机的时候发现了一个问题,saveImageToPhotosAlbum没有调动本地相册。

后来发现是没有授权的原因,所以利用wx.getSetting进行检测,没有授权,调起弹窗授权,当授权成功,使ruler变为true,使授权按钮消失,

onShow:function(){
var that=this
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {//这里是用户同意授权后的回调
that.setData({
ruler:true
})
},
fail() {//这里是用户拒绝授权后的回调
// wx.showModal({
// title: '警告',
// content: '授权失败,无法保存到相册',
// })
that.setData({
ruler:false
})
}
})
} else {//用户已经授权过了 }
}
})
},

如果用户拒绝了授权,短时间内则不会在出现弹窗,所以,如果需要用户授权使用此功能的话,需要按钮授权,当授权成功,使ruler变为true,使授权按钮消失,也就是一共两个按钮作做处理

wxml:
  <text bindtap="bao" wx:if="{{ruler}}">保存图片到相册</text>
 <button open-type="openSetting"   bindopensetting='handleSetting'   class="xsACA" wx:else>
<text bindtap="bao" style='background:#64bcfc'>授权相册</text>
</button>
handleSetting: function (e) {
let that = this;
// 对用户的设置进行判断,如果没有授权,即使用户返回到保存页面,显示的也是“去授权”按钮;同意授权之后才显示保存按钮
if (!e.detail.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '警告',
content: '若不打开授权,则无法将图片保存在相册中!',
showCancel: false
})
that.setData({
ruler: false
})
} else {
wx.showModal({
title: '提示',
content: '您已成功授权相册',
showCancel: false
})
that.setData({
ruler: true
})
}
},

  

小程序生成海报图片(或者原有的)并下载,&&相册授权&&按钮拉起二次授权的更多相关文章

  1. 小程序生成海报:通过 json 配置方式轻松制作一张海报图

    背景 由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈.而小程序 ...

  2. 微信小程序生成分享图片,保存到本地

    1.页面 <canvas canvas-id="shareCanvas" style="width:600px;height:900px">< ...

  3. 小程序生成海报 canvas

    前言 微信小程序需要生成海报进行朋友圈分享,但是不同的手机会有问题, 然后首先是图片的问题 图片 在模拟器上没有报错,可是真机测试却什么也没画出来. canvas.drawImage 是不支持网络图片 ...

  4. 小程序生成海报demo

    效果图: <view class='poste_box' id='canvas-container' style="margin:0 auto;border-radius:16rpx; ...

  5. 微信小程序生成海报保存图片到相册小测试

    test.wxml <canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px;" canvas-id=&q ...

  6. 微信小程序生成海报分享:canvas绘制文字溢出如何换行

    主要思路: 1.先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串 2.计算另起的 ...

  7. opensetting禁用后小程序二次授权的问题-以及根据定位城市获取天气

    一. 关于wx.openSetting 接口废弃后的通过其他方式重新设置权限的问题 最近小程序更新了后,导致以下报错 "openSetting:fail 此接口已废弃,请使用 OpenSet ...

  8. 小程序(Wepy)--生成海报图片

    对于小程序的分享, 除了分享给朋友, 好友群,是可以直接做到的, 但是要想扩大推广范围, 通过生成海报图片, 将自己小程序码带进去,应该是目前我所知的好办法了. 但是海报也不是那么好搞.之前自己手写出 ...

  9. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

随机推荐

  1. 复杂度定义 The Definition of Complexity

    The upper bound   Big-O: Definition: f(n) is in O(g(n)) if there are constants c0 and N0 such that f ...

  2. iOS 简易型标签的实现(UICollectionView)

    https://blog.csdn.net/sinat_39362502/article/details/80900984 2018年07月03日 16:49:05 Recorder_MZou 阅读数 ...

  3. Spring 使用AOP——基于注解配置

    首先,使用注解实现AOP是基于AspectJ方式的. 创建包含切点方法的类 package cn.ganlixin.test; import org.aspectj.lang.annotation.P ...

  4. [转帖] CA如何保护自己的私钥

    作者:Gh0u1L5链接:https://www.zhihu.com/question/22260090/answer/648910720来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...

  5. Django之ORM

  6. DAY16、模块和包

    一.模块 1.模块的加载顺序:内存 =>内置 =>sys.path(一系列自定义模块) 2.sys.path:环境变量,存放文件路径的列表 重点:默认列表第一个元素就是当前被执行文件所在的 ...

  7. 【并发编程】【JDK源码】J.U.C--线程池

    原文:慕课网实战·高并发探索(十四):线程池 Executor new Thread的弊端 每次new Thread 新建对象,性能差. 线程缺乏统一管理,可能无限制的新建线程,相互竞争,可能占用过多 ...

  8. 20190211 模拟训练 A. 大猫咪

    好题 2.11考试

  9. 【UVA1660】Cable TV Network

    题目大意:给定一个 N 个点的无向图,求至少删去多少个点可以使得无向图不连通. 题解:学习到了点边转化思想. 根据网络流的知识可知,一个网络的最小割与网络的最大流相等.不过最小割是图的边集,而本题则是 ...

  10. 计算pi的位数

    from random import random from math import sqrt from time import clock DARTS=1000000 hits=0.0 clock( ...