uniapp app 端截屏且保存到本地

down() {
    setTimeout(() => {
        let pages = getCurrentPages();
        let page = pages[pages.length - 1];
        let ws = page.$getAppWebview();
        let bitmap = new plus.nativeObj.Bitmap('drawScreen');
        // 将webview内容绘制到Bitmap对象中  
        ws.draw(bitmap, () => {
            // 保存图片到本地  
            bitmap.save("_doc/drawScreen.jpg", {
                overwrite: true
            }, res => {
                console.log(res.target); // 图片地址  

                uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
                    filePath: res.target, //图片文件路径
                    success: () => {
                        uni.showModal({
                            title: '温馨提示',
                            content: '保存图片成功,赶紧去转发给好友吧~',
                            showCancel: false,
                            confirmColor: "#34CE98",
                            confirmText: '知道了',
                            success: () => {
                                this.canSave = false;
                            }
                        })
                        uni.hideLoading()
                    },
                    fail: function(e) {
                        uni.showModal({
                            title: '温馨提示',
                            content: '保存图片失败,重新再试试~',
                            showCancel: false,
                            confirmColor: "#34CE98",
                            confirmText: '知道了',
                            success: () => {
                                this.canSave = false;
                            }
                        })
                        uni.hideLoading()
                    }
                });

                bitmap.clear(); // 清除Bitmap对象  
            }, error => {
                console.log(JSON.stringify(error)); // 保存失败信息  
                uni.showModal({
                    title: '温馨提示',
                    content: '保存图片失败,重新再试试~',
                    showCancel: false,
                    confirmColor: "#34CE98",
                    confirmText: '知道了',
                    success: () => {
                        this.canSave = false;
                    }
                })
                uni.hideLoading()
                bitmap.clear(); // 清除Bitmap对象  
            });
            // bitmap.clear(); // 清除Bitmap对象  
        }, error => {
            uni.showModal({
                title: '温馨提示',
                content: '保存图片失败,重新再试试~',
                showCancel: false,
                confirmColor: "#34CE98",
                confirmText: '知道了',
                success: () => {
                    this.canSave = false;
                }
            })
            uni.hideLoading()
            console.log(JSON.stringify(error)); // 绘制失败  
        }, {
            check: true, // 设置为检测白屏  
        });
    }, 2000)
}
### 如何在 UniApp 中实现应用程序保存图片功能 #### 使用 Painter 组件将页面内容转为图片并保存本地相册 Painter 是一款用于绘制图像的组件,适用于多种场景下的绘图需求。对于希望把页面特定区域的内容转化为静态图片的需求来说非常有用。通过配置画布尺寸、背景颜色以及指定要渲染的文字和图形元素等参数来定制所需画面[^1]。 为了完成从页面到图片再到保存的操作流程,开发者需先引入 painter 插件,并按照官方文档指导设置好相应属性值。当用户触发截图事件时,调用 `createImage` 方法获取 base64 编码格式的数据流表示形式的画面快照。之后利用 WeChat Mini Program API (`wx.saveImageToPhotosAlbum`) 完成最终一步——向设备相册写入新创建出来的位图资源。 下面是一个简单的代码片段展示如何集成上述逻辑: ```javascript // 假设已经成功安装并注册了 painter 组件实例 methods: { savePageAsImage() { const that = this; // 创建一张基于当前屏幕视口大小的新图画对象 let canvasId = 'myCanvas'; // 获取画家实例 var ctx = uni.createCanvasContext(canvasId); // 设置一些基础样式 ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, windowWidth, windowHeight); // 这里可以根据实际业务情况添加更多自定义绘画指令... // 执行绘制操作 ctx.draw(false, () => { setTimeout(() => { // 导出为临时文件路径 uni.canvasToTempFilePath({ x: 0, y: 0, width: windowWidth, height: windowHeight, destWidth: windowWidth * 2, destHeight: windowHeight * 2, canvasId: canvasId, success(res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, complete(result) { if (!result.errMsg || result.errMsg !== "saveImageToPhotosAlbum:ok") { console.error('Failed to save image:', JSON.stringify(result)); return; } uni.showToast({ title: 'Saved successfully!', icon: 'success' }); } }) }, fail(err){ console.log("导出失败",err) } },that); }, 200); }); } } ``` 此段脚本展示了怎样借助 Canvas API 构建可视化的输出结果,并进一步处理这些数据以便于后续持久化存储。值得注意的是,在执行任何涉及隐私敏感权限的动作之前,请确保遵循目标平台的安全策略指南并向终用户提供充分的通知说明。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值