小编Aks*_*wal的帖子

我试图像使用html5画布在photoshop中那样扭曲图像.我可以使用右上角手柄和左下角手柄的偏斜,但遗憾的是无法在其他两个手柄上应用偏斜,如下面的代码所示:HTML:

<div class="scalableParent">
            <img src="img/Chrysanthemum.jpg" class="scalable"/>
        </div>

Javascript(JQuery):

$(document).ready(function(){
            var uid = 0;
            jQuery.fn.extend({
                skew: function() {
                    uid++;
                    this.attr("style","position:relative");
                    var parent = this;
                    var image = this.find("img");
                    var canvas = createCorrespondingCanvas(image);
                    var img = new Image();
                    $(img).on("load", function(){
                        canvas.width = this.width
                        canvas.height = this.height
                        var ctx=canvas.getContext("2d");
                        ctx.clearRect(0,0,0,0)
                        ctx.drawImage(this,0,0, this.width, this.height);
                        $(this).hide();
                        //$(img).off("load");
                    });

                    img.src= image.attr("src")
                    this.find("img").attr("style", "position:absolute; z-index: -1");
                    var handles = createHandles(this, image);
                    makeHandlesDraggable(handles);
                    createOutputImage();
                    var output;
                    function createOutputImage(){
                        output = new Image();
                        output.id="outputImage";
                        $(parent).append(output);
                    }

                    function createHandles(el, image){ …