画像のオブジェクトURLをCanvas要素に描写する
1
Capacitorのカメラプラグインでの動作記録
image2.onloadファンクションでアロー関数を使う場合
export class Tab3Page {
@ViewChild('canvas') public canvas: ElementRef;
public cx: CanvasRenderingContext2D;
constructor(
) {}
ionViewDidEnter(){
this.startCamera();
const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
this.cx = canvasEl.getContext('2d');
}
async startCamera(){
const imageFunc = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri,
}).then((image) => {
// image.webPath will contain a path that can be set as an image src.
// You can access the original file using image.path, which can be
// passed to the Filesystem API to read the raw data of the image,
// if desired (or pass resultType: CameraResultType.Base64 to getPhoto)
var imageUrl = image.webPath;
console.log(imageUrl);
let image2:any = new Image();
image2.onload = () => {
console.log(image2.width);
console.log(image2.height);
this.cx.canvas.width = image2.width;
this.cx.canvas.height = image2.height;
aa.drawImage(image2, 0, 0);
console.log('done');
}
image2.src = imageUrl;
});
};
よく乗っているもの
export class Tab3Page {
@ViewChild('canvas') public canvas: ElementRef;
public cx: CanvasRenderingContext2D;
constructor(
) {}
ionViewDidEnter(){
this.startCamera();
const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
this.cx = canvasEl.getContext('2d');
}
async startCamera(){
const imageFunc = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri,
}).then((image) => {
// image.webPath will contain a path that can be set as an image src.
// You can access the original file using image.path, which can be
// passed to the Filesystem API to read the raw data of the image,
// if desired (or pass resultType: CameraResultType.Base64 to getPhoto)
var imageUrl = image.webPath;
console.log(imageUrl);
let canvasVar:any =this.cx;
let image2:any = new Image();
let aa:any =this.cx;
image2.onload = function() {
canvasVar.canvas.width = image2.width;
canvasVar.canvas.height = image2.height;
aa.drawImage(image2, 0, 0);
console.log('done');
}
image2.src = imageUrl;
});
};
bind(this)を使ってこれでもいく
export class Tab3Page {
@ViewChild('canvas') public canvas: ElementRef;
public cx: CanvasRenderingContext2D;
constructor(
) {}
ionViewDidEnter(){
this.startCamera();
const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
this.cx = canvasEl.getContext('2d');
}
async startCamera(){
const imageFunc = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri,
}).then((image) => {
// image.webPath will contain a path that can be set as an image src.
// You can access the original file using image.path, which can be
// passed to the Filesystem API to read the raw data of the image,
// if desired (or pass resultType: CameraResultType.Base64 to getPhoto)
var imageUrl = image.webPath;
console.log(imageUrl);
let canvasVar:any =this.cx;
let image2:any = new Image();
let aa:any =this.cx;
image2.onload = function() {
this.cx.canvas.width = image2.width;
this.cx.canvas.height = image2.height;
aa.drawImage(image2, 0, 0);
console.log('done');
}.bind(this)
image2.src = imageUrl;
});
};https://stackoverflow.com/questions/30824756/javascript-saving-this-variable-inside-of-image-onload
