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

如果只是单纯的下载图片代码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. PowerShell-自定义函数(五)-参数互斥:ParameterSetName

    转自:https://blog.51cto.com/38088444/1920978 这一篇我们来讲一下参数的互斥,何谓参数互斥呢.用九胖风格的话说就是互怼,有我没你,有你没我. 例如我们为一个Pin ...

  2. nginx代理部署Vue与React项目

    nginx代理部署Vue与React项目 一,介绍与需求 1.1,介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由 ...

  3. SpringCloud-Eureka服务注册与发现(二)

    SpringCloud-Eureka服务注册与发现(二) https://www.cnblogs.com/qdhxhz/p/9357502.html https://blog.csdn.net/wei ...

  4. 关于oracle sql语句查询时表名和字段名要加双引号的问题详解

    转自:http://www.2cto.com/database/201504/387184.html 作为oracle的初学者相信大家一定会遇到这个问题,如图: 明明就是navicat可视化创建了表, ...

  5. 安装mysql8.0出现服务无法启动,服务没报告任何错误

    改为net start mysql80 参考https://blog.csdn.net/gzejia/article/details/82156994

  6. Elasticsearch6.x和Kibana6.x的安装

    Elasticsearch6.x的安装(centos6.x下) Elasticsearch6.x目前需要至少jdk8的支持,关于如何安装jdk不在讲述.Oracle的推荐安装文档可以在Oracle的网 ...

  7. P4610 [COCI2011-2012#7] KAMPANJA

    题目背景 临近选举,总统要在城市1和城市2举行演讲.他乘汽车完成巡回演讲,从1出发,途中要经过城市2,最后必须回到城市1.特勤局对总统要经过的所有城市监控.为了使得费用最小,必须使得监控的城市最少.求 ...

  8. 使用@property

    @property装饰器就是负责把一个方法变成属性调用的,既能检查参数,又可以用类似属性这样简单的方式来访问类的变量 class Student(object): @property def scor ...

  9. Magento2 可配置产品解决SKU流程

    选择可配置产品: 填写必填信息与库存 创建配置 执行四步后完成创建:4.1:选择需要的规格属性: 4.2:选择组合需要的属性值:4.3:根据您的选择,将创建3个新产品.使用此步骤自定义新产品的图像和价 ...

  10. 一种特殊的 jpg 图片: MagickProfileImage() sRGB.icc

    原图,在 ps, 浏览器中显示这样: 在 ps 中另存为 web... [转换成 sRGB]选项没有勾选: 在 ps 中另存为 web... 勾选[转换成 sRGB]选项: 用 ImageMaigck ...