Javascript 在画布上保存扭曲的图像

我可以使用透视变换js扭曲图像，然后我尝试在画布上绘制图像，这应该是扭曲的图像。画布需要动态生成，也可能包含背景图像

我不知道如何在画布上重新绘制扭曲的图像

这是我的建议

---

单击“保存”按钮，应在画布上绘制原样图像。如何实现同样的效果？

不幸的是，无法保存CSS扭曲元素的图像。在这种情况下，画布和其他任何元素一样只是一个元素，失真程度低于更新画布位图时所暴露的位图

如果您想像这里那样进行四边形变换，您必须自己实现低级数学和算法来修改暴露的位图本身

只有这样，您才能按原样保存内容

---

将来您可能会使用SVG来解决这个问题，但目前它有很多限制，例如不允许使用图像等外部引用。

那么有没有这样做的库？

$('#btnDistort').on('click touchstart', function (e) {
    if (!jaaliApp.currentJaali.jaali) {
        jaaliApp.currentJaali.jaali = $('.img');
        var url = $('.img').css('backgroundImage');
        url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
        jaaliApp.currentJaali.url = url;
     }
    jaaliApp.distort(jaaliApp.currentJaali.jaali);
});

var jaaliApp = {
    distort: function (image) {
        var img;
        while (!$(image).is('.img')) {
            image = $(image).parent();
        }
        img = $(image);
        var container = $(img).parent();

        function createHandles() {
            $(container).find(".pt").remove();
            var topLeft = document.createElement("div");
            topLeft.className = "pt tl";
            $(container).append(topLeft);
            var topRight = document.createElement("div");
            topRight.className = "pt tr";
            $(container).append(topRight);
            var bottomLeft = document.createElement("div");
            bottomLeft.className = "pt bl";
            $(container).append(bottomLeft);
            var bottomRight = document.createElement("div");
            bottomRight.className = "pt br";
            $(container).append(bottomRight);
        }
        createHandles();
        var pts = $(container).find(".pt");
        var IMG_WIDTH = $(img).parent().width();
        var IMG_HEIGHT = $(img).parent().height();
        var IMG_OFFSET = {
            left: 0,
            top: 0
        }; /*$(img).parent().offset();*/
        var transform = new PerspectiveTransform(img[0], IMG_WIDTH, IMG_HEIGHT, true);
        var tl = pts.filter(".tl").css({
            left: transform.topLeft.x + IMG_OFFSET.left,
            top: transform.topLeft.y + IMG_OFFSET.top
        });
        var tr = pts.filter(".tr").css({
            left: transform.topRight.x + IMG_OFFSET.left,
            top: transform.topRight.y + IMG_OFFSET.top
        });
        var bl = pts.filter(".bl").css({
            left: transform.bottomLeft.x + IMG_OFFSET.left,
            top: transform.bottomLeft.y + IMG_OFFSET.top
        });
        var br = pts.filter(".br").css({
            left: transform.bottomRight.x + IMG_OFFSET.left,
            top: transform.bottomRight.y + IMG_OFFSET.top
        });
        var target;
        var targetPoint;

        function onMouseMove(e) {
            console.log($(this))
            targetPoint.x = e.pageX - container.offset().left;
            targetPoint.y = e.pageY - container.offset().top;
            target.css({
                left: targetPoint.x,
                top: targetPoint.y
            });
            // check the polygon error, if it's 0, which mean there is no error
            if (transform.checkError() == 0) {
                transform.update();
                img.show();
            } else {
                img.hide();
            }
            e.stopPropagation();
        }

        $(pts).draggable({
            containment: '#jaaliContainer',
            start: function (e) {
                console.log(e);
                target = $(this);
                targetPoint = target.hasClass("tl") ? transform.topLeft : target.hasClass("tr") ? transform.topRight : target.hasClass("bl") ? transform.bottomLeft : transform.bottomRight;
                onMouseMove.apply(this, Array.prototype.slice.call(arguments));
            },
            stop: function (e) {
                console.log(e)
            },
            drag: onMouseMove
        });
    }
}