uniapp移动app实现将网页保存为图片到手机相册-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp移动app实现将网页保存为图片到手机相册。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目中新增了一个需求，将页面保存为图片，且保存在相册中。

Android端

运用到的技术点：

html2canvas：将网页绘制base64的图片

plus.nativeObj.Bitmap：下载base64的png图片，临时存放起来

uni.saveImageToPhotosAlbum：将临时存放的png图片，存放到手机相册

plus.io.resolveLocalFileSystemURL：删除临时存放的图片

运用

安装html2canvas

npm install html2canvas

因为html2canvas要进行dom操作，所以我们得使用renderjs。script就要分为两部分，一个是纯的script标签块，一个是带有module、lang的script标签块

两个script块之间的通信

ownerInstance.callMethod

配置android的写入权限

android.permission.WRITE_EXTERNAL_STORAGE

开始写代码了～

<template>
    <view id="container">
        <view class="content">
            <view>
                <text class="title">{{ title }}</text>
            </view>
            <button @click="canvasToImage.generateImage">保存图片</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: 'Hello',
        }
    },
    mounted() {},
    methods: {
        getSaveImg(data) {
            // console.log('base64data', data);
            let base64data = data.base64data;
            let bitmap = new plus.nativeObj.Bitmap("test");
            bitmap.loadBase64Data(base64data, function () {
                console.log("加载Base64图片数据成功");

                let url = '_downloads/test2.png';

                bitmap.save(url, {}, function (i) {
                    console.log('保存图片成功：' + JSON.stringify(i));
                    // 保存图片到相册
                    uni.saveImageToPhotosAlbum({
                        filePath: url,
                        success: function () {
                            uni.showToast({
                                title: '图片保存成功',
                                icon: 'none'
                            })
                            // 图片保存成功后，将临时保存的图片删除
                            plus.io.resolveLocalFileSystemURL(
                                url,
                                function (entry) {
                                    entry.getMetadata(function (metadata) {
                                        // console.log("fileCount=" + metadata.fileCount);
                                        entry.remove(); //删除单个文件 _downloads/改文件名

                                    });
                                },
                                function (error) {
                                    // uni.showToast({ title: "下载文件" });
                                    console.log("error" + error);
                                }
                            );
                            bitmap.clear()
                        }
                    });
                    bitmap.clear();
                }, function (e) {
                    onsole.log('保存图片失败：' + JSON.stringify(e));
                    bitmap.clear();
                });
            }, function () {
                console.log('加载Base64图片数据失败：' + JSON.stringify(e));
                bitmap.clear();
            });
        },
    }
}
</script>

<script  module="canvasToImage" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
    data() {
        return {}
    },
    methods: {
        // 获取设备的Dpr值
        getDpr() {
            if (window.devicePixelRatio && window.devicePixelRatio > 1) {
                return window.devicePixelRatio;
            }
            return 1;
        },
            /**
       * 将传入值转为整数
       * @param value
       * @returns {number}
       */
        parseValue(value) {
            return parseInt(value, 10);
        },
        generateImage(event, ownerInstance) {
            var _this = this;

            var scanTextElem = document.getElementById('container');
            scanTextElem.style.opacity = '1';

            // 获取想要转换的dom节点
            var dom = document.getElementById('container');
            var box = window.getComputedStyle(dom);

            // dom节点计算后宽高
            var width = _this.parseValue(box.width);
            var height = _this.parseValue(box.height);

            // 获取像素比
            var scaleBy = _this.getDpr();

            // 创建自定义的canvas元素
            var canvas = document.createElement('canvas');

            // 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比
            canvas.width = width * scaleBy;
            canvas.height = height * scaleBy;

            // 设置canvas css 宽高为DOM节点宽高
            canvas.style.width = width + 'px';
            canvas.style.height = height + 'px';

            // 获取画笔
            var context = canvas.getContext('2d');

            // 将所有绘制内容放大像素比倍
            context.scale(scaleBy, scaleBy);

            // 设置需要生成的图片的大小，不限于可视区域（即可保存长图）
            var w = document.getElementById('container').style.width;
            var h = document.getElementById('container').style.height;

            // 这儿的width、height一定得要有值，不然会保存失败
            html2canvas(dom, {
                allowTaint: false,
                width: window.clientWidth,
                height: window.clientHeight,
                backgroundColor:'green',
                useCORS: true
            }).then(function (canv) {
                // 将canvas转换成图片渲染到页面上
                let url = canv.toDataURL('image/png');// base64数据
                ownerInstance.callMethod('getSaveImg', {
                    base64data: url
                })
            });
        },
            
    }
}
</script>

<style>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo {
    height: 200rpx;
    width: 200rpx;
    margin: 200rpx auto 50rpx auto;
}

.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}
</style>

参考文档：

https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Bitmap

https://uniapp.dcloud.net.cn/api/media/image.html#saveimagetophotosalbum

https://html2canvas.hertzen.com/documentation

源码链接：

https://download.csdn.net/download/weixin_42959829/87416296文章来源地址https://www.toymoban.com/news/detail-494124.html

到了这里，关于uniapp移动app实现将网页保存为图片到手机相册的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！