javascript Paper.js `getImageData/putImageData`带alpha通道

0g0grzrc 于 2023-04-10 发布在 Java

关注(0)|答案(2)|浏览(114)

我使用Paper.js canvas作为源，使用一个简单的canvas作为目标。基本上是通过getImageData复制可见图像的一部分，并使用putImageData将其粘贴到目标canvas中。
粘贴的图像没有alpha通道。例如，当复制的区域只包括对象的一部分，其余部分应该是空的。我尝试为两个函数添加{ colorSpace: 'display-p3' }，但我看到颜色空间仍然是srgb，仍然没有alpha通道。
是否可以用getImageData复制/粘贴图像数据，并保留Paper.js的alpha通道？
下面是复制/粘贴代码。

const rasterTemp = RasterObject.rasterize() // This to reset all the transformations.

const subRasterTemp = rasterTemp.getSubRaster(new data.$paper.Rectangle({
  point: [0, 0], // These and other coordinates are just for the sake of demonstration
  size: [100, 100],
}))

const imageData = subRasterTemp.getImageData(new data.$paper.Rectangle({
  point: [0, 0],
  size: [100, 100],
}), { colorSpace: 'display-p3' })

canvasTargetContext.putImageData(imageData, 0, 0)

JavaScript

来源：https://stackoverflow.com/questions/75953762/paper-js-getimagedata-putimagedata-with-alpha-channel

2条答案

按热度按时间

lc8prwob1#

我不能解释为什么这样做，但是一个解决方法是先在一个临时画布上绘制图像数据，然后在目标画布上绘制这个临时画布。
这里有一个fiddle演示了一个可能的解决方案。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Debug Paper.js</title>
  <script src="https://unpkg.com/acorn"></script>
  <script src="https://unpkg.com/paper"></script>
  <style>
    html,
    body {
      margin: 0;
      overflow: hidden;
      height: 100%;
    }

    main {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-top: 20px;
    }

    canvas {
      border: 1px solid;
    }

    p {
      text-align: center;
    }
  </style>
</head>
<body>

<main>
  <div>
    <canvas id="canvas" resize></canvas>
    <p>paper.js canvas</p>
  </div>
  <div>
    <canvas id="target" resize></canvas>
    <p>target canvas</p>
  </div>
</main>

<script>
  // Setup Paper.js
  paper.setup('canvas');

  // Create a circle.
  const circle = new paper.Path.Circle({
    center: paper.view.center,
    radius: 50,
    fillColor: 'orange',
  });

  // Rasterize the drawing.
  const raster = paper.project.activeLayer.rasterize();
  // Get the image data from this raster.
  const imageData = raster.getImageData();

  // Get the target canvas.
  const targetCanvas = document.getElementById('target');
  const context = targetCanvas.getContext('2d');
  // Draw a black rectangle on it so that we can see the transparency.
  context.fillRect(0, 0, 150, 50);
  putImageDataWithAlpha(targetCanvas, imageData);

  function putImageDataWithAlpha(canvas, imageData) {
    // Create a temporary canvas to draw the image data on it.
    const tmpCanvas = document.createElement('canvas');
    // Make it the same size as the given canvas.
    tmpCanvas.width = canvas.width;
    tmpCanvas.height = canvas.height;
    const tmpContext = tmpCanvas.getContext('2d');
    // Draw the image data on it.
    tmpContext.putImageData(imageData, 0, 0);
    // Then draw this temporary canvas on the given canvas.
    canvas.getContext('2d').drawImage(tmpCanvas, 0, 0);
    // Remove the temporary element.
    tmpCanvas.remove();
  };
</script>
</body>
</html>

赞(0）回复(0）举报 2023-04-10

iq3niunx2#

好吧，实际上不是这样的。透明度被保留了。我只是在视觉上得到了一个印象，它不是。但当我简单地将画布保存为图像时，我看到了透明度。

赞(0）回复(0）举报 2023-04-10