<template>
<view class="container">
<button type="primary" @click="chooseImage">导入图片</button>
<canvas canvas-id="firstCanvas"
style="width: 100px; height: 100px;"></canvas>
</view>
</template>
<script setup>
// 导入图片
function chooseImage() {
const firstCanvas = uni.createCanvasContext('firstCanvas')
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: res => {
let previewPicSrc = res.tempFilePaths[0]
firstCanvas.drawImage(previewPicSrc, 0, 0, 100,
100)
firstCanvas.draw(false, function() {
// 获取canvas数据
setTimeout(() => {
getImageData()
}, 0)
})
}
})
}
// 获取canvas数据
function getImageData() {
console.log('getImageData')
uni.canvasGetImageData({
canvasId: 'firstCanvas',
x: 0,
y: 0,
width: 100,
height: 100,
success: res => {
console.log('getImageData success', res)
},
fail: res => {
console.log('getImageData fail', res)
}
})
}
</script>
1***@qq.com
- 发布：2021-11-15 16:49
- 更新：2021-12-14 16:51
- 阅读：1287
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 3.2.13
手机系统： Android
手机系统版本号： Android 10
手机厂商： vivo
手机机型： x50 pro+
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
使用直接报错
使用直接报错
预期结果：
uni.canvasGetImageData 进入 success回调函数
uni.canvasGetImageData 进入 success回调函数
实际结果：
uni.canvasGetImageData 进入 fail回调函数
uni.canvasGetImageData 进入 fail回调函数
bug描述：
App使用 uni.canvasGetImageData 报错 require is not defined
H5页面正常使用
如 manifest.json 使用vue2版本编译也不会有此问题
