javascript - 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)获取子栅格并在其他drawcanvas中显示预览

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()我用过Raster#getSubCanvas和 Context#drawImage 粘贴到新 Canvas 中。简而言之

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