3***@qq.com
3***@qq.com
  • 发布:2024-06-06 21:22
  • 更新:2024-06-06 21:22
  • 阅读:37

用html2canvas将元素转为图片后,插入的base64图片很模糊

分类:uni-app

我在元素里面插入了base64图片,使用html2canvas将元素转为图片后插入的这个base64图片很模糊,有大佬知道怎么解决么,用dpi和scale只能让字清晰,调再大图片都是模糊的

<script module="canvas" lang="renderjs">  
    import html2canvas from 'html2canvas';  
    export default {  
        data() {  
            return {}  
        },  
        methods: {  
            downImg(e, ownerVm) {  
                window.scrollTo(0, 0) //注意这里必须设置为顶部不然会出现图片不全  
                html2canvas(document.querySelector('#canvasImg'), {  
                    allowTaint: true, //是否允许跨域图像渲染画布  
                    useCORS: true, //是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题  
                    scale: 2, // 处理模糊问题  
                    dpi: 30000 ,// 处理模糊问题  
                }).then(function(canvas) {  
                    // var context = canvas.getContext('2d')  
                    // console.log("context", context)  
                    // // 这段代码去除锯齿,会使图片变得清晰,结合scale放大处理  
                    // context.mozImageSmoothingEnabled = false;  
                    // context.webkitImageSmoothingEnabled = false;  
                    // context.msImageSmoothingEnabled = false;  
                    // context.imageSmoothingEnabled = false;  

                    ownerVm.callMethod('receive', canvas.toDataURL('image/jpeg', 1.0))  
                }).catch(err => {  
                    ownerVm.callMethod('showToast', `生成图片失败,请重试,${err}`)  
                })  
            },  
        }  
    }  
</script>  

<script>  
    import {base64ToPath,pathToBase64} from 'image-tools'  
    export default {  
        data() {  
            return {  

            }  
        },  
        onLoad: function () {   

        },  
        methods: {  
        //提示  
        showToast(content) {  
            uni.showToast({  
                title: content,  
                icon: 'none',  
                duration: 2000,  
            });  
        },  

        // 将base64位的图片路径转换为临时路径  
        receive(val) {  
            this.loadingNum = 0  
            this.isLoading = true  
            //去除base64位中的空格  
            this.imgUrl= val.replace(/[\r\n]/g, '');   
            //将base64位的图片路径转换为临时路径  
            setTimeout(() => {  
                const url= this.imgUrl;  
                base64ToPath(url).then(path => {  
                        this.saveImage(path,url)  
                    })  
                    .catch(error => {  
                        console.error('图片的临时路径转换出错了:', error);  
                    });  
            }, 500);  
        },  

        // 保存图片到手机相册  
        saveImage(path,imgUrl) {  
            uni.saveImageToPhotosAlbum({  
                filePath:path, // 需要临时文件路径,否则base64无法保存  
                success: () => {  
                    // this.showToast('保存图片到本地相册成功')  
                    this.loadingNum = 1  
                    setTimeout(() =>{  
                        this.isLoading = false;  
                    }, 1000);  
                },  
                fail: (err) => {  
                    this.isLoading = false;  
                    this.showToast(err+'保存图片到本地相册失败')  
                }  
            });  
        },  

        },  
    }  
</script>
2024-06-06 21:22 负责人:无 分享
已邀请:

要回复问题请先登录注册