Question

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

我无法弄清楚如何在画布上重绘失真的图像。

这里是fiddle

$('#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
        });
    }
}

单击保存按钮时，应在画布上绘制图像。我怎样才能实现同样的目标？

Answer 1

遗憾的是，无法保存CSS失真元素的图像。在这种情况下，画布只是一个与其他元素一样的元素，并且在更新画布位图时，失真的位置低于我们所接触的位图。

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

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

在画布上保存扭曲的图像

1 个答案: