Javascript 在photoshop中使用可拖动的控制柄使图像倾斜
我正在尝试扭曲图像，就像我们在photoshop中使用html5画布所做的那样。我可以对右上角控制柄和左下角控制柄使用skew，但不幸的是，无法对其他两个控制柄应用skew，如下面的代码所示： HTML：Javascript 在photoshop中使用可拖动的控制柄使图像倾斜,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,我正在尝试扭曲图像，就像我们在photoshop中使用html5画布所做的那样。我可以对右上角控制柄和左下角控制柄使用skew，但不幸的是，无法对其他两个控制柄应用skew，如下面的代码所示： HTML： <div class="scalableParent"> <img src="img/Chrysanthemum.jpg" class="scalable"/> </div> 只要我能理解达到所需效果的公式，任何帮助
<div class="scalableParent">
<img src="img/Chrysanthemum.jpg" class="scalable"/>
</div>
我对问题进行了编辑，以适应我需要应用转换图像公式的条件您忘记在
makeHandlesDragable（）条件。查看WebGL库glfx.js。过滤器：透视图。将有4个可拖动点。手动执行此操作需要大量计算
这可能会对您有所帮助
cntxt.setTransform（1，（dragPosition.left*10）/canvas.width，0,1,0，（dragPosition.top*canvas.height）/100）；//对于左上角
cntxt.setTransform（1,0，Math.tan（（dragPosition.left canvas.width）/dragPosition.top），1,0,0）；//用于右下角
检查这个
这个链接在试图找到解决方案时非常有用
我知道条件，但问题是我不知道公式，我想你把整个事情搞复杂了；我只是举个例子，随便看看：（也许你没有，因为我只是浏览了一下。）
$(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){
var handleLeftTop = document.createElement("div");
handleLeftTop.className = "handle left-top";
$(handleLeftTop).css({position:"absolute", width: 40, height: 40, border: "1px solid black"});
var handleLeftBottom = document.createElement("div");
handleLeftBottom.className = "handle left-bottom";
$(handleLeftBottom).css({position:"absolute", width: 40, height: 40, border: "1px solid black"});
var handleRightTop = document.createElement("div");
handleRightTop.className = "handle right-top";
$(handleRightTop).css({position:"absolute", width: 40, height: 40, border: "1px solid black"});
var handleRightBottom = document.createElement("div");
handleRightBottom.className = "handle right-bottom";
$(handleRightBottom).css({position:"absolute", width: 40, height: 40, border: "1px solid black"});
el.append(handleLeftTop,handleLeftBottom,handleRightTop,handleRightBottom);
$(handleLeftTop).css({
left: $(image).position().left,
top: $(image).position().top
});
$(handleLeftBottom).css({
left: $(image).position().left,
top: $(image).position().top + $(image).height() - 40
});
$(handleRightTop).css({
left: $(image).position().left + $(image).width() - 40,
top: $(image).position().top
});
$(handleRightBottom).css({
left: $(image).position().left + $(image).width() - 40,
top: $(image).position().top + $(image).height() - 40
});
return {
leftTop: handleLeftTop,
leftBottom: handleLeftBottom,
rightTop: handleRightTop,
rightBottom: handleRightBottom
};
}
function createCorrespondingCanvas(img){
var can = document.createElement("canvas");
can.id = "can"+uid;
$(can).css({zIndex: 1});
$(img).attr("data-canvasid", can.id)
parent.append(can)
uid++;
return can;
}
function makeHandlesDraggable(handles){
for( var handle in handles){
if($(handles[handle]).hasClass("right-top")){
$(handles[handle]).draggable({
containment: parent,
start: function(a,b,c){
},
/*axis: "x", */
drag: function(a,b,c){
var cntxt = canvas.getContext("2d");
cntxt.clearRect(0, 0, img.width, img.height);
var dragPosition = b.helper.position();
cntxt.setTransform(1, Math.tan(dragPosition.top/dragPosition.left), 0, 1, 0, 0); // for right top
cntxt.drawImage(img, 0, 0, img.width, img.height);
},
stop: function(){
console.log("data")
destroyAndRecreate()
}
});
}
else if($(handles[handle]).hasClass("left-bottom")){
$(handles[handle]).draggable({
containment: parent,
start: function(a,b,c){
},
/*axis: "x", */
drag: function(a,b,c){
var cntxt = canvas.getContext("2d");
cntxt.clearRect(0, 0, img.width, img.height);
var dragPosition = b.helper.position();
cntxt.setTransform(1, 0, Math.tan(dragPosition.left/dragPosition.top), 1, 0, 0); // for left bottom
cntxt.drawImage(img, 0, 0, img.width, img.height);
},
stop: function(){
console.log("data")
//$(image).attr("src",canvas.toDataURL());
destroyAndRecreate()
}
});
}else if($(handles[handle]).hasClass("right-bottom")){
$(handles[handle]).draggable({
containment: parent,
start: function(a,b,c){
},
/*axis: "x", */
drag: function(a,b,c){
var cntxt = canvas.getContext("2d");
cntxt.clearRect(0, 0, img.width, img.height);
var dragPosition = b.helper.position();
// Dont know the formula to be applied here
},
stop: function(){
console.log("data")
destroyAndRecreate()
}
});
}
else if($(handles[handle]).hasClass("left-top")){
$(handles[handle]).draggable({
containment: parent,
start: function(a,b,c){
},
/*axis: "x", */
drag: function(a,b,c){
var cntxt = canvas.getContext("2d");
cntxt.clearRect(0, 0, img.width, img.height);
var dragPosition = b.helper.position();
// Dont know the formula to be applied here
},
stop: function(){
console.log("data")
destroyAndRecreate()
}
});
}
}
}
function destroyAndRecreate(){
var data = canvas.toDataURL();
$(output).attr("src", data);
var ref = $(output).clone();
$parent = $(output).parent();
$parent.empty();
$parent.append(ref);
$(ref).on("load", function(){
$parent.skew();
});
}
$("#btnSave").on("click", function(){
//$(output).attr("src", $(image).attr("src")).hide();
window.open($(output).attr("src"))
});
}
});
$( ".scalableParent img" ).on("load", function(){
$( ".scalableParent" ).skew();
});
});