如何使用Ionic的画布在照片顶部绘制照片然后绘制形状？

Question

有很多示例展示了如何在画布上绘制东西，但是，我的问题略有不同-我想将照片加载到内存中，在照片上的精确坐标上绘制形状，然后将照片绘制/缩放到画布上。帆布。 不知道从哪里开始。 我可以在ionic上使用任何相关的库来执行此操作吗？

编辑 1〜我现在大部分工作了：

私人财产：

@ViewChild('mainCanvas') canvasEl: ElementRef;
private _CANVAS: any;
private _CONTEXT: any;

ionViewDidEnter（）：

this._CANVAS = this.canvasEl.nativeElement;
this._CONTEXT = this._CANVAS.getContext('2d');

updateCanvas（）：

var img = new Image();
const ctx = this._CONTEXT;
const canvas = this._CANVAS;

ctx.clearRect(0, 0, this._CANVAS.width, this._CANVAS.height);
ctx.fillStyle = "#ff0000";

img.onload = (() => {
  img.width = img.width;
  img.height = img.height;
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  ctx.lineWidth = 8;
  ctx.strokeStyle = "#FF0000";
  ctx.strokeRect(100, 100, 400, 400);
  ctx.scale(0.5, 0.5); // this does nothing
});

img.src = (<any>window).Ionic.WebView.convertFileSrc(path);

这会先将照片绘制出来，然后再将矩形绘制到画布上，但是，生成的图像太大而无法容纳在屏幕上，因此我需要在所有绘制完成后缩放画布。 我使用ctx.scale进行了尝试，但是无论我指定哪个值，画布都保持相同的大小。

Answer 1

您不能直接在照片上绘制，但是可以做的是创建一个与照片大小相同的屏幕外画布，在其上绘制照片，然后在顶部绘制形状。

然后可以将结果绘制到您的主画布上，例如

// Empty image for example purposes
const img = new Image(100, 100);

// Creating a canvas for example purposes
const mainCanvas = document.createElement('canvas');
const mainCtx = mainCanvas.getContext('2d');

// Create an offscreen buffer
const bufferCanvas = document.createElement('canvas');
const bufferCtx = bufferCanvas.getContext('2d');

// Scale the buffer canvas to match our image
bufferCanvas.width = img.width;
bufferCanvas.height = img.height;

if (bufferCtx && mainCtx) {
  // Draw image to canvas
  bufferCtx.drawImage(img, 0, 0);
  // Draw a rectangle in the center
  bufferCtx.fillRect(img.width / 2 - 5, img.height / 2 - 5, 10, 10);

  // Draw the buffer to the main canvas
  mainCtx.drawImage(bufferCanvas, 0, 0);
}