<template>
<view>
<view><canvas id="myCanvas" canvas-id="myCanvas" :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }"></canvas></view>
<view><image :src="photo"></image></view>
</view>
</template>
<script>
export default {
data() {
return {
windowWidth: '',
windowHeight: '',
photo: ''
};
},
onLoad() {
let res = getApp().globalData.systemInfo;
this.windowWidth = res.windowWidth;
this.windowHeight = (res.windowHeight - 80) / 5;
},
onReady() {
this.testCtx();
},
methods: {
testCtx() {
const ctx = uni.createCanvasContext('myCanvas', this);
ctx.moveTo(10, 10);
ctx.rect(10, 10, 100, 50);
ctx.lineTo(110, 60);
ctx.stroke();
ctx.draw();
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function(res) {
this.photo='https://img2.woyaogexing.com/2022/07/17/a9a81acfe3860588.jpg';
// this.photo = res.tempFilePath;
// this.photo = 'file:/' + plus.io.convertLocalFileSystemURL(res.tempFilePath);
// console.log(this.photo);
}
});
}
}
};
</script>
<style>
image {
background-color: #ccf;
width: 400px;
height: 500px;
}
</style>
y***@163.com
- 发布：2022-07-19 14:32
- 更新：2022-07-19 17:11
- 阅读：659
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 21H1
HBuilderX类型： 正式
HBuilderX版本号： 3.4.18
手机系统： Android
手机系统版本号： Android 12
手机厂商： OPPO
手机机型： OPPO FINX X2
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
一开始使用uni.createCanvasContext进行绘图，绘制完成后导出图片，然后在image标签的src属性中填写路径查看图片
一开始使用uni.createCanvasContext进行绘图，绘制完成后导出图片，然后在image标签的src属性中填写路径查看图片
预期结果：
在image中正常展示图片
在image中正常展示图片
实际结果：
在image中无法显示图片
在image中无法显示图片
bug描述：
发现uni.canvasToTempFilePath的成功回调不能修改image的src属性
FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866
success: function(res) 改为 success: (res) =>
y***@163.com (作者)
可以了，谢谢
2022-07-20 09:03