jquery上傳拖動剪裁

❶ 怎麼用js或者jquery實現本地裁剪

網上很多這樣的圖片裁剪插件，最好用最常用的是jcrop，這里是他的官網
http://www.webresourcesdepot.com/jquery-image-crop-plugin-jcrop/

當然中文翻譯過來的文章也很多，樓主可以搜索下~

js或者jQuery在這里只能實現確立要裁剪的范圍，實際的裁剪是要交給後台進行的。

基本思路就是，設定一個半透明框，在要裁剪的圖片中進行拖動和定位，然後把這個框的范圍（也就是四個角的坐標送到後台），後台如PHP提供相關的圖片處理函數，對圖片進行裁剪。

思路比較簡單，操作起來也不難。

希望對樓主有幫助~~

❷ 如何使用jQuery Draggable和Droppable實現拖拽功能

以下對使用jQuery Draggable和Droppable實現拖拽功能的方法進行了詳細的分析介紹。

第一步：左側元素可以拖
官方給出的實例是直接在要拖動的元素上添加class="ui-widget-content"。最初在所有要拖動的元素都添加了「ui-widget-content」類別。但是測試拖動結果，發現元素只能在它所在的container裡面拖動，再往右拖動，div會出現水平或垂直滾動條container設置了overflow:auto。
第二步：將要拖的元素內容復制到draggableDiv上。實現拖動父節點時，其下面的子節點元素也要拖放到右邊。如果是拖動的子節點元素，就在右邊直接顯示子節點元素。父節點和子節點是相對的，因為左側樹形結構的節點可以是無限級的，所以一個元素既可能是子節點元素，也會是父節點元素。通過監聽滑鼠的mousedown和mouseup事件，來判斷用戶在拖動元素。

var clickElement = null; $(".threepanels .ptreelist").bind("mousedown",function (event) {
//獲取當前mousedown元素的內容
var itemContent = $(this).html(); var draggableDiv = $("#draggableDiv");
$(draggableDiv).css({ "display": "block", "height": 0 });
//將點擊的元素內容復制
clickElement = $(this).clone();
var currentdiv = $(this).offset(); $(draggableDiv).css({ "top": currentdiv.top, "left": currentdiv.left }); draggableDiv.trigger(event);
//取消默認行為 return false; });
$("#draggableDiv").mouseup(function (event) { $(this).css({ "height": "0" }); });
//拖動元素時滑鼠的位置
var dragDivLeft = 0;
var dragDivTop = 0;
$("#draggableDiv").draggable({ containment: "parent", drag: function (event, ui) { $("#draggableDiv").css({ "width": "260px", "height": "22px" });
$("#draggableDiv").append(clickElement);
var closeTop = $(".closeBar").offset().top;
dragDivLeft = event.target.offsetLeft;
dragDivTop = event.target.offsetTop; },
stop: function () {
//拖拽結束，將拖拽容器內容清空
$("#draggableDiv").html("");
$("#draggableDiv").css({"height":"0"}); }
});

第三步：右邊的元素可以放到指定的位置上
需要將元素拖到指定的區域裡面，然後釋放操作。完成「放」的操作。可以從上圖看出，我是將元素的上邊左邊和下邊緣的左邊存到一個數組裡面。然後在「拖」的過程中，一直記錄了拖動的左邊，放到右側時，就可以判斷當前元素將要放的位置。具體可以下載代碼查看。
完成代碼之後的效果圖如下：

❸ jquery如何通過拖動邊框改變該div的大小

jquery通過拖動邊框改變該div的大小的實現思路是利用jquery的mousemove，mousedown，mouseup三個事件，定義兩個相對位置，分別是：
1、組件左上角與屏幕左上角的相對位置
2、滑鼠所在坐標與組件左上角的相對位置。
具體函數如下：
.drag{
position:absolute;
background:#0000CC;
top:100px;left:200px;
padding:0;
}
頁面整體寫法：

$(document).ready(function(){
var move=false;//移動標記
var _x,_y;//滑鼠離控制項左上角的相對位置
$(".drag").mousedown(function(e){
move=true;
_x=e.pageX-parseInt($(".drag").css("left"));
_y=e.pageY-parseInt($(".drag").css("top"));
});
$(document).mousemove(function(e){
if(move){
var x=e.pageX-_x;//控制項左上角到屏幕左上角的相對位置
var y=e.pageY-_y;
$(".drag").css({"top":y,"left":x});
}
}).mouseup(function(){
move=false;
});
其中e.pageX,e.pageY為當前滑鼠的橫縱坐標。

❹ jquery 拖動問題

停止拖動：return false，滑鼠松開再按下可以繼續拖動。

if(obt <= 0) {
$(".one").css({"top":"0px"});
return false;
};

禁止拖動：disabled: true，但你需要另外一個button來設置 disabled: false 後才能繼續拖動。

if(obt <= 0) {
$(".one").css({"top":"0px"});
$(this).draggable({ disabled: true });
return false;
};

-------------------------------

建議你使用 containment，將拖動范圍局限於一個指定的元素內。

drag: function(e) {
// drag 代碼
},
containment: "div.main"

這樣你就不需要自定義 top right bottom left，.one 只在 div.main 中可以拖動。

❺ 如何用jquery.imgareaselect保存剪切後的預覽圖像

你的思路應該錯了，我給你梳理下吧：
用jquery.imgareaselect實際上主要是利用它幫你獲得預覽圖和剪裁數據。然後將數據發送後台根據這些數據就可以從原始圖片中重新畫出你選擇部分的圖片信息了。
1，你非同步上傳後將圖片訪問路徑設置到剪裁區img.src;
2，利用imgareaselect的回調函數拿到圖片引用img和選擇對象selection，從img拿到引用圖片width\height，selection拿到左上角的坐標x1\y1，右下角的坐標x2\y2，選擇區寬高width\height。
3，將2中拿到的數據發送到後台，後台根據這些數據和原始圖片信息畫出選擇區的圖像。

❻ jquery怎麼打開本地圖片預覽，點擊確定後上傳

1, tapmodo / Jcrop
Jcrop是人氣最高的圖片裁剪jQuery插件，stars數量2k+，功能非常豐富，文檔齊全，首選。Github.com官網也使用了這個插件。有一個小細節是，邊框線的螞蟻線是動畫的，真的很用心。

2, fengyuanchen / cropper
Cropper也是一款圖片裁剪jQuery插件，stars數量1k+，是杭州的前端工程師Fengyuan Chen所寫的，功能也相當豐富，裁剪時還可以對原圖進行旋轉。

3, imgAreaSelect 也是比較經典的圖片裁剪jQuery插件，我很久以前就在自己的項目中使用過，stars數量500+。

http://blog.csdn.net/cuixiping/article/details/45966177

❼ 哪位大神有jquery無刷新上傳圖片、裁剪、保存圖片的案例啊

jquery.jcrop 圖片裁剪（很好很強大）
http://deepliquid.com/content/Jcrop.html ｜
http://www.jb51.net/article/18273.htm

❽ js或者jQuery裁剪圖片然後放大。

不知道你所說的圖片是不是用戶上傳的
如果是的話我有寫了一個插件可以用
這個網址是測試用的
https://jhinsama.github.io/demos/image-clip
這個網址有使用方法
https://github.com/Jhinsama/Jhinsama.github.io/tree/master/demos/image-clip
如果使用方法看不懂的可以直接私信我
順便說一句
這個插件支持手機網頁

❾ jquery 移動端手指拖拽div四個邊框，可上下左右隨意拉伸調節div大小

jQuery拖拽通過八個點改變div大小
js:

(function($) {

/**
* 默認參數
*/
var defaultOpts = {
stage: document, //舞台
item: 'resize-item', //可縮放的類名
};

/**
* 定義類
*/
var ZResize = function(options) {
this.options = $.extend({}, defaultOpts, options);
this.init();
}

ZResize.prototype = {
init: function() {
this.initResizeBox();
},
/**
* 初始化拖拽item
*/
initResizeBox: function() {
var self = this;
$(self.options.item).each(function () {
//創建面板
var width = $(this).width();
var height = $(this).height();
var resizePanel = $('<div class"resize-panel"></div>');
resizePanel.css({
width: width,
height: height,
top: 0,
left: 0,
position: 'absolute',
'background-color': 'rgba(0,0,0,0.5)',
cursor: 'move',
display: 'none'
});
self.appendHandler(resizePanel, $(this));
/**
* 創建控制點
*/
var n = $('<div class="n"></div>');//北
var s = $('<div class="s"></div>');//南
var w = $('<div class="w"></div>');//西
var e = $('<div class="e"></div>');//東
var ne = $('<div class="ne"></div>');//東北
var nw = $('<div class="nw"></div>');//西北
var se = $('<div class="se"></div>');//東南
var sw = $('<div class="sw"></div>');//西南

//添加公共樣式
self.addHandlerCss([n, s, w, e, ne, nw, se, sw]);
//添加各自樣式
n.css({
'top': '-4px',
'margin-left': '-4px',
'left': '50%',
'cursor': 'n-resize'
});
s.css({
'bottom': '-4px',
'margin-left': '-4px',
'left': '50%',
'cursor': 's-resize'
});
e.css({
'top': '50%',
'margin-top': '-4px',
'right': '-4px',
'cursor': 'e-resize'
});
w.css({
'top': '50%',
'margin-top': '-4px',
'left': '-4px',
'cursor': 'w-resize'
});
ne.css({
'top': '-4px',
'right': '-4px',
'cursor': 'ne-resize'
});
nw.css({
top: '-4px',
'left': '-4px',
'cursor': 'nw-resize'
});
se.css({
'bottom': '-4px',
'right': '-4px',
'cursor': 'se-resize'
});
sw.css({
'bottom': '-4px',
'left': '-4px',
'cursor': 'sw-resize'
});

// 添加項目
self.appendHandler([n, s, w, e, ne, nw, se, sw], resizePanel);

//綁定拖拽縮放事件
self.bindResizeEvent(resizePanel, $(this));

//綁定觸發事件
self.bindTrigger($(this));
});
self.bindHidePanel();
},
//控制點公共樣式
addHandlerCss: function(els) {
for(var i = 0; i < els.length; i++) {
el = els[i];
el.css({
position: 'absolute',
width: '8px',
height: '8px',
background: '#ff6600',
margin: '0',
'border-radius': '2px',
border: '1px solid #dd5500',
});
}
},
/**
* 插入容器
*/
appendHandler: function(handlers, target) {
for(var i = 0; i < handlers.length; i++) {
el = handlers[i];
target.append(el);
}
},
/**
* 顯示拖拽面板
*/
triggerResize: function(el) {
var self = this;
el.siblings(self.options.item).children('div').css({
display: 'none'
});
el.children('div').css({
display: 'block'
});
},
/**
* 拖拽事件控制 包含8個縮放點 和一個拖拽位置
*/
bindResizeEvent: function(el) {

var self = this;
var ox = 0; //原始事件x位置
var oy = 0; //原始事件y位置
var ow = 0; //原始寬度
var oh = 0; //原始高度

var oleft = 0; //原始元素位置
var otop = 0;
var org = el.parent('div');

//東
var emove = false;
el.on('mousedown','.e', function(e) {
ox = e.pageX;//原始x位置
ow = el.width();
emove = true;
});

//南
var smove = false;
el.on('mousedown','.s', function(e) {
oy = e.pageY;//原始x位置
oh = el.height();
smove = true;
});

//西
var wmove = false;
el.on('mousedown','.w', function(e) {
ox = e.pageX;//原始x位置
ow = el.width();
wmove = true;
oleft = parseInt(org.css('left').replace('px', ''));
});

//北
var nmove = false;
el.on('mousedown','.n', function(e) {
oy = e.pageY;//原始x位置
oh = el.height();
nmove = true;
otop = parseInt(org.css('top').replace('px', ''));
});

//東北
var nemove = false;
el.on('mousedown','.ne', function(e) {
ox = e.pageX;//原始x位置
oy = e.pageY;
ow = el.width();
oh = el.height();
nemove = true;
otop = parseInt(org.css('top').replace('px', ''));
});

//西北
var nwmove = false;
el.on('mousedown','.nw', function(e) {
ox = e.pageX;//原始x位置
oy = e.pageY;
ow = el.width();
oh = el.height();
otop = parseInt(org.css('top').replace('px', ''));
oleft = parseInt(org.css('left').replace('px', ''));
nwmove = true;
});

//東南
var semove = false;
el.on('mousedown','.se', function(e) {
ox = e.pageX;//原始x位置
oy = e.pageY;
ow = el.width();
oh = el.height();
semove = true;
});

//西南
var swmove = false;
el.on('mousedown','.sw', function(e) {
ox = e.pageX;//原始x位置
oy = e.pageY;
ow = el.width();
oh = el.height();
swmove = true;
oleft = parseInt(org.css('left').replace('px', ''));
});

//拖拽
var drag = false;
el.on('mousedown', function(e) {
ox = e.pageX;//原始x位置
oy = e.pageY;
otop = parseInt(org.css('top').replace('px', ''));
oleft = parseInt(org.css('left').replace('px', ''));
drag = true;
});

$(self.options.stage).on('mousemove', function(e) {
if(emove) {
var x = (e.pageX - ox);
el.css({
width: ow + x
});
org.css({
width: ow + x
});
} else if(smove) {
var y = (e.pageY - oy);
el.css({
height: oh + y
});
org.css({
height: oh + y
});
} else if(wmove) {
var x = (e.pageX - ox);
el.css({
width: ow - x,
// left: oleft + x
});
org.css({
width: ow - x,
left: oleft + x
});
} else if(nmove) {
var y = (e.pageY - oy);
el.css({
height: oh - y,
// top: otop + y
});
org.css({
height: oh - y,
top: otop + y
});
} else if(nemove) {
var x = e.pageX - ox;
var y = e.pageY - oy;
el.css({
height: oh - y,
// top: otop + y,
width: ow + x
});
org.css({
height: oh - y,
top: otop + y,
width: ow + x
});
} else if(nwmove) {
var x = e.pageX - ox;
var y = e.pageY - oy;
el.css({
height: oh - y,
// top: otop + y,
width: ow - x,
// left: oleft + x
});
org.css({
height: oh - y,
top: otop + y,
width: ow - x,
left: oleft + x
});
} else if(semove) {
var x = e.pageX - ox;
var y = e.pageY - oy;
el.css({
width: ow + x,
height: oh + y
});
org.css({
width: ow + x,
height: oh + y
});
} else if(swmove) {
var x = e.pageX - ox;
var y = e.pageY - oy;
el.css({
width: ow - x,
// left: oleft + x,
height: oh + y
});
org.css({
width: ow - x,
left: oleft + x,
height: oh + y
});
} else if(drag) {
var x = e.pageX - ox;
var y = e.pageY - oy;
org.css({
left: oleft + x,
top: otop + y
});
}
}).on('mouseup', function(e) {
emove = false;
smove = false;
wmove = false;
nmove = false;
nemove = false;
nwmove = false;
swmove = false;
semove = false;
drag = false;
});
},
/**
* 點擊item顯示拖拽面板
*/
bindTrigger: function(el) {
var self = this;
el.on('click', function(e) {
e.stopPropagation();
self.triggerResize(el);
});
},
/**
* 點擊舞台空閑區域 隱藏縮放面板
*/
bindHidePanel: function(el) {
var stage = this.options.stage;
var item = this.options.item;
$(stage).bind('click', function() {
$(item).children('div').css({
display: 'none'
});
})
}
}

window.ZResize = ZResize;

})(jQuery);

html:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>jQuery拖拽放大縮小插件idrag</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.item1 {
width: 405px;
height: 291px;
cursor: move;
position: absolute;
top: 30px;
left: 30px;
background-color: #FFF;
border: 1px solid #CCCCCC;
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
}

.item2 {
width: 200px;
height: 100px;
cursor: move;
position: absolute;
top: 400px;
left: 100px;
background-color: #FFF;
border: 1px solid #CCCCCC;
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
line-height: 100px;
text-align: center;
}

body {
background-color: #F3F3F3;
}
</style>
</head>

<body>
<div id="mydiv" style="width:800px; height:800px; border-style:solid">
<div id="div1" class="resize-item item1">
<img src="images/dog.png" width="100%" height="100%">
</div>
<div class="resize-item item2">
你是我的小小狗
</div>
</div>
<script src="jquery.min.js"></script>
<script type="text/javascript" src='jquery.ZResize.js'></script>
<script type="text/javascript">
new ZResize({
stage: "#mydiv", //舞台
item: '#div1', //可縮放的類名
});
</script>
</body>

</html>