美文网首页
使用H5+实现图片下载保存

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

作者: PharkiLL | 来源:发表于2022-09-19 11:28 被阅读0次
    <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>
    
    

    相关文章

      网友评论

          本文标题:使用H5+实现图片下载保存

          本文链接:https://www.haomeiwen.com/subject/wwamortx.html