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

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

请问可以附个代码么谢谢

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

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容