GetSubRaster 并在另一个 canvas PaperJS 中显示

Question

我是 JavaScript 和 PaperJS 的新手。我想做的是：

1) 使用光栅将图像加载到 canvas - 完成

   var imageCanvas = document.getElementById('image-canvas');
   var drawCanvas = document.getElementById('draw-canvas');
   var img = document.getElementById('img');

  imageCanvas.width = img.width;
  imageCanvas.height = img.height;
  var scope = new paper.PaperScope();

  scope.setup(drawCanvas);
  scope.setup(imageCanvas);//this will be active

  var views = [2];
  views[0] = scope.View._viewsById['image-canvas'];
  views[1] = scope.View._viewsById['draw-canvas'];
  views[0]._project.activate(); //making sure we are working on the right canvas
  raster = new paper.Raster({source:img.src, position: views[0].center});

2) 获取图像的子光栅；矩形由用户使用鼠标拖动事件绘制。但为了方便起见，假设我在位置 (10,10) 和尺寸 (100,100) 处有一个矩形 3) 获取子栅格并在其他绘图中显示预览canvas

views[1]._project.activate();// activating draw-canvas
var subras = raster.getSubRaster(new paper.Path.Rectangle(new paper.Point(10,10), new paper.Size(100,100))); //Ignore if the rectangle inside is not initialized correctly

但是，平局没有任何反应-canvas。

我也试过使用

var subrasdata = raster.getSubRaster(new paper.Path.Rectangle(new paper.Point(10,10), new paper.Size(100,100))).toDataURL();

但它给了我

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

有没有其他方法获取子栅格并将其粘贴到其他 canvas？

Answer 1

而不是 getSubRaster() I used Raster#getSubCanvas 和 Context#drawImage 粘贴到新的 canvas。所以简而言之

canvasSrc = raster.getSubCanvas(rect);
destinationCanvasContext.drawImage(canvasSrc,0,0);

GetSubRaster 并在另一个 canvas PaperJS 中显示

GetSubRaster and show in another canvas PaperJS

html

javascript

canvas

paperjs