为什么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>
栉风
h5上也无法显示啊
<image :src="src"></image>
ctx.draw(() => {
uni.canvasToTempFilePath({
canvasId: 'share',
fileType: 'png',
success: xhr => {
this.src = xhr.tempFilePath
}
})
})
2023-03-28 21:10