1.预览效果图
当用户点击拒绝按钮后的截图:
用户点击不授权 则关闭弹窗
单独给用户点击授权后, 跳转到授权页面
开启授权后:文章来源:https://www.toymoban.com/news/detail-719064.html
文章来源地址https://www.toymoban.com/news/detail-719064.html
2.代码
<template>
<view class="download_certificate">
<view class="img">
<!-- <view class="certificate_img"> -->
<!-- <image src="cloud://produce-6gykelggdea632cb.7072-produce-6gykelggdea632cb-1317432646/download.png"/> -->
<view style="width: 700rpx; height: 500rpx" @click="open">
<canvas type="2d" id="myCanvas" style="width: 100%; height: 100%" />
</view>
<!-- </view> -->
<view style="position: absolute; bottom: 200rpx; left: 1rpx; width: 100%; height: auto">
<button
style="width: 90%; height: 120rpx; background: #df3535; border-radius: 20rpx; line-height: 120rpx; font-size: 36rpx; font-weight: 500; color: #ffffff"
size="large"
type="default"
@tap.native="savaImage"
>
保存到相册
</button>
</view>
</view>
<view class="popup">
<!-- 遮罩层开始 -->
<uni-popup ref="popup" :mask-click="false">
<text> 11 </text>
<button @click="close" safe-area="true" style="width: 100vm; height: 100vh">关闭</button>
</uni-popup>
<!-- 遮罩层结束 -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: 'https://cdn-asset.znyzf.com/asset/zsbg.jpg',
canvasRef: null,
info: {},
number: 1
}
},
created() {
this.drawCanvas()
},
onLoad(options) {
this.info = JSON.parse(decodeURIComponent(options.certificateInfo))
this.drawCanvas()
},
methods: {
savaImage() {
let that = this
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success(res) {
that.saveImg()
},
fail() {
uni.showModal({
content: '请允许相册权限,拒绝将无法正常使用小程序',
showCancel: false,
success() {
uni.openSetting({
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
} else {
console.log('获取权限失败')
}
}
})
}
})
}
})
} else {
that.saveImg()
}
}
})
},
drawCanvas() {
const query = uni.createSelectorQuery()
query
.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
this.canvasRef = canvas
const dpr = uni.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr // 获取宽
canvas.height = res[0].height * dpr // 获取高
ctx.scale(dpr, dpr)
// 到这里就可以直接绘制
let image = canvas.createImage() //创建iamge实例
image.src = this.src // 引入本地图片
image.onload = (imginfo) => {
// 获取http图片宽高
// const {width,height} = imginfo.path[0];
// const aspect = width / height;
// console.log(width,height)
const currentWidth = canvas.width / dpr
const currentHeight = canvas.height / dpr
console.log(currentWidth, currentHeight)
ctx.drawImage(image, 0, 0, currentWidth, currentHeight)
// ctx.drawImage(image, 0, 0, canvas.width / dpr, canvas.height / dpr); // 背景图
ctx.fillStyle = '#000000'
ctx.font = '16px Arial'
ctx.textAlign = 'center'
ctx.fillText(this.info['name'] || '刚刚', 0.235 * currentWidth, 0.45 * currentHeight, 100) //字体的位置/设备的大小
ctx.textAlign = 'left'
ctx.font = '9px Arial'
ctx.fillText(this.info['code'] || '456', 0.434 * currentWidth, 0.786 * currentHeight)
//年月日
ctx.font = '10px Arial'
ctx.fillText(this.info['beforeYear'], 0.247 * currentWidth, 0.555 * currentHeight)
ctx.fillText(this.info['beforeMonth'], 0.37 * currentWidth, 0.555 * currentHeight)
ctx.fillText(this.info['beforeDay'], 0.445 * currentWidth, 0.555 * currentHeight)
ctx.fillText(this.info['afterYear'], 0.55 * currentWidth, 0.555 * currentHeight)
ctx.fillText(this.info['afterMonth'], 0.675 * currentWidth, 0.555 * currentHeight)
ctx.fillText(this.info['afterDay'], 0.75 * currentWidth, 0.555 * currentHeight)
}
})
},
saveImg() {
let that = this
uni.showLoading({
title: '生成中...'
})
uni.canvasToTempFilePath({
canvas: that.canvasRef,
x: 0,
y: 0,
width: that.canvasWidth * 2,
height: that.canvasHeight * 2,
destWidth: that.canvasWidth * 2,
destHeight: that.canvasHeight * 2,
success: (res) => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
// console.log(this.saveTempFilePath)
uni.showModal({
title: '保存成功!',
content: '图片已保存到本地相册',
showCancel: false,
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '图片保存成功'
})
}
}
})
},
fail: (err) => {
console.log(err)
}
})
},
fail: (err) => {
console.log(err)
}
})
setTimeout(() => {
uni.hideLoading()
}, 1000)
},
// 遮罩层相关的回调
open() {
this.$refs.popup.open('top')
},
close() {
this.$refs.popup.close()
}
}
}
</script>
<style>
.download_certificate {
padding: 40rpx 30rpx;
}
.certificate_img {
width: 100%;
}
.certificate_img image {
width: 100%;
}
</style>
到了这里,关于uniapp 微信小程序保存图片到系统相册( 获取用户是否开启 授权保存图片到相册。)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!