首页 web前端 js教程 jquery实现自定义图片裁剪功能代码分享

jquery实现自定义图片裁剪功能代码分享

Jan 23, 2018 am 09:25 AM
jquery 自定义 裁剪

图片自定义裁剪如何实现?本文主要介绍了jquery实现自定义图片裁剪功能,代码超级简单,易修改。下面跟着小编一起来看下吧,希望能帮助到大家。

1.自定义宽高效果

1.html 代码  index.html

1

2

3

4

5

6

7

8

9

10

11

12

<!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.添加插件代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

(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=$('<p 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="&#39;+imgSrc+&#39;" style="opacity: 0;position: absolute" alt=""><p id="photoCropBox-panel-box" style="position: relative;width: 100%;height: 100%;">' +

 '<p id="photoCropBox-panel" style="opacity:0;background: #eee;border-radius: 5px;max-width: &#39;+opt.maxWidth+&#39;px;max-height: &#39;+opt.maxHeight+&#39;px;position: absolute;text-align: center"><p id="photoCropBox-img" style="margin: 40px 60px 20px;display: inline-block;position: relative">' +

 '<img src="&#39;+imgSrc+&#39;" style="max-width: 100%;display: block;max-height: 100%;max-height: &#39;+(opt.maxHeight-110)+&#39;px;" alt=""></p><p 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></p></p>' +

 '</p></p>');

 $('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=$('<p id="photoCropBox-cropBox" style="position: absolute;z-index: 5;cursor: Move;display: none">' +

 '<p id="cropBoxLine" style="overflow: hidden;position: absolute;width: 100%;height: 100%;">' +

 '<img src="&#39;+imgSrc+&#39;" style="display: block;width: &#39;+_box.find(&#39;img&#39;).width()+&#39;px;position: absolute;max-height: none;max-width: none" alt="">' +

 '<p class="top line" style="width: 100%;height: 1px;top: 0;left: 0;"></p><p class="right line" style="height: 100%;width: 1px;top: 0;right: 0"></p>' +

 '<p class="line bottom" style="width: 100%;height: 1px;bottom: 0px;left: 0"></p><p class="left line" style="height: 100%;width: 1px;top: 0;left: 0"></p></p>' +

 '<p id="cropBoxLine2"><p class="left line2" style="height: 100%;width: 1px;top: 0;left: 0;cursor: w-resize"></p><p class="right line2" style="height: 100%;width: 1px;top: 0;right: 0;cursor: e-resize"></p><p class="top line2" style="width: 100%;height: 1px;top: 0;left: 0;cursor: n-resize;position: absolute"></p><p class="bottom line2" style="width: 100%;height: 1px;bottom: 0px;left: 0;cursor: s-resize"></p>' +

 '<p class="left bot" style="left: -3px;top: 50%;margin-top: -4px;cursor: w-resize"></p><p class="right bot" style="right: -3px;top: 50%;margin-top: -4px;cursor: e-resize"></p><p class="bottom bot" style="bottom: -3px;left: 50%;margin-left: -4px;cursor: s-resize"></p><p class="top bot" style="top: -3px;left: 50%;margin-left: -4px;cursor: n-resize"></p>' +

 '<p class="left-top bot" style="left: -3px;top: -3px;cursor: nw-resize"></p><p class="left-bottom bot" style="left: -3px;bottom: -3px;cursor: sw-resize"></p><p class="right-top bot" style="right: -3px;top: -3px;cursor: ne-resize"></p><p class="right-bottom bot"style="right: -3px;bottom: -3px;cursor: se-resize"></p></p></p>');

 var screen=$('<p 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"></p>')

 _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(&#39;mouseup&#39;,function () {

 $(document).unbind(&#39;mousemove&#39;);

 lock=false;

 })

 })

 $(&#39;#photoCropBox-start&#39;).on(&#39;click&#39;,function () {

 _corp.css(&#39;display&#39;,&#39;block&#39;)

 $(&#39;#photoCropBox-bg&#39;).css(&#39;display&#39;,&#39;block&#39;)

 })

 $(&#39;#photoCropBox-end&#39;).on(&#39;click&#39;,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) {

 $(&#39;.bot.top,.bot.left,.bot.bottom,.bot.right&#39;).remove();//固定

 }

 }

 function setPosition() {

 $(&#39;#photoCropBox-panel&#39;).css({

 top:($(&#39;#photoCropBox-panel-box&#39;).height()-$(&#39;#photoCropBox-panel&#39;).height())/2+&#39;px&#39;,

 left:($(&#39;#photoCropBox-panel-box&#39;).width()-$(&#39;#photoCropBox-panel&#39;).width())/2+&#39;px&#39;,

 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.绑定代码

1

2

3

4

5

6

7

8

9

10

11

12

$(function () {

 $('.source').on('click',function () {

 $(this).photoCrop({

 fixedScale:false,

 isHead:false,

 callBack:function(url){

 $('.target').attr('src',url)

 },

 });

 })

  

 })

登录后复制

2.宽高比例固定效果

代码:

1

2

3

4

5

6

7

8

9

10

11

$(function () {

 $('.source').on('click',function () {

 $(this).photoCrop({

 fixedScale:5/6,

 isHead:false,

 callBack:function(url){

 $('.target').attr('src',url)

 },

 });

 })

 })

登录后复制

3.头像裁剪效果

代码:

1

2

3

4

5

6

7

8

9

10

11

$(function () {

 $('.source').on('click',function () {

 $(this).photoCrop({

 fixedScale:1,

 isHead:true,

 callBack:function(url){

 $('.target').attr('src',url)

 },

 });

 })

 })

登录后复制

大家学会了吗?赶紧动手尝试一下吧。

相关推荐:

jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能

微信小程序图片选择区域实现裁剪功能方法教程

js+jquery实现图片裁剪功能_jquery

以上是jquery实现自定义图片裁剪功能代码分享的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

photoshop怎么把歪的图片裁剪成正的?ps裁剪倾斜照片教程 photoshop怎么把歪的图片裁剪成正的?ps裁剪倾斜照片教程 Mar 25, 2024 pm 10:07 PM

photoshop怎么把歪的图片裁剪成正的?ps裁剪倾斜照片教程

edius自定义屏幕布局的操作流程 edius自定义屏幕布局的操作流程 Mar 27, 2024 pm 06:50 PM

edius自定义屏幕布局的操作流程

excel怎么自定义x轴和y轴?(excel坐标轴刻度如何自定义) excel怎么自定义x轴和y轴?(excel坐标轴刻度如何自定义) Mar 14, 2024 pm 02:10 PM

excel怎么自定义x轴和y轴?(excel坐标轴刻度如何自定义)

jQuery中如何使用PUT请求方式? jQuery中如何使用PUT请求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式?

jQuery如何移除元素的height属性? jQuery如何移除元素的height属性? Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性?

jQuery小技巧:快速修改页面所有a标签的文本 jQuery小技巧:快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

jQuery小技巧:快速修改页面所有a标签的文本

使用jQuery修改所有a标签的文本内容 使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

使用jQuery修改所有a标签的文本内容

了解jQuery中eq的作用及应用场景 了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

了解jQuery中eq的作用及应用场景

See all articles