需求很简单代码也很简单,就是效果出不来,心好累。。。老铁们,怎么办
takePhoto() {
this.data.camera.takePhoto({
quality: 'high',
success: (res) => {
let cv = wx.createCanvasContext("abc"); //canvas-id='abc'
let w = this.data.canvasW; //<canvas>宽
let h = this.data.canvasH;
cv.drawImage(res.tempImagePath, 0, 0, w, h); //res.tempImagePath是http://tmp/xxx.jpg
cv.draw();
}
})
},
没报错,但是canvas画不了图片,开发者工具出不来效果
你在手机上测试,以手机为准
报的什么错,我这测试没问题
wxml:
<
camera
device-position
=
"back"
flash
=
"off"
binderror
=
"error"
style
=
"width: 100%; height: 300px;"
></
camera
>
<
button
type
=
"primary"
bindtap
=
"takePhoto"
>拍照</
button
>
<
canvas
canvas-id
=
"abc"
style
=
"width:100%;height:350rpx;"
></
canvas
>
js:
Page({
data: {
canvasW:350,
canvasH:350
},
onLoad:
function
(options) {
this
.camera = wx.createCameraContext()
},
takePhoto:
function
(e) {
this
.camera.takePhoto({
quality:
'high'
,
success: (res) => {
let cv = wx.createCanvasContext(
"abc"
);
//canvas-id='abc'
let w =
this
.data.canvasW;
//<canvas>宽
let h =
this
.data.canvasH;
cv.drawImage(res.tempImagePath, 0, 0, w, h);
//res.tempImagePath是http://tmp/xxx.jpg
cv.draw();
}
})
}
})
创建 canvas 绘图上下文(指定 canvasId)。在自定义组件下,第二个参数传入组件实例this,以操作组件内
<canvas/>
组件let cv = wx.createCanvasContext(
"abc"
,
this
);
//canvas-id='abc'
可以了,谢啦。老司机就是稳当,666啊