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

如果只是单纯的下载图片代码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. H5网页后在返回到微信公众平台自定义菜单

    <p class="success">订阅成功!</p> <div class="btn" @click="finish ...

  2. 通过JS获取URL链接带的参数

    1 /** 2 * 获取URL参数的方法 3 */ 4 $.extend({ //以便于通过$引用该方法 5 getUrlVars : function() { //获取多个参数数组 6 var va ...

  3. Java 常用数据结构对象的实现原理 集合类 List Set Map 哪些线程安全 (美团面试题目)

    Java中的集合包括三大类,它们是Set.List和Map, 它们都处于java.util包中,Set.List和Map都是接口,它们有各自的实现类. List.Set都继承自Collection接口 ...

  4. Datatable get请求传参应用

    以关注页面为例: html: <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12&q ...

  5. python的基本流程控制

    一:if判断语句 1.1 if判断语法之一 if条件: 子代码块 1.2 if判断语法之二 if条件: 子代码块 else: 子代码块 1.3 if判断语法之三 if条件: if条件: 子代码块 1. ...

  6. python之序列化模块、双下方法(dict call new del len eq hash)和单例模式

    摘要:__new__ __del__ __call__ __len__ __eq__ __hash__ import json 序列化模块 import pickle 序列化模块 补充: 现在我们都应 ...

  7. python学习日记(内置函数补充)

    剩余匿名函数 序列 序列——列表和元组相关的:list和tuple 序列——字符串相关的:str,format,bytes,bytearry,memoryview,ord,chr,ascii,repr ...

  8. .Net Core实践1

    实践目标 编写经典的hello world程序.使用.netcore框架,然后运行在linux上. .netcore目前已经是2.1版本了,可以简单的认为是一种跨平台的.net framework,除 ...

  9. class09

    class09 四川菜很辣. Sichuan cuisine is very spicy. 那个汤是凉的. That soup is cold. 这茶很烫. This tea is very hot. ...

  10. 从零开始部署javaWeb项目到阿里云上面

    [详情请看]http://www.cnblogs.com/softidea/p/5271746.html 补充几点特别需要注意的事情 一:putty相当于阿里云的控制台, WinSCP 相当于是专门上 ...