如何将图像从一个织物画布复制到另一个大织物画布的一部分？答案

【问题标题】：How do I copy image from one fabric canvas to part of another big fabric canvas?如何将图像从一个织物画布复制到另一个大织物画布的一部分？
【发布时间】：2018-12-25 05:51:10
【问题描述】：

我想将多个画布图像组合成一个巨型画布，其中包含来自不同织物画布的所有这些单独的图像排列在不同位置。换句话说，我想将多幅画布拼接成一个巨型画布。有没有一种方法可以指定要从源画布传输到目标画布的图像数据，还可以指定我希望在目标画布中传输的位置？

【问题讨论】：

标签： canvas fabricjs todataurl

【解决方案1】：

使用toJSON() 序列化画布中的所有对象。然后您可以使用fabric.util.enlivenObjects 加载到您的巨型画布中。

演示

var canvas1 = new fabric.Canvas('c1');
var canvas2 = new fabric.Canvas('c2');
var canvas3 = new fabric.Canvas('c3');
canvas1.add(new fabric.Rect({
  left: 10,
  top: 10,
  width: 50,
  height: 50,
  fill: '#4169e1'
}));
canvas2.add(new fabric.Rect({
  left: 30,
  top: 40,
  width: 50,
  height: 50,
  fill: '#113232'
}));
function mergeToCanvas(){
 var json1 = [],json2 = [];
 canvas1.getObjects().map(function(x){
   json1.push(x.toJSON());
 });
 canvas2.getObjects().map(function(x){
   json2.push(x.toJSON());
 });
 canvas3.clear();
 fabric.util.enlivenObjects(json1, function(objects) {
    canvas3.add(...objects);
 });
 fabric.util.enlivenObjects(json2, function(objects) {
    canvas3.add(...objects);
 });

}

canvas {
 border: 1px solid black;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c1" width="200" height="100"></canvas>
<canvas id="c2" width="200" height="100"></canvas>
<br>
<button onclick='mergeToCanvas()'>mergeToCanvas</button>  <br>
<canvas id="c3" width="200" height="200"></canvas>

【讨论】：