uniapp 微信小程序保存图片到系统相册( 获取用户是否开启 授权保存图片到相册。)

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序保存图片到系统相册( 获取用户是否开启 授权保存图片到相册。)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.预览效果图

uniapp获取相册权限,微信小程序,uni-app,小程序

uniapp获取相册权限,微信小程序,uni-app,小程序

当用户点击拒绝按钮后的截图:

 uniapp获取相册权限,微信小程序,uni-app,小程序

用户点击不授权  则关闭弹窗

单独给用户点击授权后, 跳转到授权页面

uniapp获取相册权限,微信小程序,uni-app,小程序

 开启授权后:

uniapp获取相册权限,微信小程序,uni-app,小程序文章来源地址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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序保存图片到相册 微信小程序实现将图片保存到手机相册(方案一)

    目录 微信小程序实现将图片保存到手机相册(方案一) 微信小程序实现将图片保存到手机相册(方案二) 微信小程序之点击复制文本到剪贴板 微信小程序---判断是IOS还是安卓 微信小程序分享图片给微信好友 首先我们需要调用wx.downloadFile方法下载文件资源到本地,然后利用

    2023年04月20日
    浏览(59)
  • 微信小程序保存图片到相册 微信小程序实现将图片保存到手机相册(方案一)

    目录 微信小程序实现将图片保存到手机相册(方案一) 微信小程序实现将图片保存到手机相册(方案二) 微信小程序之点击复制文本到剪贴板 微信小程序---判断是IOS还是安卓 微信小程序分享图片给微信好友 首先我们需要调用wx.downloadFile方法下载文件资源到本地,然后利用

    2023年04月20日
    浏览(41)
  • 微信小程序实现将图片保存到手机相册

    首先我们需要调用 wx.downloadFile 方法下载文件资源到本地,然后利用 wx.saveImageToPhotosAlbum 方法保存图片到系统相册,需要注意的是这样写很可能会因为没有权限而导致下载不了图片,所以我们最后还需要给接口一个调用失败的回调函数,以此来获取权限,最后这个小功能就实

    2024年02月11日
    浏览(63)
  • 微信小程序——保存图片到手机相册(代码详解)

    首先我们要知道,如果小程序首次发起授权被拒绝之后,再次点击同一个按钮执行的wx.authorize(...)不会再弹出授权窗口。所以我们需要到引导用户到设置页面进行手动授权。 引导用户到设置页面授权的方式有两种: 第一种: 使用小程序api :wx.openSetting(...)打开设置页面 第二

    2024年02月04日
    浏览(48)
  • 微信小程序-生成canvas图片并保存到手机相册

    wxml页面 wxss页面 js代码

    2024年02月10日
    浏览(53)
  • 微信小程序canvas画布图片保存到相册官方授权、自定义授权、保存

    目录 关键步骤介绍 Component实现自定义授权弹框 wx.getSetting可以获取授权信息。 wx.authorize首次授权时会打开弹框让用户授权,若用户已选择同意或拒绝,后续不会再显示授权弹框。 如果授权信息显示未进行相册授权,则打开自定义弹框(show_auth: true)让用户选择是否自行配置

    2024年01月16日
    浏览(43)
  • 微信小程序canvas画布绘制base64图片并保存图片到相册中

    WXML部分: 样式可以根据自己需求自行调整 canvas绘制成图片部分: 这就将图片绘制出来了。 首先获取用户相册权限。 保存功能:

    2024年02月13日
    浏览(41)
  • uniapp开发微信小程序使用painter将页面转换为图片并保存到本地相册

    我使用到painter的原因是,在uniapp开发微信小程序时,需要将一个页面的内容转换成图片保存到本地相册。 起初在网上找到很多都是在 uniapp 中使用 html2canvas 将 网页转换成图片再 jspdf 将图片转换为pdf ,但是这种方式在小程序环境不支持,只在 h5 环境下适用, 当然这个方式是

    2024年02月12日
    浏览(42)
  • 微信小程序海报插件Painter 2.0(canvas画图)使用并保存图片到相册案例

    Painter通过 json 数据形式,来进行动态渲染并绘制出图片。 Painter 的优势 功能全,支持文本、图片、矩形、qrcode 类型的 view 绘制 布局全,支持多种布局方式,如 align(对齐方式)、rotate(旋转) 支持圆角,其中图片,矩形,和整个画布支持 borderRadius 来设置圆角 支持边框,

    2024年01月20日
    浏览(63)
  • uniapp-小程序保存图片到相册

    一. 将图片保存到手机相册涉及的 api 有以下几个 1. uni.getSetting (获取用户的当前设置) 2. uni.authorize (提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不

    2024年04月22日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包