小程序生成海报图片(或者原有的)并下载,&&相册授权&&按钮拉起二次授权
这是自己做小程序生成推广海报,并保存到本地相册的方法,向后台发起请求,返回一个海报图片,下载保存到相册,
如果只是单纯的下载图片代码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:
<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
})
}
},
小程序生成海报图片(或者原有的)并下载,&&相册授权&&按钮拉起二次授权的更多相关文章
- 小程序生成海报:通过 json 配置方式轻松制作一张海报图
背景 由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈.而小程序 ...
- 微信小程序生成分享图片,保存到本地
1.页面 <canvas canvas-id="shareCanvas" style="width:600px;height:900px">< ...
- 小程序生成海报 canvas
前言 微信小程序需要生成海报进行朋友圈分享,但是不同的手机会有问题, 然后首先是图片的问题 图片 在模拟器上没有报错,可是真机测试却什么也没画出来. canvas.drawImage 是不支持网络图片 ...
- 小程序生成海报demo
效果图: <view class='poste_box' id='canvas-container' style="margin:0 auto;border-radius:16rpx; ...
- 微信小程序生成海报保存图片到相册小测试
test.wxml <canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px;" canvas-id=&q ...
- 微信小程序生成海报分享:canvas绘制文字溢出如何换行
主要思路: 1.先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串 2.计算另起的 ...
- opensetting禁用后小程序二次授权的问题-以及根据定位城市获取天气
一. 关于wx.openSetting 接口废弃后的通过其他方式重新设置权限的问题 最近小程序更新了后,导致以下报错 "openSetting:fail 此接口已废弃,请使用 OpenSet ...
- 小程序(Wepy)--生成海报图片
对于小程序的分享, 除了分享给朋友, 好友群,是可以直接做到的, 但是要想扩大推广范围, 通过生成海报图片, 将自己小程序码带进去,应该是目前我所知的好办法了. 但是海报也不是那么好搞.之前自己手写出 ...
- [技术博客]海报图片生成——小程序canvas画布
目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...
随机推荐
- 家庭记账本小程序之java代码部分(java web基础版二)
1.连接数据库 package util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Res ...
- EQueue
EQueue 2.3.2版本发布(支持高可用) - dotNET跨平台 - CSDN博客https://blog.csdn.net/sD7O95O/article/details/78097193 E ...
- 解决刷新页面vuex store中数据丢失的问题
**问题背景:**页面刷新后,vuex中的数据丢失.这是因为:js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的.进行刷新页面的操作,以前申请的内存被释放,重新加载脚本代码,变量 ...
- fetch和axios获取数据
fetch("/api/goods") .then(res => { return res.json(); }) .then(response => { console ...
- MySQL之InnoDB数据页结构(转自掘金小册 MySQL是怎样运行的,版权归作者所有!)
InnoDB为了不同的目的而设计了不同类型的页,我们把用于存放记录的页叫做数据页. 一个数据页可以被大致划分为7个部分,分别是 File Header,表示页的一些通用信息,占固定的38字节. Pag ...
- Spring Boot程序获取tomcat启动端口
package com.geostar.geostack.git_branch_manager.config; import org.springframework.beans.factory.ann ...
- mpvue——引入iconfont字体图标
前言 有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复.当大家发现这篇文章不适用的时候烦请告知下,我好做好更改! 放置 下载好的字体图标放在static目录下,我是自己又创建了一个icon ...
- PR视频剪辑
PR视频剪辑 新手问题1: 将素材导入到Adobe Premiere Pro CC后为什么无法拖入到时间轴上 解决办法:没有建立有序列所致,CC不会一开始就让你新建序列,图中间处写的好清楚“无序列”. ...
- 前端神器之jquery
jquery介绍 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. ...
- EF CodeFirst系列(3)---EF中的继承策略(暂存)
我们初始化数据库一节已经知道:EF为每一个具体的类生成了数据库的表.现在有了一个问题:我们在设计领域类时经常用到继承,这能让我们的代码更简洁且容易管理,在面向对象中有“has a”和“is a”关系 ...