Question

嗨，我制作了一个必须操纵一些png的应用程序：提取一些颜色，创建一些轮廓等...

每次我重复相同的过程：

等待在DOM中加载图像
创建一个新的画布，尺寸为
添加context2D
DrawImage
GetImageData
循环遍历所有数据像素
将新内容（putImageData）放入空像素数据数组（使用createImageData创建）
将其链接到新画布
在此画布上创建新图像
重复

例如：

var imgColor = new Image();
imgColor.src = this[`canvasColor${color}`].toDataURL("image/png");

// wait for load of this new color image
imgColor.onload = () => {
  this[`canvasColorAndOutline${color}`].width = width;
  this[`canvasColorAndOutline${color}`].height = height;
  var outlineAndColorCtx = this[`canvasColorAndOutline${color}`].getContext("2d");
  var dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1], // offset array
    s = this.state.outlineThickness,  // thickness
    i = 0,  // iterator
    x = 0,  // final position
    y = 0;

  // draw images at offsets from the array scaled by s
  for (; i < dArr.length; i += 2) {

    outlineAndColorCtx.drawImage(imgColor, x + dArr[i] * s, y + dArr[i + 1] * s);
  }

  // fill with color
  outlineAndColorCtx.globalCompositeOperation = "source-in";
  outlineAndColorCtx.fillStyle = "YELLOW";
  outlineAndColorCtx.fillRect(0, 0, width, height);

  // draw original image in normal mode
  outlineAndColorCtx.globalCompositeOperation = "source-over";
  outlineAndColorCtx.drawImage(imgColor, x, y);

  ///////////////
  // THIRD STEP : remove the white to keep the outline
  //////////////

  // create a new image with this color context to work on
  var imgOutline = new Image();
  imgOutline.src = this[`canvasColorAndOutline${color}`].toDataURL("image/png");
  imgOutline.onload = () => {
    var imageDataOutlineAndColor = outlineAndColorCtx.getImageData(0, 0, width, height)
    this[`canvasOutline${color}`].width = width;
    this[`canvasOutline${color}`].height = height;
    const outlineCtx = this[`canvasOutline${color}`].getContext("2d");
    const imageDataOutline = outlineCtx.createImageData(width, height);

    for (let i = 0; i < imageDataOutlineAndColor.data.length; i += 4) {

      if (
        (imageDataOutlineAndColor.data[i + 0] > 100) &&
        (imageDataOutlineAndColor.data[i + 1] > 100) &&
        (imageDataOutlineAndColor.data[i + 2] < 5) &&
        (imageDataOutlineAndColor.data[i + 3] != 0)
      ) {
        imageDataOutline.data[i + 0] = 255;
        imageDataOutline.data[i + 1] = 255;
        imageDataOutline.data[i + 2] = 0;
        imageDataOutline.data[i + 3] = 255;
      }
    }
    outlineCtx.putImageData(imageDataOutline, 0, 0);
  }
}

我的问题是：有没有一种捷径步骤7,8,9可以避免img.load时间？并直接使用上下文？因此，我将始终使用相同的上下文，只是在每个过程步骤中进行修改。在全球范围内，是否有一种优化方法？

连续画布操作优化

0 个答案: