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

2022-09-19  本文已影响0人  PharkiLL
<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>

上一篇 下一篇

猜你喜欢

热点阅读