javascript - 如何使用 Ionic 中的 Canvas 绘制照片，然后在照片顶部绘制形状？

Question

有很多例子展示了如何在 Canvas 上绘制东西，但是，我的问题略有不同 - 我想将照片加载到内存中，在照片上的精确坐标上绘制形状，然后绘制/缩放照片到 Canvas 上。不知道从哪里开始。是否有任何相关的库可以与 ionic 一起使用，让您可以做到这一点？

编辑 1 ~ 我现在基本上可以正常工作了:

私有(private)属性:

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

ionViewDidEnter():

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

更新 Canvas ():

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);

这会将照片然后矩形绘制到 Canvas 上，但是，生成的图像太大而无法适应屏幕，因此我需要在所有绘制完成后缩放 Canvas 。我用 ctx.scale 尝试了此操作，但无论我指定哪个值， Canvas 都保持相同的大小。

Answer 1

您无法直接在照片上绘图，但您可以创建一个与照片大小相同的屏幕外 Canvas ，将照片绘制到上面，然后在上面绘制形状。

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

// 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);
}