Javascript 将多个画布合并到一个div中，并将它们合并到一个画布中

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

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

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

---

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

你必须创建一个包含组合层的画布。然后，从每个层开始，您必须使用并将结果放入最终画布中

---

最后，在组合画布上使用

toDataUrl（）

。

您必须创建一个包含组合层的画布。然后，从每个层开始，您必须使用并将结果放入最终画布中

---

最后，在组合画布上使用

toDataUrl（）

。

解决方案的步骤：

• 计算所有画布的布丁框
• 创建该大小的新画布
• 复制画布上具有右偏移的所有画布
• 使用toDataUrl检索图像

编辑：小说明：边界框只是视觉上包含某些内容的矩形

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

要在屏幕上获取画布的边界框，我们使用神奇的getBoundingClientRect（）：
它返回包含html元素的矩形的left、top、width和height

因此，我们从第一张画布的边界框开始，然后用第二张画布的边界框展开（调整左、上、宽或高），等等。。所以在最后我们有了所有画布的边界框

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

图标也是如此：

//计算所有画布的边界矩形：
var globalRect=canvasInfo[0].bcr；
//rect是只读的，让我们更改此选项：
globalRect={left:globalRect.left，top:globalRect.top，
宽度：globalRect.width，高度：globalRect.height}；
对于（i=1；i求解步骤：


计算所有画布的布丁框
创建该大小的新画布
复制画布上具有右偏移的所有画布
使用toDataUrl检索图像

编辑：小说明：边界框只是视觉上包含某些内容的矩形

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

要在屏幕上获取画布的边界框，我们使用神奇的getBoundingClientRect（）：


它返回包含html元素的矩形的left、top、width和height

因此，我们从第一张画布的边界框开始，然后用第二张画布的边界框展开（调整左、上、或宽度或高度），等等，所以最后我们得到了所有画布的边界框

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


图标也是如此：


//计算所有画布的边界矩形：
var globalRect=canvasInfo[0].bcr；
//rect是只读的，让我们更改此选项：
globalRect={left:globalRect.left，top:globalRect.top，
宽度：globalRect.width，高度：globalRect.height}；
对于（i=1；ia快速问题：有没有一种方法可以在html5画布中使用图标？基于css的图标？图标只是小图像，所以是的。如果不太麻烦的话，您能举一个在画布中放置图标的快速示例吗？您必须确保图像已加载，请看这里：如果图标不是来自您的座位，请注意同源策略e:toDataUrl将返回一个空图像。让我们快速问一个问题：有没有一种方法可以在html5画布中使用图标？基于css的图标？图标只是小图像，所以是的。如果不太麻烦的话，你能举一个在画布中放置图标的快速示例吗？你必须确保图像已加载，看这里：小心同源pol如果图标不是来自您的站点：toDataUrl将返回一个空图像。让我们来看看
  // 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);

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

  // 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 ) ;      
    }  
  }