<强> 1。自定义宽高效果
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt;脚本src=" https://www.yisu.com/zixun/jquery-1.12.4.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; img类="源" src=" https://www.yisu.com/zixun/test2.jpg " alt="比;
& lt; img src="类=澳勘辍盿lt="比;
& lt;/body>
& lt;/html>之前
(函数(美元){
.fn美元。photoCrop=function(选项){
var选择={
img:”,
fixedScale: 9/5,
isHead:空,
maxWidth:“1400”,
maxHeight:“800”,
回调函数:函数(){}
}
选择=$ .extend(选择,选项);
var _this=;
var imgSrc=https://www.yisu.com/zixun/opt.img ?opt.img: _this.attr (“src”);
var photoCropBox=$ (' & lt; div id=皃hotoCropBox”在“+
& lt;帆布id=" cropCanvas "祝辞& lt;/canvas> & lt; img id=" dataImg " src=" + imgSrc +”alt="祝辞& lt; div id=皃hotoCropBox-panel-box”在“+
& lt; div id=" photoCropBox-panel "祝辞& lt; div id=皃hotoCropBox-img”在“+
& lt; img src=" + imgSrc +”alt="祝辞& lt;/div> & lt; div id=皃hotoCropBox-option”祝辞& lt;跨度id=皃hotoCropBox-end”祝辞裁剪& lt;/span> & lt;跨度id=皃hotoCropBox-start”祝辞手动裁剪& lt;/span> & lt;跨度id=皃hotoCropBox-cancel”祝辞取消& lt;/span> & lt;/div> & lt;/div>“+
' & lt;/div> & lt;/div>”);
$('体').append (photoCropBox);
var _box=$ (' # photoCropBox-img ');
var imgWidth=_box.find (img) .width ();
$ (" # photoCropBox-option跨度”). css ({
lineHeight:“30 px”,
背景:# 000,
颜色:# fff,
显示:“inline-block”,
paddingLeft:“20 px”,
paddingRight:“20 px”,
marginRight:“5 px”,
光标:“指针”
}）
var cropBox=$ (' & lt; div id=皃hotoCropBox-cropBox”在“+
& lt; div id=癱ropBoxLine”在“+
& lt; img src=" + imgSrc +”alt="祝辞的+
' & lt; div类=岸ハ摺弊４? lt;/div> & lt; div类=爸毕摺弊４? lt;/div>“+
' & lt; div类=暗撞俊弊４? lt;/div> & lt; div类=白笙摺弊４? lt;/div> & lt;/div>“+
& lt; div id=" cropBoxLine2 "祝辞& lt; div类=白竺础弊４? lt;/div> & lt; div类=罢返拿础弊４? lt;/div> & lt; div类=岸ゼ睹础弊４? lt;/div> & lt; div类=暗酌础弊４? lt;/div>“+
' & lt; div类=癰ot”祝辞& lt;/div> & lt; div类=癰ot”祝辞& lt;/div> & lt; div类=盎魅恕弊４? lt;/div> & lt; div类=癰ot”祝辞& lt;/div>“+
& lt; div类="工具条机器人"祝辞& lt;/div> & lt; div类=發eft-bottom机器人”祝辞& lt;/div> & lt; div类=坝疑辖腔魅恕弊４? lt;/div> & lt; div类=皉ight-bottom机器人”祝辞& lt;/div> & lt;/div> & lt;/div>”);
屏幕var=$ (' & lt; div id=皃hotoCropBox-bg”祝辞& lt;/div>”)
_box.append (cropBox);
_box.append(屏幕);
var _corp=$ (' # photoCropBox-cropBox ');
var cropBoxLine=$ (' # cropBoxLine ');
setTimeout(函数(){
console.log (imgWidth)
cropBoxLine.find (img) . css(“宽度”,_box.find (img) .width () +“px”)
},20)
如果(opt.isHead) {
cropBoxLine.css ({borderRadius:‘100%’})
}
$ (" # photoCropBox-cropBox .line # photoCropBox-cropBox .line2”) . css ({
背景:“url (/img/Jcrop.gif)”,
位置:“绝对”,
透明度:5
}）
$ (" # photoCropBox-cropBox .bot ') . css ({
背景:“rgba (0, 0, 0, 0.5)”,
位置:“绝对”,
宽度:7,
高度:7,
边界:1 px # 999固体的
}）
setTimeout(函数(){
init ();
},10)
美元(窗口)。(“调整”功能(){
setPosition ();
}）
$ (" # photoCropBox-cancel”)。(“点击”,函数(){
closeBox ();
}）
$ (" # photoCropBox-bg”)。(“mousedown”功能(e) {
如果(opt.fixedScale)返回//固定
$ (' # cropBoxLine2 ') hide ();
var _this=$ ();
var _sx=e.pageX _sy=e.pageY;
.left var _tx=_this.offset ();
var _ty=_this.offset直()上;
美元(文档)。(“mousemove”功能(e) {
e.preventDefault ();
var _ex=e.pageX _ey=e.pageY;
getPosition (_ex、_ey _ty、_tx _sx, _sy, _this)
}）
美元(文档)。(mouseup,函数(){
$(文档).unbind (“mousemove”);
$ (' # cropBoxLine2 '),告诉();
}）
}）
var锁=false;
_corp。(“mousedown”功能(e) {
如果(锁){返回}
var _sx=e.pageX _sy=e.pageY;
var pW=$ (' # photoCropBox-bg ') .width (), pH=$ (' # photoCropBox-bg ') .height ();
var _this=$ (), _thisX=方法(_this.css(左)),_thisY=方法(_this.css(“顶级”)),_thisW=方法(_this.css(“宽度”)),_thisH=方法(_this.css(高度));
美元(文档)。(“mousemove”功能(e) {
e.preventDefault ();
var _ex=e.pageX _ey=e.pageY;
var值=_ex -_sx _y吗=_ey -_sy;
值+=_thisX; _y吗+=_thisY;
如果(_x
