1***@qq.com
1***@qq.com
  • 发布:2020-03-20 18:53
  • 更新:2020-05-05 16:58
  • 阅读:2733

uni.canvasToTempFilePath得到的临时路径无法在image组件上显示

分类:uni-app

为什么uni.canvasToTempFilePath得到的临时路径无法在image组件上显示, ios和安卓都不行, Hbuilder版本2.5.1

<template>  
    <view class="body">  
        <canvas style="width: 346px; height: 196px;" canvas-id="myCanvas"></canvas>  
        <image :src="coverUrl" style="width: 346px; height: 196px;"></image>  
        <button @tap="drawCanvas">drawCanvas</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                coverUrl: '',  
                name: 'Jack'  
            }  
        },  
        onPageScroll: () => {  
            console.log('onPageScroll')  
        },  
        methods: {  
            drawCanvas() {  
                const ctx = uni.createCanvasContext('myCanvas')  
                uni.chooseImage({  
                    success: (res) => {  
                        uni.getImageInfo({  
                            src: res.tempFilePaths[0],  
                            success: (info) => {  
                                console.log('获取图片信息', info)  
                                const {  
                                    width,  
                                    height,  
                                    path  
                                } = info  
                                let sWidth = width > height ? (height / (196 / 346)) : width  
                                let sHeight = width <= height ? (width * (196 / 346)) : height  
                                if (sWidth > width) {  
                                    sWidth = width  
                                    sHeight = (width * (196 / 346))  
                                }  
                                sWidth = parseInt(sWidth)  
                                sHeight = parseInt(sHeight)  
                                const sx = parseInt((width - sWidth) / 2) // 居中  
                                const sy = parseInt((height - sHeight) / 2) // 居中  
                                ctx.drawImage(path, sx, sy, sWidth, sHeight, 0, 0, 346, 196)  
                                ctx.drawImage('/static/play.png', 149, 74, 48, 48)  
                                // ctx.draw()  
                                uni.canvasToTempFilePath({  
                                    x: 100,  
                                    y: 200,  
                                    width: 50,  
                                    height: 50,  
                                    destWidth: 100,  
                                    destHeight: 100,  
                                    canvasId: 'myCanvas',  
                                    success: (res) => {  
                                        // 在H5平台下,tempFilePath 为 base64  
                                        console.log(res.tempFilePath)  
                                        this.coverUrl = res.tempFilePath  
                                        console.log('this.coverUrl', this.name, this.coverUrl)  
                                    }  
                                })  
                            }  
                        })  
                    }  
                })  
            }  
        }  
    }  
</script>  

<style lang="scss">  
    page {  
        height: 100%;  
        background-color: #07C160;  
    }  

    .body {  
        height: 100%;  
        // background-color: $--color-body-bg;  
        background-color: #0066CC;  
        // padding-bottom: 88upx;  
        padding-top: var(--status-bar-height);  
    }  
</style>  
2020-03-20 18:53 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者) - CodeFun

解决了,uni.canvasToTempFilePath方法写在CanvasContext.draw的回调里面

  • 栉风

    h5上也无法显示啊

    <image :src="src"></image>

    ctx.draw(() => {

    uni.canvasToTempFilePath({

    canvasId: 'share',

    fileType: 'png',

    success: xhr => {

    this.src = xhr.tempFilePath

    }

    })

    })

    2023-03-28 21:10

9***@qq.com

9***@qq.com

请问可以附个代码么谢谢

该问题目前已经被锁定, 无法添加新回复