Fabric.js：调整画布大小并继续工作

Question

我正在处理用户上传的 Fabric.js 操作图像。

这是应用程序的工作原理

上传的图像可以在整个画布（灰色区域）上移动和处理。 完成后，我只需要中间区域。

用户单击save ，目前我将绿色区域保存为图像，但我还需要将整个画布调整为仅绿色区域。

我尝试更改整个画布的width和height ，然后redrawAll() ，但画布位于左下方，只有一小部分工作区域可见，其余部分为空灰色。

是否可以拍摄绿色区域的快照并继续在画布上工作？

谢谢

Answer 1

您应该广泛使用 viewportTransform。

让我们举个例子：你有一个 1000x1000 的画布元素，你想在 500x500 像素的区域上工作。

您使用绿色图像或 500x500 的绿色矩形作为背景图像设置绿色区域，左上角为 0,0。 然后将织物画布的 viewportTransform 设置为 [1, 0, 0, 1, 250, 250] 这将使您的画布平移到该灰色边框的右下角。

什么时候保存，您有 2 个选择：

1）设置一个viewportTransform，让你覆盖原始画布的所有内容并导出到dataurl

2）您创建一个 500x500px 的屏幕外画布，将对象移动到那里，而无需触摸新画布缩放和平移（视口变换）并将该画布导出到 dataUrl

该代码段有一些示例，但您需要完全了解如何使用和检查 fabricCanvas 的 toDataUrl 选项。

 var butt = document.getElementById('butt'); butt.onclick = function() { canvas.viewportTransform = [2, 0, 0, 2, 0, 0]; var img = document.getElementById('export'); img.src = canvas.toDataURL() canvas.viewportTransform = [1, 0, 0, 1, 250, 250]; canvas.renderAll(); } var canvas = new fabric.Canvas('c', { backgroundColor: 'grey' }); var rect = new fabric.Rect({ width: 500, height: 500, fill: 'green'}) canvas.backgroundImage = rect; canvas.viewportTransform = [1, 0, 0, 1, 250, 250]; var exampleRect = new fabric.Rect({left: 5, top: 5, width: 100, height: 100, fill: 'red' }); canvas.add(exampleRect); canvas.renderAll();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script> <img id="export" /> <button id="butt" >export</button> <canvas id="c" width="1000" height="1000"></canvas>