GetSubRaster并显示在另一个画布PaperJS中

GetSubRaster and show in another canvas PaperJS

本文关键字：PaperJS 另一个 显示 GetSubRaster      更新时间：2023-09-26

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

1） 使用光栅完成将图像加载到画布

   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）和尺寸（100100）处有一个矩形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

但是，绘画画布上什么也没发生。

我也试过使用

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.

有没有其他方法可以获得子光栅并将其粘贴到其他画布中？

我没有使用getSubRaster（），而是使用Raster#getSubCanvas和Context#drawImage粘贴到新画布中。所以简而言之

canvasSrc = raster.getSubCanvas(rect);
destinationCanvasContext.drawImage(canvasSrc,0,0);
相关文章：