多个画布分成一个div并将它们全部组合成一个画布

Question

我已将动态创建的画布附加到div中。我有一个机制，允许这些画布在div内自由移动。  （每个画布实际上是一个动态渲染的象形图）

现在，一旦用户完成添加象形图，我想使用外部API以图像的形式在某个社交网络上发布该div。

我研究了他们说：你不能将div导出为图像。所以我想为什么不将这些画布合二为一，然后使用canvas.todataurl（）

请将孩子指向正确的方向，因为我是html5的新手

Answer 1

解决方案的步骤：

• 计算所有画布的装饰盒。
• 创建一个大小相同的新画布。
• 在画布上复制具有正确偏移的所有画布。
• 使用toDataUrl检索图像

编辑：小解释：边界框只是可视化包含某些内容的矩形。

在这里，我们希望所有画布的边界框 - 包含所有画布的最小矩形 - 知道在一个画布中复制它们所需的大小。

要在屏幕上获取画布的边界框，我们使用神奇的getBoundingClientRect（）： https://developer.mozilla.org/fr/docs/DOM/element.getBoundingClientRect
它返回包含html元素的rect的left，top，width，height。

所以我们先从第一个画布的边界框开始，然后用第二个画布的边界框（调整左边，顶部或宽度或高度）等扩展它，所以最后我们有所有画布的边界框。

在我们创建组合画布之后，只需将画布复制到正确的位置。

http://jsbin.com/eZiDUbo/1/

和图标相同：http://jsbin.com/eZiDUbo/4/

  // compute bounding rect for all canvases :
  var globalRect  = canvasInfo[0].bcr; 
  // rect is read-only, let's change this :
  globalRect = { left : globalRect.left, top : globalRect.top, 
                  width : globalRect.width, height : globalRect.height };

  for (i=1; i<canvasCount; i++) {
    var  br = canvasInfo[i].bcr;
    expandRect(globalRect, br) ;
  }

  // create new canvas
  var newCanvas = document.createElement('canvas');
  newCanvas.width = globalRect.width ;
  newCanvas.height = globalRect.height ;
  var newCtx = newCanvas.getContext('2d');

  // print all canvases on the new canvas
  for (i=0; i<canvasCount; i++) {
    var  cv = canvasInfo[i].cv;
    var br = canvasInfo[i].bcr ;
    newCtx.drawImage(cv, br.left - globalRect.left, br.top-globalRect.top);
  }

  document.body.appendChild(newCanvas);

expand rect就像：

  // ----------------------------------
  // ----------------------------------

  // expands [rect] bounding rectangle with [nRect]. 
  // so that rect contains nRect.
  function expandRect (rect, nRect) {
    // check left
    if (nRect.left<rect.left) {
      rect.width +=     rect.left - nRect.left;
      rect.left=nRect.left;
    }
    // check top
    if (nRect.top<rect.top) {
      rect.height += rect.top - nRect.top ; 
      rect.top=nRect.top;  
    }
    // check right
    if ( ( nRect.left + nRect.width ) >  ( rect.left + rect.width ) ) {
      rect.width +=  ( nRect.left + nRect.width )- (rect.left + rect.width);      
    }
    // check bottom
    if ( (nRect.top + nRect.height) > (rect.top + rect.height ) ) {
      rect.height +=  (nRect.top + nRect.height) - (rect.top + rect.height ) ;      
    }  
  }

Answer 2

您必须创建一个包含组合图层的画布。然后，从每个图层，您必须使用context.getImageData并使用putImageData将结果放在最终画布中。

最后，在组合画布上使用toDataUrl()。