Question

我想保存并打印我的画布“倍增”，以便最终结果是图像4画布宽和2画布高。我想知道是否有可能：

“乘以”画布4宽2高，以便结果
画布的大小为原始画布的4 x 2，但只有原始画布大小的部分可编辑，然后将该部分“复制/镜像”到画布的其余部分，以便它创建了8张图片。
等;也许你会有一个更明智的方法来实现这一目标; 基本上我希望能够为同一个图像中的8个“编辑”一次。

为什么吗

我打算在我的打印对话框中尝试缩放我的画布，但是我只能打印它，每页打印超过6张或少于9张。我还认为有一个坚实的图像会更干净。

视觉效果

以下是我要保存和打印的内容：

代码

var activeCanvas, front, back, canvas1, canvas2;
$(document).ready(function() {

  canvas1 = new fabric.Canvas('front');
  canvas2 = new fabric.Canvas('back');
  canvas1.setHeight(360);
  canvas1.setWidth(208);
  canvas2.setHeight(360);
  canvas2.setWidth(208);
  changeView(1);

  var padding = 20;
  canvas1.on('object:moving', onObjectMoving);
  canvas2.on('object:moving', onObjectMoving);

  function onObjectMoving(e) {
    var obj = e.target;

    // if object is too big ignore
    if (obj.currentHeight > obj.canvas.height - padding * 2 ||
      obj.currentWidth > obj.canvas.width - padding * 2) {
      return;
    }
    obj.setCoords();

    // top-left corner
    if (obj.getBoundingRect().top < padding ||
      obj.getBoundingRect().left < padding) {
      obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top + padding);
      obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left + padding);
    }

    // bot-right corner
    if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height - padding ||
      obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width - padding) {
      obj.top = Math.min(
        obj.top,
        obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - padding);
      obj.left = Math.min(
        obj.left,
        obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - padding);
    }
  };
});

function changeView(value) {
  if (value == 1) {
    activeCanvas = canvas1;
    $('#front').parent().css('display', 'block');
    $('#back').parent().css('display', 'none');
  }

  if (value == 2) {
    activeCanvas = canvas2;
    $('#front').parent().css('display', 'none');
    $('#back').parent().css('display', 'block');
  }
}

// Add Text 
function dropText() {
  var text = new fabric.Text('Hello', {
    top: 20,
    left: 20,
  });
  activeCanvas.add(text);
}

// Save
function download(url, name) {
  // make the link. set the href and download. emulate dom click
  $('<a>').attr({
    href: url,
    download: name
  })[0].click();
}

function downloadFabric(canvas, name) {
  //  convert the canvas to a data url and download it.
  download(activeCanvas.toDataURL({
    multiplier: 2
  }), name + '.png');
}

// Print
function printCanvas() {
  var dataUrl = document.getElementById('activeCanvas').toDataURL();
  var windowContent = '<!DOCTYPE html>';
  windowContent += '<html>'
  windowContent += '<head><title>Print canvas</title></head>';
  windowContent += '<body>'
  windowContent += '<img src="' + dataUrl + '" onload=window.print();window.close();>';
  windowContent += '</body>';
  windowContent += '</html>';
  var printWin = window.open('', '', 'width=340,height=260');
  printWin.document.open();
  printWin.document.write(windowContent);
}

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<button onclick="changeView(1);">Front</button>
<button onclick="changeView(2);">Back</button>
<button onclick="dropText();">Add Text</button>
<button onclick="downloadFabric()">Save</button>
<button onclick="">Print</button>

<div style="text-align: center">
  <canvas id="front"></canvas>
  <canvas id="back"></canvas>
</div>

Answer 1

我认为最好的解决方案是创建一个4x2画布的网格，其中除了第一个之外的所有画布最初都是不可见的。然后，当您要打印时，克隆画布 - 您可以将画布转换为JSON，如下所示：

var json = JSON.stringify(canvas);

然后将JSON加载到任意数量的画布中：

canvas2.loadFromJSON(json);

Here's一个非常简单的小提琴。您需要一些额外的CSS才能正确布局画布。

Answer 2

push Run code snippet！

你应该生成类似的东西，并在css上进行更多的打印工作请注意，此代码不是您可以在生产中使用的最终代码，您需要正确地将css值用于打印

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
<style type="text/css">

.rTable {
		    	display: table;
		    	width: 100%;/* =208*4 */
		}
		.rTableRow {
		    	display: table-row;
		}
		.rTableHeading {
		    	display: table-header-group;
		    	background-color: #ddd;
		}
		.rTableCell, .rTableHead {
		    	display: table-cell;
		    	padding: 3px 10px;
		    	border: 1px solid #999999;
				width:208pt;/*use values in pt !*/
			  height:360pt;
		}
		.rTableHeading {
		    	display: table-header-group;
		    	background-color: #ddd;
		    	font-weight: bold;
		}
		.rTableFoot {
		    	display: table-footer-group;
		    	font-weight: bold;
		    	background-color: #ddd;
		}
		.rTableBody {
		    	display: table-row-group;
		}
		body{
			margin:0;
		}		
  </style>
  <title>Document</title>
 </head>
 <body >
  
 <!-- <script src="../js/jquery.js"></script>-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script> -->

				 <div class="rTable">
					<div class="rTableRow">
						<div class="rTableRow">
							<div class="rTableCell"><canvas id="front"></canvas><canvas id="back"></canvas></div>
							<div class="rTableCell"><canvas id="front"></canvas><canvas id="back"></canvas></div>
							<div class="rTableCell"><canvas id="front"></canvas><canvas id="back"></canvas></div>
							<div class="rTableCell"><canvas id="front"></canvas><canvas id="back"></canvas></div>
						</div>
						<div class="rTableRow">
							<div class="rTableCell"><canvas id="front"></canvas><canvas id="back"></canvas></div>
							<div class="rTableCell"><canvas id="front"></canvas><canvas id="back"></canvas></div>
							<div class="rTableCell"><canvas id="front"></canvas><canvas id="back"></canvas></div>
							<div class="rTableCell"><canvas id="front"></canvas><canvas id="back"></canvas></div>
						</div>
					</div>
				</div>
				<script type="text/javascript">
<!--

  

$('canvas#back').each(function(index) {
    //console.log(index + ': ' + $(this).text());
	context=$(this).get(0).getContext('2d');

	context.font = 'italic 20pt Calibri';
	context.fillText('Hello!', 20, 20);
});



//-->
</script>
 </body>
</html>

如何在保存和打印时倍增画布？

2 个答案: