1.自定义宽高效果
1.html 代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <script src="./jquery-1.12.4.min.js"></script> </head> <body> <img class="source" src="./test2.jpg" alt=""> <img src="" class="target" alt=""> </body> </html>
2.添加插件代码
我要评论
(function ($) {
$.fn.photocrop=function (option) {
var opt={
img:'',
fixedscale:9/5,
ishead:null,
maxwidth:'1400',
maxheight:'800',
callback:function () {}
}
opt=$.extend(opt,option);
var _this=this;
var imgsrc=opt.img ? opt.img:_this.attr('src');
var photocropbox=$('<div id="photocropbox" style="position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.5);z-index: 99999;padding: 20px;">' +
'<canvas id="cropcanvas" style="position: absolute;opacity:1;left: 0;top: 0;z-index: 100"></canvas><img id="dataimg" src="'+imgsrc+'" style="opacity: 0;position: absolute" alt=""><div id="photocropbox-panel-box" style="position: relative;width: 100%;height: 100%;">' +
'<div id="photocropbox-panel" style="opacity:0;background: #eee;border-radius: 5px;max-width: '+opt.maxwidth+'px;max-height: '+opt.maxheight+'px;position: absolute;text-align: center"><div id="photocropbox-img" style="margin: 40px 60px 20px;display: inline-block;position: relative">' +
'<img src="'+imgsrc+'" style="max-width: 100%;display: block;max-height: 100%;max-height: '+(opt.maxheight-110)+'px;" alt=""></div><div id="photocropbox-option" style="text-align: right;padding-right: 50px;padding-bottom: 20px;position: relative;z-index: 2"><span id="photocropbox-end">裁剪</span><span id="photocropbox-start">手动裁剪</span><span id="photocropbox-cancel">取消</span></div></div>' +
'</div></div>');
$('body').append(photocropbox);
var _box=$('#photocropbox-img');
var imgwidth=_box.find('img').width();
$('#photocropbox-option span').css({
lineheight:'30px',
background:'#000',
color:'#fff',
display:'inline-block',
paddingleft:'20px',
paddingright:'20px',
marginright:'5px',
cursor:'pointer'
})
var cropbox=$('<div id="photocropbox-cropbox" style="position: absolute;z-index: 5;cursor: move;display: none">' +
'<div id="cropboxline" style="overflow: hidden;position: absolute;width: 100%;height: 100%;">' +
'<img src="'+imgsrc+'" style="display: block;width: '+_box.find('img').width()+'px;position: absolute;max-height: none;max-width: none" alt="">' +
'<div class="top line" style="width: 100%;height: 1px;top: 0;left: 0;"></div><div class="right line" style="height: 100%;width: 1px;top: 0;right: 0"></div>' +
'<div class="line bottom" style="width: 100%;height: 1px;bottom: 0px;left: 0"></div><div class="left line" style="height: 100%;width: 1px;top: 0;left: 0"></div></div>' +
'<div id="cropboxline2"><div class="left line2" style="height: 100%;width: 1px;top: 0;left: 0;cursor: w-resize"></div><div class="right line2" style="height: 100%;width: 1px;top: 0;right: 0;cursor: e-resize"></div><div class="top line2" style="width: 100%;height: 1px;top: 0;left: 0;cursor: n-resize;position: absolute"></div><div class="bottom line2" style="width: 100%;height: 1px;bottom: 0px;left: 0;cursor: s-resize"></div>' +
'<div class="left bot" style="left: -3px;top: 50%;margin-top: -4px;cursor: w-resize"></div><div class="right bot" style="right: -3px;top: 50%;margin-top: -4px;cursor: e-resize"></div><div class="bottom bot" style="bottom: -3px;left: 50%;margin-left: -4px;cursor: s-resize"></div><div class="top bot" style="top: -3px;left: 50%;margin-left: -4px;cursor: n-resize"></div>' +
'<div class="left-top bot" style="left: -3px;top: -3px;cursor: nw-resize"></div><div class="left-bottom bot" style="left: -3px;bottom: -3px;cursor: sw-resize"></div><div class="right-top bot" style="right: -3px;top: -3px;cursor: ne-resize"></div><div class="right-bottom bot"style="right: -3px;bottom: -3px;cursor: se-resize"></div></div></div>');
var screen=$('<div id="photocropbox-bg" style="background: rgba(0,0,0,.5);position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 4;cursor: crosshair;display: none"></div>')
_box.append(cropbox);
_box.append(screen);
var _corp=$('#photocropbox-cropbox');
var cropboxline=$('#cropboxline');
settimeout(function () {
console.log(imgwidth)
cropboxline.find('img').css('width',_box.find('img').width()+'px')
},20)
if(opt.ishead){
cropboxline.css({borderradius:'100%'})
}
$('#photocropbox-cropbox .line,#photocropbox-cropbox .line2').css({
background:'url(./img/jcrop.gif)',
position:'absolute',
opacity:.5
})
$('#photocropbox-cropbox .bot').css({
background:'rgba(0,0,0,0.5)',
position:'absolute',
width:7,
height:7,
border:'1px #999 solid'
})
settimeout(function () {
init();
},10)
$(window).on('resize',function () {
setposition();
})
$('#photocropbox-cancel').on('click',function () {
closebox();
})
$('#photocropbox-bg').on('mousedown',function (e) {
if(opt.fixedscale) return //固定
$('#cropboxline2').hide();
var _this=$(this);
var _sx=e.pagex,_sy=e.pagey;
var _tx=_this.offset().left;
var _ty=_this.offset().top;
$(document).on('mousemove',function (e) {
e.preventdefault();
var _ex=e.pagex,_ey=e.pagey;
getposition(_ex,_ey,_ty,_tx,_sx,_sy,_this)
})
$(document).on('mouseup',function () {
$(document).unbind('mousemove');
$('#cropboxline2').show();
})
})
var lock=false;
_corp.on('mousedown',function (e) {
if(lock){return}
var _sx=e.pagex,_sy=e.pagey;
var pw=$('#photocropbox-bg').width(),ph=$('#photocropbox-bg').height();
var _this=$(this),_thisx=parseint(_this.css('left')),_thisy=parseint(_this.css('top')),_thisw=parseint(_this.css('width')),_thish=parseint(_this.css('height'));
$(document).on('mousemove',function (e) {
e.preventdefault();
var _ex=e.pagex,_ey=e.pagey;
var _x=_ex-_sx,_y=_ey-_sy;
_x+=_thisx;_y+=_thisy;
if(_x<0) _x=0;
if(_y<0) _y=0;
if(_y>ph-_thish) _y=ph-_thish;
if(_x>pw-_thisw) _x=pw-_thisw;
resizecropbox("","",_y,_x,true)
})
$(document).on('mouseup',function () {
$(document).unbind('mousemove');
})
})
//控制大小
$('#cropboxline2 .bot').on("mousedown",function (e) {
lock=true;
var _esx=e.pagex,_esy=e.pagey;
var _that=$(this);
var _this=$('#photocropbox-bg');
var _tx=_this.offset().left;
var _ty=_this.offset().top;
var _sx=_corp.offset().left,_sy=_corp.offset().top;//裁剪框
if(_that.hasclass('right-top')) _sy+=_corp.height();
if(_that.hasclass('left-top')){
_sy+=_corp.height();
_sx+=_corp.width();
}
if(_that.hasclass('left-bottom')) _sx+=_corp.width();
$(document).on('mousemove',function (e) {
e.preventdefault();
var _ex=e.pagex,_ey=e.pagey;
if(opt.fixedscale){
_ey=(_ex-_esx)/opt.fixedscale+_esy;
if(_that.hasclass('right-top') || _that.hasclass('left-bottom')){
_ey=(_esx-_ex)/opt.fixedscale+_esy;
}
}
getposition(_ex,_ey,_ty,_tx,_sx,_sy,_this)
})
$(document).on('mouseup',function () {
$(document).unbind('mousemove');
lock=false;
})
}) $('#cropboxline2 .left,#cropboxline2 .top,#cropboxline2 .right,#cropboxline2 .bottom').on('mousedown',function (e) {
if(opt.fixedscale) return //固定
lock=true;
var _that=$(this);
var _this=$('#photocropbox-bg');
var _tx=_this.offset().left;//
var _ty=_this.offset().top;
var _sx=_corp.offset().left,_sy=_corp.offset().top;
var ch=_corp.height(),cw=_corp.width();
if(_that.hasclass('top')){
_sy+=ch;
}else if(_that.hasclass('left')) {
_sx+=cw;
}
$(document).on('mousemove',function (e) {
e.preventdefault();
var _ex=e.pagex,_ey=e.pagey;
if(_that.hasclass('top') || _that.hasclass('bottom')){
if(!(_ey-_sy>0)){
var _x=_sx-_tx,_y=_ey-_ty,_w=cw,_h=-(_ey-_sy);
if(_y<0) {_y=0;_h=_sy-_ty;}
}else{
var _x=_sx-_tx,_y=_sy-_ty,_w=cw,_h=_ey-_sy;
if(_h>_this.height()-_y) _h=_this.height()-_y;
}
}else {
if(_ex-_sx>0 && _ey-_sy>0){
var _x=_sx-_tx,_y=_sy-_ty,_w=_ex-_sx,_h=ch;
if(_w>_this.width()-_x) _w=_this.width()-_x;
}else if(!(_ex-_sx>0) && _ey-_sy>0){
var _x=_ex-_tx,_y=_sy-_ty,_w=-(_ex-_sx),_h=ch;
if(_x<0) {_x=0;_w=_sx-_tx;}
}
}
resizecropbox(_w,_h,_y,_x);
})
$(document).on('mouseup',function () {
$(document).unbind('mousemove');
lock=false;
})
})
$('#photocropbox-start').on('click',function () {
_corp.css('display','block')
$('#photocropbox-bg').css('display','block')
})
$('#photocropbox-end').on('click',function () {
getimage()
closebox()
})
function init() {
setposition()
if(opt.fixedscale){
if((_box.height()-_box.width()/opt.fixedscale/2)<0){
resizecropbox(_box.height()*opt.fixedscale,_box.height(),0,(_box.width()-_box.height()*opt.fixedscale)/2)
}else {
resizecropbox(_box.width()/2,_box.width()/opt.fixedscale/2,(_box.height()-_box.width()/opt.fixedscale/2)/2,_box.width()/4)
}
}else {
resizecropbox(_box.width()/2,_box.height()/2,_box.height()/4,_box.width()/4)
}
if(opt.fixedscale) {
$('.bot.top,.bot.left,.bot.bottom,.bot.right').remove();//固定
}
}
function setposition() {
$('#photocropbox-panel').css({
top:($('#photocropbox-panel-box').height()-$('#photocropbox-panel').height())/2+'px',
left:($('#photocropbox-panel-box').width()-$('#photocropbox-panel').width())/2+'px',
opacity:1
})
}
//结束x,y 背景x,y
function getposition(_ex,_ey,_ty,_tx,_sx,_sy,_this) {
if(_ex-_sx>0 && _ey-_sy>0){
var _x=_sx-_tx,_y=_sy-_ty,_w=_ex-_sx,_h=_ey-_sy;
if(_w>_this.width()-_x) _w=_this.width()-_x;
if(_h>_this.height()-_y) _h=_this.height()-_y;
}else if(!(_ex-_sx>0) && _ey-_sy>0){
var _x=_ex-_tx,_y=_sy-_ty,_w=-(_ex-_sx),_h=_ey-_sy;
if(_x<0) {_x=0;_w=_sx-_tx;}
if(_h>_this.height()-_y) _h=_this.height()-_y;
}else if(!(_ex-_sx>0) && !(_ey-_sy>0)){
var _x=_ex-_tx,_y=_ey-_ty,_w=-(_ex-_sx),_h=-(_ey-_sy);
if(_x<0) {_x=0;_w=_sx-_tx;}
if(_y<0) {_y=0;_h=_sy-_ty;}
}else if(_ex-_sx>0 && !(_ey-_sy>0)){
var _x=_sx-_tx,_y=_ey-_ty,_w=_ex-_sx,_h=-(_ey-_sy);
if(_y<0) {_y=0;_h=_sy-_ty;}
if(_w>_this.width()-_x) _w=_this.width()-_x;
}
if(opt.fixedscale){
if(_w/opt.fixedscale>_h){
_w=_h*opt.fixedscale
}else if (_w<opt.fixedscale*_h){
_h=_w/opt.fixedscale
}
}
resizecropbox(_w,_h,_y,_x);
}
var c=document.getelementbyid("cropcanvas");
var ctx=c.getcontext("2d");
var img=$('#dataimg');
function getimage() {
var scale=$('#photocropbox-img').width()/$('#dataimg').width();
var sx=parseint(_corp.css('left'))/scale;
var sy=parseint(_corp.css('top'))/scale;
var swidth=parseint(_corp.css('width'))/scale;
var sheight=parseint(_corp.css('height'))/scale;
var c_img = new image;
c_img.onload = function () {
ctx.drawimage(c_img,sx,sy,swidth,sheight,0,0,swidth,sheight);
var url=c.todataurl("image/jpeg");
opt.callback(url);
};
c_img.crossorigin = 'anonymous'; //可选值：anonymous，*
c_img.src = imgsrc
c.width = swidth;
c.height = sheight;
}
//宽，高,top,left,m-是否是拖拽
function resizecropbox(w,h,t,l,m) {
_corp.css(prefix()+'transition','all 0s');
if(!m){
_corp.css({
width:w,
height:h,
top:t+'px',
left:l+'px'
})
}else {
_corp.css({
top:t+'px',
left:l+'px'
})
}
cropboxline.find('img').css({
top:-t+'px',
left:-l+'px'
})
}
function closebox() {
$('#photocropbox').remove();
}
function prefix() {
var prefixes=['','-ms-','-moz-','-webkit-','-o-'],i=0;
while (i < prefixes.length){
if($('body').css(prefixes[i]+'transition')){
return prefixes[i];
}
i++;
}
}
}
})(jquery)
3.绑定代码
$(function () {
$('.source').on('click',function () {
$(this).photocrop({
fixedscale:false,
ishead:false,
callback:function(url){
$('.target').attr('src',url)
},
});
})
})
2.宽高比例固定效果
代码：
$(function () {
$('.source').on('click',function () {
$(this).photocrop({
fixedscale:5/6,
ishead:false,
callback:function(url){
$('.target').attr('src',url)
},
});
})
})
3.头像裁剪效果
代码：
$(function () {
$('.source').on('click',function () {
$(this).photocrop({
fixedscale:1,
ishead:true,
callback:function(url){
$('.target').attr('src',url)
},
});
})
})
以上代码易修改，大家可以自行扩展。希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论