使用H5+实现图片下载保存

<script module="renderScript" lang="renderjs">
    import html2canvas from 'html2canvas';

    export default {
        data() {
            return {}
        },
        methods: {
            downloadFile(e, ownerVm) {
                const dom = this.$refs.showAreaContainer
                html2canvas(dom, {
                    width: dom.clientWidth,
                    height: dom.clientHeight,
                    scrollY: 0,
                    scrollX: 0
                }).then(canvas => {
                    ownerVm.callMethod('saveDomFile', canvas.toDataURL('image/png'))
                })
            }
        }
    }
</script>
<script>
  export default {
  methods: {
    saveDomFile(base64Img) {
                const bitmap = new plus.nativeObj.Bitmap("test")
                bitmap.loadBase64Data(
                    base64Img,
                    () => {
                        const url = "_doc/" + new Date().getTime() + ".png"
                        bitmap.save(
                            url, {
                                overwrite: true
                            },
                            i => {
                                uni.saveImageToPhotosAlbum({
                                    filePath: url,
                                    success: () => {
                                        uni.showToast({
                                            title: "图片保存成功",
                                            icon: "none"
                                        })
                                        bitmap.clear() 
                                    }
                                })
                            },
                            () => {
                                uni.showToast({
                                    title: "图片保存失败",
                                    icon: "none"
                                })
                                bitmap.clear() 
                            }
                        )
                    },
                    () => {
                        uni.showToast({
                            title: "图片保存失败",
                            icon: "none"
                        })
                        bitmap.clear() 
                    }
                )
            },
        }
}
</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容