如何在 fabric js 中保留图像的位置

Question

我正在尝试使用织物进行图像处理 js.I 我正在处理非常大的图像，因此我必须在图像处理后保存 canvases 的副本，以便下次显示使用 jquery 的 id.show.
更快，但我想在确切位置渲染图像。我正在使用 canvas.zoomToPoint and canvas.relativePan 来缩放和平移图像，但是在我进行缩放 + 平移然后应用图像处理以显示隐藏 canvas 并在隐藏 canvas 上应用 hiddencanvas.zoomToPoint and hiddencanvas.relativePan 之后，它没有在我离开旧 canvas.
的确切位置渲染图像，我是不是做错了什么。这是一个支持 Fiddle 。但是， fiddle 通过上传呈现图像，如果您缩放和平移并单击反转，反转图像不会移动到那里平移代码：```var panning =错误的; canvas.on('mouse:up', 函数 (e) { 平移=假； });

    canvas.on('mouse:down', function (e) {
        panning = true;
    });
    canvas.on('mouse:move', function(e) {
        if (panning && e && e.e) {
             var x = e.offsetX, y = e.offsetY;
             var delta = new fabric.Point(e.e.movementX, e.e.movementY);
             canvas.relativePan(delta);
             //Above statement pan's the image but what to save to server in order to render the image on the exact panned location ?
        }
    });

`` 而这是缩放代码：canvas.zoomToPoint({ x: x, y: y }, newZoom);

Answer 1

我找到了答案，这是一个非常愚蠢的错误。

每个 canvas 都有视口变换。所以，我们只需要得到 canvas.viewportTransform 然后我们就可以得到 ScaleX, scaleY, left , top 作为 [scaleX, 0,0, scaleY, left,top] .

希望，它会对某人有所帮助。

如何在 fabric js 中保留图像的位置

how to retain positions for images in fabric js

html

javascript

jquery

canvas

fabricjs