在使用 Android / Ionic 相机后,如果 Canvas 不更新,可能是因为相机返回的图像数据没有实时更新到 Canvas 上。以下是一个解决方法的示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D;
constructor() {}
ionViewDidEnter() {
this.canvas = document.getElementById('canvas') as HTMLCanvasElement;
this.ctx = this.canvas.getContext('2d');
}
takePicture() {
const options = {
quality: 100,
destinationType: Camera.DestinationType.DATA_URL,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
sourceType: Camera.PictureSourceType.CAMERA,
};
navigator.camera.getPicture((imageData) => {
this.updateCanvas(imageData);
}, (error) => {
console.log('Camera error: ' + error);
}, options);
}
updateCanvas(imageData) {
const img = new Image();
img.src = 'data:image/jpeg;base64,' + imageData;
img.onload = () => {
this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height);
};
}
}
在上面的代码中,takePicture()
函数使用 Cordova 插件获取相机图像数据,并调用 updateCanvas()
函数将图像绘制到 Canvas 上。注意在 updateCanvas()
函数中,通过监听 img.onload
事件来确保图像加载完成后再进行绘制。
这样,在调用相机拍照后,Canvas 将实时更新为拍摄的图像。