<template>
<view class="content">
<canvas id="canvas" type="2d"></canvas>
</view>
</template>
<script>
export default {
data() {
return {
canvas: null
}
},
onReady() {
const query = uni.createSelectorQuery().in(this);
query.select('#canvas').fields({ node: true, size: true }).exec(data => {
let dpr = uni.getSystemInfoSync().pixelRatio
let node = data[0]
const canvas = node.node
let width = node.width
let height = node.height
canvas.width = width * dpr
canvas.height = height * dpr
const ctx = canvas.getContext('2d')
ctx.scale(dpr, dpr)
this.canvas = canvas
console.log(this.canvas)
uni.canvasToTempFilePath({
canvas: this.canvas,
success: (response) => {
console.log(response)
},
fail(err) {
console.log(err)
}
})
})
}
}
</script>
蛋蛋隐隐作疼
- 发布：2023-03-06 12:45
- 更新：2023-03-06 12:45
- 阅读：230
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 11 22h2
HBuilderX类型： Alpha
HBuilderX版本号： 3.7.6
第三方开发者工具版本号： 微信开发者工具 1.06.2303020
基础库版本号： 2.30.2
项目创建方式： HBuilderX
示例代码：
操作步骤：
把canvas实例赋值到data中的canvas，然后在uni.canvasToTempFilePath函数中使用this.canvas
把canvas实例赋值到data中的canvas，然后在uni.canvasToTempFilePath函数中使用this.canvas
预期结果：
{errMsg: "canvasToTempFilePath:ok", tempFilePath: "http://tmp/1f5Co6Hp6Fiwc21a94b2772d38b0638f62decdab27c9.png"}
{errMsg: "canvasToTempFilePath:ok", tempFilePath: "http://tmp/1f5Co6Hp6Fiwc21a94b2772d38b0638f62decdab27c9.png"}实际结果：
{errMsg: "canvasToTempFilePath:fail Cannot read property 'width' of undefined"}
{errMsg: "canvasToTempFilePath:fail Cannot read property 'width' of undefined"}bug描述：
临时解决办法：
- 使用toRaw方法取出Proxy里面的原始数据
// 在script开始位置
import { toRaw } from 'vue'
// 在使用该变量的位置
let canvas =toRaw(this.canvas)- 在export default外面创建临时变量来保存canvas避免被proxy包裹
let out_side_canvas = null
export default {
data() {
return {
canvas: null
}
},
// 省略
0 个回复