1.預(yù)覽效果圖
當(dāng)用戶點(diǎn)擊拒絕按鈕后的截圖:
?
用戶點(diǎn)擊不授權(quán)? 則關(guān)閉彈窗
單獨(dú)給用戶點(diǎn)擊授權(quán)后, 跳轉(zhuǎn)到授權(quán)頁(yè)面
?開(kāi)啟授權(quán)后:文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-719064.html
文章來(lái)源地址http://www.zghlxwxcb.cn/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"
>
保存到相冊(cè)
</button>
</view>
</view>
<view class="popup">
<!-- 遮罩層開(kāi)始 -->
<uni-popup ref="popup" :mask-click="false">
<text> 11 </text>
<button @click="close" safe-area="true" style="width: 100vm; height: 100vh">關(guān)閉</button>
</uni-popup>
<!-- 遮罩層結(jié)束 -->
</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: '請(qǐng)?jiān)试S相冊(cè)權(quán)限,拒絕將無(wú)法正常使用小程序',
showCancel: false,
success() {
uni.openSetting({
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
} else {
console.log('獲取權(quán)限失敗')
}
}
})
}
})
}
})
} 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() //創(chuàng)建iamge實(shí)例
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) //字體的位置/設(shè)備的大小
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: '圖片已保存到本地相冊(cè)',
showCancel: false,
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '圖片保存成功'
})
}
}
})
},
fail: (err) => {
console.log(err)
}
})
},
fail: (err) => {
console.log(err)
}
})
setTimeout(() => {
uni.hideLoading()
}, 1000)
},
// 遮罩層相關(guān)的回調(diào)
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>
到了這里，關(guān)于uniapp 微信小程序保存圖片到系統(tǒng)相冊(cè)（ 獲取用戶是否開(kāi)啟 授權(quán)保存圖片到相冊(cè)。）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
