croppic.js 52 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299
  1. /*
  2. * CROPPIC
  3. * dependancy: jQuery
  4. * author: Ognjen "Zmaj Džedaj" Božičković and Mat Steinlin
  5. */
  6. (function (window, document) {
  7. Croppic = function (id, options) {
  8. var that = this;
  9. that.id = id;
  10. that.obj = $('#' + id);
  11. that.outputDiv = that.obj;
  12. that.imgUrl="";
  13. that.saveImgUrl="";
  14. that.imgBackground="";
  15. // DEFAULT OPTIONS
  16. that.options = {
  17. uploadUrl:'',
  18. uploadData:{},
  19. cropUrl:'',
  20. cropData:{},
  21. outputUrlId:'',
  22. absorptionUrl:'',
  23. //styles
  24. imgEyecandy:true,
  25. imgEyecandyOpacity:0.2,
  26. initialZoom:40,
  27. zoomFactor:10,
  28. rotateFactor:5,
  29. doubleZoomControls:true,
  30. rotateControls: true,
  31. modal:false,
  32. customUploadButtonId:'',
  33. customSaveButtonId:'',
  34. loaderHtml:'',
  35. scaleToFill: true,
  36. processInline: false,
  37. loadPicture:'',
  38. onReset: null,
  39. enableMousescroll: false,
  40. colorAbsorption:false,
  41. //callbacks
  42. onBeforeImgUpload: null,
  43. onAfterImgUpload: null,
  44. onImgDrag: null,
  45. onImgZoom: null,
  46. onImgRotate: null,
  47. onBeforeImgCrop: null,
  48. onAfterImgCrop: null,
  49. onBeforeRemoveCroppedImg: null,
  50. onAfterRemoveCroppedImg: null,
  51. onError: null,
  52. };
  53. // OVERWRITE DEFAULT OPTIONS
  54. for (i in options) that.options[i] = options[i];
  55. // INIT THE WHOLE DAMN THING!!!
  56. that.init();
  57. };
  58. Croppic.prototype = {
  59. id:'',
  60. imgInitW:0,
  61. imgInitH:0,
  62. imgW:0,
  63. imgH:0,
  64. actualRotationImgW:0,
  65. actualRotationImgH:0,
  66. objW:0,
  67. objH:0,
  68. actualRotation: 0,
  69. windowW:0,
  70. windowH:$(window).height(),
  71. obj:{},
  72. outputDiv:{},
  73. outputUrlObj:{},
  74. img:{},
  75. defaultImg:{},
  76. croppedImg:{},
  77. imgEyecandy:{},
  78. form:{},
  79. iframeform: {},
  80. iframeobj: {},
  81. cropControlsUpload:{},
  82. cropControlsCrop:{},
  83. cropControlZoomMuchIn:{},
  84. cropControlZoomMuchOut:{},
  85. cropControlZoomIn:{},
  86. cropControlZoomOut:{},
  87. cropControlCrop:{},
  88. cropControlReset:{},
  89. cropControlRemoveCroppedImage:{},
  90. cropControlOriginal:{},
  91. modal:{},
  92. loader:{},
  93. cropSaveControl:{},
  94. ctx:{},
  95. imgName:'',
  96. init: function () {
  97. var that = this;
  98. that.objW = that.obj.width();
  99. that.objH = that.obj.height();
  100. // reset rotation
  101. that.actualRotation = 0;
  102. that.actualRotationImgH=0;
  103. that.actualRotationImgW=0;
  104. that.colorAbsorption=false;
  105. that.imgBackground="";
  106. that.ctx={};
  107. that.imgName='';
  108. if( $.isEmptyObject(that.defaultImg)){ that.defaultImg = that.obj.find('img'); }
  109. that.createImgUploadControls();
  110. if( $.isEmptyObject(that.options.loadPicture)){
  111. that.bindImgUploadControl();
  112. }else{
  113. that.loadExistingImage();
  114. }
  115. },
  116. createImgUploadControls: function(){
  117. var that = this;
  118. var cropControlUpload = '';
  119. if(that.options.customUploadButtonId ===''){ cropControlUpload = '<i class="cropControlUpload"></i>'; }
  120. var cropControlRemoveCroppedImage = '<i class="cropControlRemoveCroppedImage"></i>';
  121. var cropControlOriginal = '<i class="cropControlOriginal"></i>';
  122. if( $.isEmptyObject(that.croppedImg))
  123. {
  124. cropControlRemoveCroppedImage='';
  125. cropControlOriginal='';
  126. }
  127. if( !$.isEmptyObject(that.options.loadPicture)){ cropControlUpload='';}
  128. var html = '<div class="cropControls cropControlsUpload"> ' + cropControlUpload + cropControlOriginal + cropControlRemoveCroppedImage + ' </div>';
  129. that.outputDiv.append(html);
  130. that.cropControlsUpload = that.outputDiv.find('.cropControlsUpload');
  131. if(that.options.customUploadButtonId ===''){ that.imgUploadControl = that.outputDiv.find('.cropControlUpload'); }
  132. else{ that.imgUploadControl = $('#'+that.options.customUploadButtonId); that.imgUploadControl.show(); }
  133. if(that.options.customSaveButtonId !==''){
  134. that.cropSaveControl= $('#'+that.options.customSaveButtonId); that.cropSaveControl.hide();
  135. }
  136. if( !$.isEmptyObject(that.croppedImg)){
  137. that.cropControlRemoveCroppedImage = that.outputDiv.find('.cropControlRemoveCroppedImage');
  138. that.cropControlOriginal = that.outputDiv.find('.cropControlOriginal');
  139. }
  140. },
  141. bindImgUploadControl: function(){
  142. var that = this;
  143. // CREATE UPLOAD IMG FORM
  144. var formHtml = '<form class="' + that.id + '_imgUploadForm" style="visibility: hidden;"> <input type="file" name="img" id="' + that.id + '_imgUploadField"> </form>';
  145. that.outputDiv.append(formHtml);
  146. that.form = that.outputDiv.find('.'+that.id+'_imgUploadForm');
  147. // CREATE FALLBACK IE9 IFRAME
  148. var fileUploadId = that.CreateFallbackIframe();
  149. that.imgUploadControl.off('click');
  150. that.imgUploadControl.on('click',function(){
  151. if (fileUploadId === "") {
  152. that.form.find('input[type="file"]').trigger('click');
  153. } else {
  154. //Trigger iframe file input click, otherwise access restriction error
  155. that.iframeform.find('input[type="file"]').trigger('click');
  156. }
  157. });
  158. that.cropSaveControl.off('click');
  159. that.cropSaveControl.on('click',function(){
  160. // var res = confirm('您确定要使用编辑好的图片吗?\n\r' +
  161. // '[确认]使用图片\n\r' +
  162. // '[取消]继续编辑');
  163. // if (res) {
  164. // that.destroy();
  165. // window.location.href="https://wwww.croppic.com?"+that.saveImgUrl;
  166. // }
  167. that.destroy();
  168. window.location.href="https://wwww.croppic.com?"+that.saveImgUrl;
  169. });
  170. if( !$.isEmptyObject(that.croppedImg)){
  171. that.cropControlRemoveCroppedImage.on('click',function(){
  172. if (typeof (that.options.onBeforeRemoveCroppedImg) === typeof(Function)) {
  173. that.options.onBeforeRemoveCroppedImg.call(that);
  174. }
  175. var res = confirm('您是要使用当前图片还是重新选择图片?\n\r' +
  176. '[确认] 使用当前图片\n\r' +
  177. '[取消] 重新选择图片');
  178. var width= that.imgInitW;
  179. var height= that.imgInitH;
  180. that.croppedImg.remove();
  181. that.croppedImg = {};
  182. $(this).hide();
  183. that.cropSaveControl.hide();
  184. that.cropControlOriginal.hide();
  185. if (typeof (that.options.onAfterRemoveCroppedImg) === typeof(Function)) {
  186. that.options.onAfterRemoveCroppedImg.call(that);
  187. }
  188. if( !$.isEmptyObject(that.defaultImg)){
  189. that.obj.append(that.defaultImg);
  190. }
  191. if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); }
  192. that.imgUploadControl.show();
  193. if (res) {
  194. that.showLoader();
  195. that.imgUploadControl.hide();
  196. if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
  197. that.imgInitW = that.imgW = width;
  198. that.imgInitH = that.imgH = height;
  199. that.saveImgUrl="";
  200. that.obj.append('<img src="'+that.imgUrl+'">');
  201. that.initCropper();
  202. that.hideLoader();
  203. }
  204. });
  205. that.cropControlOriginal.on('click',function(){
  206. if (that.imgUrl=='')
  207. {
  208. alert('请选择图片' );
  209. return;
  210. }
  211. var res = confirm('您确定要使用原图吗?\n\r' +
  212. '[确认] 使用原图\n\r' +
  213. '[取消] 继续编辑');
  214. if (res) {
  215. that.destroy();
  216. window.location.href="https://wwww.croppic.com?"+that.imgUrl;
  217. }
  218. });
  219. }
  220. that.form.find('input[type="file"]').change(function(){
  221. if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);
  222. that.showLoader();
  223. that.imgUploadControl.hide();
  224. if(that.options.processInline){
  225. // Checking Browser Support for FileReader API
  226. if (typeof FileReader == "undefined"){
  227. if (that.options.onError) that.options.onError.call(that,"processInline is not supported by your Browser");
  228. that.reset();
  229. }else{
  230. var filePath=that.form.find('input[type="file"]')[0].files[0];
  231. if( !$.isEmptyObject(that.croppedImg)){
  232. that.destroy();
  233. }
  234. var reader = new FileReader();
  235. reader.onload = function (e) {
  236. var image = new Image();
  237. image.src = e.target.result;
  238. image.onload = function(){
  239. that.imgInitW = that.imgW = image.width;
  240. that.imgInitH = that.imgH = image.height;
  241. if(that.options.modal){ that.createModal(); }
  242. if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
  243. that.imgUrl=image.src;
  244. that.saveImgUrl="";
  245. that.obj.append('<img src="'+image.src+'">');
  246. that.initCropper();
  247. that.hideLoader();
  248. if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
  249. }
  250. };
  251. reader.readAsDataURL(filePath);
  252. }
  253. } else {
  254. try {
  255. // other modern browsers
  256. formData = new FormData(that.form[0]);
  257. } catch(e) {
  258. // IE10 MUST have all form items appended as individual form key / value pairs
  259. formData = new FormData();
  260. formData.append('img', that.form.find("input[type=file]")[0].files[0]);
  261. }
  262. for (var key in that.options.uploadData) {
  263. if( that.options.uploadData.hasOwnProperty(key) ) {
  264. formData.append( key , that.options.uploadData[key] );
  265. }
  266. }
  267. $.ajax({
  268. url: that.options.uploadUrl,
  269. data: formData,
  270. context: document.body,
  271. cache: false,
  272. contentType: false,
  273. processData: false,
  274. type: 'POST'
  275. }).always(function (data) {
  276. that.afterUpload(data);
  277. });
  278. }
  279. });
  280. },
  281. loadExistingImage: function(){
  282. var that = this;
  283. if( $.isEmptyObject(that.croppedImg)){
  284. if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);
  285. that.showLoader();
  286. if(that.options.modal){ that.createModal(); }
  287. if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
  288. that.imgUrl=that.options.loadPicture ;
  289. var img =$('<img src="'+ that.options.loadPicture +'">');
  290. that.obj.append(img);
  291. img.load(function() {
  292. that.imgInitW = that.imgW = this.width;
  293. that.imgInitH = that.imgH = this.height;
  294. that.initCropper();
  295. that.hideLoader();
  296. if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
  297. });
  298. }else{
  299. that.cropControlRemoveCroppedImage.on('click',function(){
  300. var res = confirm('您是要使用当前图片还是重新选择图片?\n\r' +
  301. '[确认] 使用当前图片\n\r' +
  302. '[取消] 重新选择图片');
  303. var width= that.imgInitW;
  304. var height= that.imgInitH;
  305. that.croppedImg.remove();
  306. $(this).hide();
  307. that.cropSaveControl.hide();
  308. that.cropControlOriginal.hide();
  309. if( !$.isEmptyObject(that.defaultImg)){
  310. that.obj.append(that.defaultImg);
  311. }
  312. if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); }
  313. that.croppedImg = '';
  314. that.reset();
  315. if (res) {
  316. that.showLoader();
  317. that.imgUploadControl.hide();
  318. if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
  319. that.imgInitW = that.imgW = width;
  320. that.imgInitH = that.imgH = height;
  321. that.saveImgUrl="";
  322. that.obj.append('<img src="'+that.imgUrl+'">');
  323. that.initCropper();
  324. that.hideLoader();
  325. }
  326. });
  327. }
  328. },
  329. afterUpload: function(data){
  330. var that = this;
  331. response = typeof data =='object' ? data : jQuery.parseJSON(data);
  332. if (response.status == 'success') {
  333. that.imgInitW = that.imgW = response.width;
  334. that.imgInitH = that.imgH = response.height;
  335. if (that.options.modal) { that.createModal(); }
  336. if (!$.isEmptyObject(that.croppedImg)) { that.croppedImg.remove(); }
  337. that.imgUrl = response.url;
  338. var img = $('<img src="'+response.url+'">')
  339. that.obj.append(img);
  340. img.load(function(){
  341. that.initCropper();
  342. that.hideLoader();
  343. if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
  344. });
  345. if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);
  346. }
  347. if (response.status == 'error') {
  348. alert(response.message);
  349. if (that.options.onError) that.options.onError.call(that,response.message);
  350. that.hideLoader();
  351. // setTimeout( function(){ that.reset(); },2000)
  352. }
  353. },
  354. createModal: function(){
  355. var that = this;
  356. var marginTop = that.windowH/2-that.objH/2;
  357. var modalHTML = '<div id="croppicModal">'+'<div id="croppicModalObj" style="width:'+ that.objW +'px; height:'+ that.objH +'px; margin:0 auto; margin-top:'+ marginTop +'px; position: relative;"> </div>'+'</div>';
  358. $('body').append(modalHTML);
  359. that.modal = $('#croppicModal');
  360. that.obj = $('#croppicModalObj');
  361. },
  362. destroyModal: function(){
  363. var that = this;
  364. that.obj = that.outputDiv;
  365. that.modal.remove();
  366. that.modal = {};
  367. },
  368. initCropper: function(){
  369. var that = this;
  370. /*SET UP SOME VARS*/
  371. that.img = that.obj.find('img');
  372. that.img.wrap('<div class="cropImgWrapper" style="overflow:hidden; z-index:1; position:absolute; width:'+that.objW+'px; height:'+that.objH+'px;"></div>');
  373. /*INIT DRAGGING*/
  374. that.createCropControls();
  375. if(that.options.imgEyecandy){ that.createEyecandy(); }
  376. that.initDrag();
  377. that.initialScaleImg();
  378. },
  379. createEyecandy: function(){
  380. var that = this;
  381. that.imgEyecandy = that.img.clone();
  382. that.imgEyecandy.css({'z-index':'0','opacity':that.options.imgEyecandyOpacity}).appendTo(that.obj);
  383. },
  384. destroyEyecandy: function(){
  385. var that = this;
  386. that.imgEyecandy.remove();
  387. },
  388. initialScaleImg:function(){
  389. var that = this;
  390. that.zoom(0);
  391. that.zoom(that.options.initialZoom);
  392. // Adding mousewheel zoom capabilities
  393. if (that.options.enableMousescroll){
  394. that.img.on('mousewheel', function(event) {
  395. event.preventDefault();
  396. if (that.colorAbsorption)
  397. {
  398. return;
  399. }
  400. that.zoom(that.options.zoomFactor*event.deltaY);
  401. });
  402. }
  403. // initial center image
  404. that.img.css({'left': -(that.imgW -that.objW)/2, 'top': -(that.imgH -that.objH)/2, 'position':'relative'});
  405. if(that.options.imgEyecandy){ that.imgEyecandy.css({'left': -(that.imgW -that.objW)/2, 'top': -(that.imgH -that.objH)/2, 'position':'relative'}); }
  406. },
  407. createCropControls: function(){
  408. var that = this;
  409. // CREATE CONTROLS
  410. var cropControlZoomMuchIn = '';
  411. var cropControlZoomIn = '<i class="cropControlZoomIn"></i>';
  412. var cropControlZoomOut = '<i class="cropControlZoomOut"></i>';
  413. var cropControlZoomMuchOut = '';
  414. var cropControlRotateLeft = '';
  415. var cropControlRotateRight = '';
  416. var cropControlRotateMuchLeft = '';
  417. var cropControlRotateMuchRight = '';
  418. var cropControlCrop = '<i class="cropControlCrop"></i>';
  419. var cropControlReset = '<i class="cropControlReset"></i>';
  420. var cropControlOriginal = '<i class="cropControlOriginal"></i>';
  421. var cropControlXiColor = '<i class="cropControlXiColor"></i>';
  422. var cropControlXiColor2 = '<i class="cropControlXiColor2"></i>';
  423. var cropControlSetColor = '<i class="cropControlSetColor"></i>';
  424. var html;
  425. if(that.options.doubleZoomControls){
  426. cropControlZoomMuchIn = '<i class="cropControlZoomMuchIn"></i>';
  427. cropControlZoomMuchOut = '<i class="cropControlZoomMuchOut"></i>';
  428. }
  429. if(that.options.rotateControls){
  430. cropControlRotateLeft = '<i class="cropControlRotateLeft"></i>';
  431. cropControlRotateRight = '<i class="cropControlRotateRight"></i>';
  432. cropControlRotateMuchLeft = '<i class="cropControlRotateMuchLeft"></i>';
  433. cropControlRotateMuchRight = '<i class="cropControlRotateMuchRight"></i>';
  434. }
  435. html = '<div class="cropControls cropControlsCrop">'+ cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut
  436. + cropControlRotateMuchLeft+ cropControlRotateLeft + cropControlRotateRight + cropControlRotateMuchRight + cropControlCrop + '</div>';
  437. that.obj.append(html);
  438. html = '<div class="cropControls cropControlsCrop cropControlsUpload">' + cropControlXiColor2 + cropControlXiColor+ cropControlSetColor + cropControlOriginal + cropControlReset + '</div>';
  439. that.obj.append(html);
  440. that.cropControlsCrop = that.obj.find('.cropControlsCrop');
  441. // CACHE AND BIND CONTROLS
  442. if(that.options.doubleZoomControls){
  443. that.cropControlZoomMuchIn = that.cropControlsCrop.find('.cropControlZoomMuchIn');
  444. that.cropControlZoomMuchIn.on('click',function(){ that.zoom( that.options.zoomFactor*10 ); });
  445. that.cropControlZoomMuchOut = that.cropControlsCrop.find('.cropControlZoomMuchOut');
  446. that.cropControlZoomMuchOut.on('click',function(){ that.zoom(-that.options.zoomFactor*10); });
  447. }
  448. that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlZoomIn');
  449. that.cropControlZoomIn.on('click',function(){ that.zoom(that.options.zoomFactor); });
  450. that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlZoomOut');
  451. that.cropControlZoomOut.on('click',function(){ that.zoom(-that.options.zoomFactor); });
  452. that.cropControlRotateLeft = that.cropControlsCrop.find('.cropControlRotateLeft');
  453. that.cropControlRotateLeft.on('click', function() { that.rotate(-0.5);});
  454. that.cropControlRotateMuchLeft = that.cropControlsCrop.find('.cropControlRotateMuchLeft');
  455. that.cropControlRotateMuchLeft.on('click', function() { that.rotate(-10);});
  456. that.cropControlRotateRight = that.cropControlsCrop.find('.cropControlRotateRight');
  457. that.cropControlRotateRight.on('click', function() {that.rotate(0.5);});
  458. that.cropControlRotateMuchRight = that.cropControlsCrop.find('.cropControlRotateMuchRight');
  459. that.cropControlRotateMuchRight.on('click', function() {that.rotate(10);});
  460. that.cropControlCrop = that.cropControlsCrop.find('.cropControlCrop');
  461. that.cropControlCrop.on('click',function(){ that.crop(); });
  462. that.cropControlReset = that.cropControlsCrop.find('.cropControlReset');
  463. that.cropControlReset.on('click',function(){
  464. var res = confirm('您是要使用当前图片还是重新选择图片?\n\r' +
  465. '[确认] 使用当前图片\n\r' +
  466. '[取消] 重新选择图片');
  467. var width= that.imgInitW;
  468. var height= that.imgInitH;
  469. that.reset();
  470. if (res) {
  471. that.showLoader();
  472. that.imgUploadControl.hide();
  473. if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }
  474. that.imgInitW = that.imgW = width;
  475. that.imgInitH = that.imgH = height;
  476. that.saveImgUrl="";
  477. that.obj.append('<img src="'+that.imgUrl+'">');
  478. that.initCropper();
  479. that.hideLoader();
  480. }
  481. });
  482. that.cropControlOriginal = that.cropControlsCrop.find('.cropControlOriginal');
  483. that.cropControlOriginal.on('click',function(){
  484. if (that.imgUrl=='')
  485. {
  486. alert('请选择图片' );
  487. return;
  488. }
  489. var res = confirm('您确定要使用原图吗?\n\r' +
  490. '[确认] 使用原图\n\r' +
  491. '[取消] 继续编辑');
  492. if (res) {
  493. that.destroy();
  494. window.location.href="https://wwww.croppic.com?"+that.imgUrl;
  495. }
  496. });
  497. that.cropControlXiColor = that.cropControlsCrop.find('.cropControlXiColor');
  498. that.cropControlXiColor.on('click',function(){that.colorOnClick(false);});
  499. that.cropControlXiColor2 = that.cropControlsCrop.find('.cropControlXiColor2');
  500. that.cropControlXiColor2.on('click',function(){that.colorOnClick(false);});
  501. that.cropControlSetColor= that.cropControlsCrop.find('.cropControlSetColor');
  502. that.cropControlSetColor.on('click',function(){that.colorOnClick(true);});
  503. that.colpick=that.cropControlSetColor.colpick({
  504. onSubmit:function(hsb,hex,rgb,el) {
  505. var background="rgb("+rgb.r+","+rgb.g+","+rgb.b+")";
  506. that.obj.find('.cropImgWrapper').css('background',background);
  507. $(el).colpickHide();
  508. that.imgBackground=background;
  509. }
  510. });
  511. },
  512. colorOnClick:function(input)
  513. {
  514. var that = this;
  515. if (that.colorAbsorption||input)
  516. {
  517. that.cropControlsCrop.find('.cropControlXiColor').css("display","block");
  518. that.cropControlsCrop.find('.cropControlXiColor2').css("display","none");
  519. that.colorAbsorption=false;
  520. }else {
  521. that.cropControlsCrop.find('.cropControlXiColor').css("display","none");
  522. that.cropControlsCrop.find('.cropControlXiColor2').css("display","block");
  523. that.colorAbsorption=true;
  524. }
  525. },
  526. absorption:function(pageX,pageY){
  527. var that = this;
  528. that.showLoader();
  529. that.cropControlsCrop.hide();
  530. var cropData;
  531. if (that.imgName=='')
  532. {
  533. cropData = {
  534. imgUrl:that.imgUrl,
  535. imgInitW:that.imgInitW,
  536. imgInitH:that.imgInitH,
  537. imgW:that.imgW,
  538. imgH:that.imgH,
  539. imgY1:parseInt( that.img.css('top') ),
  540. imgX1: parseInt( that.img.css('left')),
  541. cropH:that.objH,
  542. cropW:that.objW,
  543. rotation:that.actualRotation,
  544. pageX:pageX,
  545. pageY:pageY,
  546. imgBackground:that.imgBackground
  547. };
  548. }else {
  549. cropData = {
  550. imgName:that.imgName,
  551. imgInitW:that.imgInitW,
  552. imgInitH:that.imgInitH,
  553. imgW:that.imgW,
  554. imgH:that.imgH,
  555. imgY1:parseInt( that.img.css('top') ),
  556. imgX1: parseInt( that.img.css('left')),
  557. cropH:that.objH,
  558. cropW:that.objW,
  559. rotation:that.actualRotation,
  560. pageX:pageX,
  561. pageY:pageY,
  562. imgBackground:that.imgBackground
  563. };
  564. }
  565. var formData = new FormData();
  566. for (var key in cropData) {
  567. if( cropData.hasOwnProperty(key) ) {
  568. formData.append( key , cropData[key] );
  569. }
  570. }
  571. $.ajax({
  572. url: that.options.absorptionUrl,
  573. data: formData,
  574. context: document.body,
  575. cache: false,
  576. contentType: false,
  577. processData: false,
  578. type: 'POST'
  579. }).always(function (data) {
  580. var response;
  581. try {
  582. response = jQuery.parseJSON(data);
  583. }
  584. catch(err) {
  585. response = typeof data =='object' ? data : jQuery.parseJSON(data);
  586. }
  587. if (response.status == 'success') {
  588. that.imgName=response.imgName;
  589. var rgb={r:response.r,g:response.g,b:response.b};
  590. var background="rgb("+rgb.r+","+rgb.g+","+rgb.b+")";
  591. that.obj.find('.cropImgWrapper').css("background",background);
  592. that.imgBackground=background;
  593. that.cropControlSetColor.colpickSetColor(rgb);
  594. }else if (response.status == 'error') {
  595. if (that.options.onError) that.options.onError.call(that,response.message);
  596. }else {
  597. if (that.options.onError) that.options.onError.call(that,"处理失败");
  598. }
  599. that.cropControlsCrop.show();
  600. that.hideLoader();
  601. });
  602. },
  603. initDrag:function(){
  604. var that = this;
  605. that.img.on("mousedown touchstart", function(e) {
  606. e.preventDefault(); // disable selection
  607. var pageX;
  608. var pageY;
  609. var userAgent = window.navigator.userAgent;
  610. if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) {
  611. pageX = e.originalEvent.touches[0].pageX;
  612. pageY = e.originalEvent.touches[0].pageY;
  613. } else {
  614. pageX = e.pageX;
  615. pageY = e.pageY;
  616. }
  617. var z_idx = that.img.css('z-index'),
  618. drg_h = that.img.outerHeight(),
  619. drg_w = that.img.outerWidth(),
  620. pos_y = that.img.offset().top + drg_h - pageY,
  621. pos_x = that.img.offset().left + drg_w - pageX;
  622. if (that.colorAbsorption)
  623. {
  624. if (that.actualRotation!==0)
  625. {
  626. that.absorption(pageX-10,pageY-50);
  627. return;
  628. }
  629. var ml=that.imgInitW/that.imgW;
  630. var x = pageX-parseInt( that.img.css('left'))-10;
  631. var y = pageY-parseInt( that.img.css('top'))-50;
  632. x=parseInt(x*ml);
  633. y=parseInt(y*ml);
  634. if (!(x<0||x>that.imgInitW||y<0||y>that.imgInitH))
  635. {
  636. var imgData={};
  637. if( $.isEmptyObject(that.ctx))
  638. {
  639. var canvas = document.createElement("canvas");
  640. if (!canvas.getContext) {
  641. alert("浏览器版本太低无法使用吸色!");
  642. return;
  643. }
  644. that.ctx= canvas.getContext("2d");
  645. var newImg = new Image();
  646. newImg.onload = function(){
  647. canvas.width = that.imgInitW;
  648. canvas.height = that.imgInitH;
  649. that.ctx.drawImage(newImg, 0, 0);
  650. imgData = that.ctx.getImageData(x, y, 1, 1);
  651. var rgb = {r:imgData.data[0],g:imgData.data[1],b:imgData.data[2]};
  652. var background="rgb("+rgb.r+","+rgb.g+","+rgb.b+")";
  653. that.obj.find('.cropImgWrapper').css("background",background);
  654. that.imgBackground=background;
  655. that.cropControlSetColor.colpickSetColor(rgb);
  656. }
  657. newImg.src = that.imgUrl;
  658. }else {
  659. imgData = that.ctx.getImageData(x, y, 1, 1);
  660. var rgb = {r:imgData.data[0],g:imgData.data[1],b:imgData.data[2]};
  661. var background="rgb("+rgb.r+","+rgb.g+","+rgb.b+")";
  662. that.obj.find('.cropImgWrapper').css("background",background);
  663. that.imgBackground=background;
  664. that.cropControlSetColor.colpickSetColor(rgb);
  665. }
  666. }
  667. return;
  668. }
  669. that.img.css('z-index', 1000).on("mousemove touchmove", function(e) {
  670. if (that.colorAbsorption)
  671. {
  672. return;
  673. }
  674. var imgTop;
  675. var imgLeft;
  676. if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) {
  677. imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h;
  678. imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w;
  679. } else {
  680. imgTop = e.pageY + pos_y - drg_h;
  681. imgLeft = e.pageX + pos_x - drg_w;
  682. }
  683. that.img.offset({
  684. top:imgTop,
  685. left:imgLeft
  686. }).on("mouseup", function() {
  687. $(this).removeClass('draggable').css('z-index', z_idx);
  688. });
  689. if(that.options.imgEyecandy){ that.imgEyecandy.offset({ top:imgTop, left:imgLeft }); }
  690. var top=that.actualRotationImgH;
  691. var left=that.actualRotationImgW;
  692. if (that.objH < that.imgH+top*2) {
  693. if (parseInt(that.img.css('top')) > top) { that.img.css('top', top); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', top);}}
  694. var maxTop = -( that.imgH - that.objH+top); if (parseInt(that.img.css('top')) < maxTop) { that.img.css('top', maxTop); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', maxTop); }}
  695. }else{
  696. if (parseInt(that.img.css('top')) < -top) { that.img.css('top', -top); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', top); }}
  697. var maxTop = that.objH - that.imgH+top; if (parseInt(that.img.css('top')) > maxTop) { that.img.css('top', maxTop);if (that.options.imgEyecandy) {that.imgEyecandy.css('top', maxTop); }}
  698. }
  699. if (that.objW < that.imgW+2*left) {
  700. if( parseInt( that.img.css('left')) > left ){ that.img.css('left',left); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', left); }}
  701. var maxLeft = -( that.imgW-that.objW+left); if( parseInt( that.img.css('left')) < maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } }
  702. }else{
  703. if( parseInt( that.img.css('left')) < -left ){ that.img.css('left',-left); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }}
  704. var maxLeft = ( that.objW - that.imgW+left); if( parseInt( that.img.css('left')) > maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } }
  705. }
  706. if (that.options.onImgDrag) that.options.onImgDrag.call(that);
  707. });
  708. }).on("mouseup", function() {
  709. that.img.off("mousemove");
  710. }).on("mouseout", function() {
  711. that.img.off("mousemove");
  712. });
  713. },
  714. rotate: function(x) {
  715. var that = this;
  716. that.colorOnClick(true);
  717. that.actualRotation += x;
  718. that.img.css({
  719. '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)',
  720. '-moz-transform': 'rotate(' + that.actualRotation + 'deg)',
  721. 'transform': 'rotate(' + that.actualRotation + 'deg)',
  722. });
  723. if(that.options.imgEyecandy) {
  724. that.imgEyecandy.css({
  725. '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)',
  726. '-moz-transform': 'rotate(' + that.actualRotation + 'deg)',
  727. 'transform': 'rotate(' + that.actualRotation + 'deg)',
  728. });
  729. }
  730. that.actualRotationImgH=0;
  731. that.actualRotationImgW=0;
  732. if (that.actualRotation!=0)
  733. {
  734. var actualRotation=that.actualRotation;
  735. if (actualRotation<0)
  736. {
  737. actualRotation=0-actualRotation;
  738. }
  739. if (actualRotation==90||actualRotation==270)
  740. {
  741. if(that.imgH>that.imgW)
  742. {
  743. that.actualRotationImgW=parseInt((that.imgH-that.imgW)/2);
  744. }else if(that.imgH<that.imgW)
  745. {
  746. that.actualRotationImgH=parseInt((that.imgW-that.imgH)/2);
  747. }
  748. }else if (actualRotation!=180&&actualRotation!=360) {
  749. if (actualRotation>180)
  750. {
  751. actualRotation=actualRotation-180;
  752. }
  753. if (actualRotation>90)
  754. {
  755. actualRotation=180-actualRotation;
  756. }
  757. var radian = Math.sin(actualRotation * Math.PI / 180);
  758. that.actualRotationImgW=parseInt(radian*(that.imgH)/2);
  759. that.actualRotationImgH=parseInt(radian*(that.imgW)/2);
  760. }
  761. }
  762. if (typeof that.options.onImgRotate == 'function')
  763. that.options.onImgRotate.call(that);
  764. },
  765. zoom :function(x){
  766. var that = this;
  767. that.colorOnClick(true);
  768. var ratio = that.imgW / that.imgH;
  769. var newWidth = that.imgW+x;
  770. var newHeight = newWidth/ratio;
  771. var doPositioning = true;
  772. if (x==0)
  773. {
  774. if( newWidth - that.objW < newHeight - that.objH ){
  775. newWidth = that.objW;
  776. newHeight = newWidth/ratio;
  777. }else{
  778. newHeight = that.objH;
  779. newWidth = ratio * newHeight;
  780. }
  781. }
  782. if( newWidth < that.objW || newHeight < that.objH){
  783. doPositioning = false;
  784. }
  785. if(!that.options.scaleToFill && (newWidth > that.imgInitW || newHeight > that.imgInitH)){
  786. doPositioning = false;
  787. }
  788. that.imgW = newWidth;
  789. that.img.width(newWidth);
  790. that.imgH = newHeight;
  791. that.img.height(newHeight);
  792. var newTop = parseInt( that.img.css('top') ) - x/2;
  793. var newLeft = parseInt( that.img.css('left') ) - x/2;
  794. that.actualRotationImgH=0;
  795. that.actualRotationImgW=0;
  796. if (that.actualRotation!=0)
  797. {
  798. var actualRotation=that.actualRotation;
  799. if (actualRotation<0)
  800. {
  801. actualRotation=0-actualRotation;
  802. }
  803. if (actualRotation==90||actualRotation==270)
  804. {
  805. if(that.imgH>that.imgW)
  806. {
  807. that.actualRotationImgW=parseInt((that.imgH-that.imgW)/2);
  808. }else if(that.imgH<that.imgW)
  809. {
  810. that.actualRotationImgH=parseInt((that.imgW-that.imgH)/2);
  811. }
  812. }else if (actualRotation!=180&&actualRotation!=360) {
  813. if (actualRotation>180)
  814. {
  815. actualRotation=actualRotation-180;
  816. }
  817. if (actualRotation>90)
  818. {
  819. actualRotation=180-actualRotation;
  820. }
  821. var radian = Math.sin(actualRotation * Math.PI / 180);
  822. that.actualRotationImgW=parseInt(radian*(that.imgH)/2);
  823. that.actualRotationImgH=parseInt(radian*(that.imgW)/2);
  824. }
  825. }
  826. if( newTop>-that.actualRotationImgH ){ newTop=-that.actualRotationImgH;}
  827. if( newLeft>-that.actualRotationImgW ){ newLeft=-that.actualRotationImgW;}
  828. var maxTop = -( newHeight-that.objH+that.actualRotationImgH); if( newTop < maxTop){ newTop = maxTop; }
  829. var maxLeft = -( newWidth-that.objW+that.actualRotationImgW); if( newLeft < maxLeft){ newLeft = maxLeft; }
  830. if( doPositioning ){
  831. that.img.css({'top':newTop, 'left':newLeft});
  832. }
  833. if(that.options.imgEyecandy){
  834. that.imgEyecandy.width(newWidth);
  835. that.imgEyecandy.height(newHeight);
  836. if( doPositioning ){
  837. that.imgEyecandy.css({'top':newTop, 'left':newLeft});
  838. }
  839. }
  840. if (that.options.onImgZoom) that.options.onImgZoom.call(that);
  841. },
  842. crop:function(){
  843. var that = this;
  844. that.colorOnClick(true);
  845. if (that.options.onBeforeImgCrop) that.options.onBeforeImgCrop.call(that);
  846. that.cropControlsCrop.hide();
  847. that.showLoader();
  848. var cropData;
  849. if (that.imgName=='')
  850. {
  851. cropData = {
  852. imgUrl:that.imgUrl,
  853. imgInitW:that.imgInitW,
  854. imgInitH:that.imgInitH,
  855. imgW:that.imgW,
  856. imgH:that.imgH,
  857. imgY1:parseInt( that.img.css('top') ),
  858. imgX1: parseInt( that.img.css('left')),
  859. cropH:that.objH,
  860. cropW:that.objW,
  861. rotation:that.actualRotation,
  862. imgBackground:that.imgBackground
  863. };
  864. }else {
  865. cropData = {
  866. imgName:that.imgName,
  867. imgInitW:that.imgInitW,
  868. imgInitH:that.imgInitH,
  869. imgW:that.imgW,
  870. imgH:that.imgH,
  871. imgY1:parseInt( that.img.css('top') ),
  872. imgX1: parseInt( that.img.css('left')),
  873. cropH:that.objH,
  874. cropW:that.objW,
  875. rotation:that.actualRotation,
  876. imgBackground:that.imgBackground
  877. };
  878. }
  879. var formData;
  880. if(typeof FormData == 'undefined'){
  881. var XHR = new XMLHttpRequest();
  882. var urlEncodedData = "";
  883. var urlEncodedDataPairs = [];
  884. for(var key in cropData) {
  885. urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(cropData[key]));
  886. }
  887. for(var key in that.options.cropData) {
  888. urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(that.options.cropData[key]));
  889. }
  890. urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
  891. XHR.addEventListener('error', function(event) {
  892. if (that.options.onError) that.options.onError.call(that,"XHR Request failed");
  893. });
  894. XHR.onreadystatechange=function(){
  895. if (XHR.readyState==4 && XHR.status==200)
  896. {
  897. that.afterCrop(XHR.responseText);
  898. }
  899. }
  900. XHR.open('POST', that.options.cropUrl);
  901. XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  902. XHR.setRequestHeader('Content-Length', urlEncodedData.length);
  903. XHR.send(urlEncodedData);
  904. }else{
  905. formData = new FormData();
  906. for (var key in cropData) {
  907. if( cropData.hasOwnProperty(key) ) {
  908. formData.append( key , cropData[key] );
  909. }
  910. }
  911. for (var key in that.options.cropData) {
  912. if( that.options.cropData.hasOwnProperty(key) ) {
  913. formData.append( key , that.options.cropData[key] );
  914. }
  915. }
  916. $.ajax({
  917. url: that.options.cropUrl,
  918. data: formData,
  919. context: document.body,
  920. cache: false,
  921. contentType: false,
  922. processData: false,
  923. type: 'POST'
  924. }).always(function (data) {
  925. that.afterCrop(data);
  926. });
  927. }
  928. //
  929. },
  930. afterCrop: function (data) {
  931. var that = this;
  932. that.colorOnClick(true);
  933. try {
  934. response = jQuery.parseJSON(data);
  935. }
  936. catch(err) {
  937. response = typeof data =='object' ? data : jQuery.parseJSON(data);
  938. }
  939. if (response.status == 'success') {
  940. if (that.options.imgEyecandy)
  941. that.imgEyecandy.hide();
  942. that.destroy();
  943. that.saveImgUrl='product_image_crop_md5,'+response.md5+','+response.url;
  944. var croppedImg='<img class="croppedImg" src="' + response.url + '">';
  945. that.obj.append(croppedImg);
  946. if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(response.url); }
  947. that.croppedImg = that.obj.find('.croppedImg');
  948. that.croppedImg .width(that.objW+"px").height(that.objH+"px");
  949. that.init();
  950. that.hideLoader();
  951. that.imgUploadControl.hide();
  952. that.cropSaveControl.show();
  953. }else if (response.status == 'error') {
  954. if (that.options.onError) that.options.onError.call(that,response.message);
  955. that.hideLoader();
  956. that.cropControlsCrop.show();
  957. }else {
  958. if (that.options.onError) that.options.onError.call(that,"处理失败");
  959. that.hideLoader();
  960. that.cropControlsCrop.show();
  961. }
  962. if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that, response);
  963. },
  964. showLoader:function(){
  965. var that = this;
  966. that.obj.append(that.options.loaderHtml);
  967. that.loader = that.obj.find('.loader');
  968. },
  969. hideLoader:function(){
  970. var that = this;
  971. that.loader.remove();
  972. },
  973. reset:function(){
  974. var that = this;
  975. that.destroy();
  976. that.init();
  977. that.imgUploadControl.show();
  978. if( !$.isEmptyObject(that.croppedImg)){
  979. that.obj.append(that.croppedImg);
  980. if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(that.croppedImg.attr('url')); }
  981. }
  982. if (typeof that.options.onReset == 'function')
  983. that.options.onReset.call(that);
  984. },
  985. destroy:function(){
  986. var that = this;
  987. that.colorOnClick(true);
  988. if(that.options.modal && !$.isEmptyObject(that.modal) ){ that.destroyModal(); }
  989. if(that.options.imgEyecandy && !$.isEmptyObject(that.imgEyecandy) ){ that.destroyEyecandy(); }
  990. if( !$.isEmptyObject( that.cropControlsUpload ) ){ that.cropControlsUpload.remove(); }
  991. if( !$.isEmptyObject( that.cropControlsCrop ) ){ that.cropControlsCrop.remove(); }
  992. if( !$.isEmptyObject( that.loader ) ){ that.loader.remove(); }
  993. if( !$.isEmptyObject( that.form ) ){ that.form.remove(); }
  994. that.obj.html('');
  995. },
  996. isAjaxUploadSupported: function () {
  997. var input = document.createElement("input");
  998. input.type = "file";
  999. return (
  1000. "multiple" in input &&
  1001. typeof File != "undefined" &&
  1002. typeof FormData != "undefined" &&
  1003. typeof (new XMLHttpRequest()).upload != "undefined");
  1004. },
  1005. CreateFallbackIframe: function () {
  1006. var that = this;
  1007. if (!that.isAjaxUploadSupported()) {
  1008. if (jQuery.isEmptyObject(that.iframeobj)) {
  1009. var iframe = document.createElement("iframe");
  1010. iframe.setAttribute("id", that.id + "_upload_iframe");
  1011. iframe.setAttribute("name", that.id + "_upload_iframe");
  1012. iframe.setAttribute("width", "0");
  1013. iframe.setAttribute("height", "0");
  1014. iframe.setAttribute("border", "0");
  1015. iframe.setAttribute("src", "javascript:false;");
  1016. iframe.style.display = "none";
  1017. document.body.appendChild(iframe);
  1018. } else {
  1019. iframe = that.iframeobj[0];
  1020. }
  1021. var myContent = '<!DOCTYPE html>'
  1022. + '<html><head><title>Uploading File</title></head>'
  1023. + '<body>'
  1024. + '<form '
  1025. + 'class="' + that.id + '_upload_iframe_form" '
  1026. + 'name="' + that.id + '_upload_iframe_form" '
  1027. + 'action="' + that.options.uploadUrl + '" method="post" '
  1028. + 'enctype="multipart/form-data" encoding="multipart/form-data" style="display:none;">'
  1029. + $("#" + that.id + '_imgUploadField')[0].outerHTML
  1030. + '</form></body></html>';
  1031. iframe.contentWindow.document.open('text/htmlreplace');
  1032. iframe.contentWindow.document.write(myContent);
  1033. iframe.contentWindow.document.close();
  1034. that.iframeobj = $("#" + that.id + "_upload_iframe");
  1035. that.iframeform = that.iframeobj.contents().find("html").find("." + that.id + "_upload_iframe_form");
  1036. that.iframeform.on("change", "input", function () {
  1037. that.SubmitFallbackIframe(that);
  1038. });
  1039. that.iframeform.find("input")[0].attachEvent("onchange", function () {
  1040. that.SubmitFallbackIframe(that);
  1041. });
  1042. var eventHandlermyFile = function () {
  1043. if (iframe.detachEvent)
  1044. iframe.detachEvent("onload", eventHandlermyFile);
  1045. else
  1046. iframe.removeEventListener("load", eventHandlermyFile, false);
  1047. var response = that.getIframeContentJSON(iframe);
  1048. if (jQuery.isEmptyObject(that.modal)) {
  1049. that.afterUpload(response);
  1050. }
  1051. }
  1052. if (iframe.addEventListener)
  1053. iframe.addEventListener("load", eventHandlermyFile, true);
  1054. if (iframe.attachEvent)
  1055. iframe.attachEvent("onload", eventHandlermyFile);
  1056. return "#" + that.id + '_imgUploadField';
  1057. } else {
  1058. return "";
  1059. }
  1060. },
  1061. SubmitFallbackIframe: function (that) {
  1062. that.showLoader();
  1063. if(that.options.processInline && !that.options.uploadUrl){
  1064. if (that.options.onError){
  1065. that.options.onError.call(that,"processInline is not supported by your browser ");
  1066. that.hideLoader();
  1067. }
  1068. }else{
  1069. if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that);
  1070. that.iframeform[0].submit();
  1071. }
  1072. },
  1073. getIframeContentJSON: function (iframe) {
  1074. try {
  1075. var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document,
  1076. response;
  1077. var innerHTML = doc.body.innerHTML;
  1078. if (innerHTML.slice(0, 5).toLowerCase() == "<pre>" && innerHTML.slice(-6).toLowerCase() == "</pre>") {
  1079. innerHTML = doc.body.firstChild.firstChild.nodeValue;
  1080. }
  1081. response = jQuery.parseJSON(innerHTML);
  1082. } catch (err) {
  1083. response = { success: false };
  1084. }
  1085. return response;
  1086. },
  1087. hexadecimal:function(num) {
  1088. var r = parseInt(num).toString(16);
  1089. if (r.length == 1) {
  1090. return '0' + r;
  1091. }
  1092. return r.toUpperCase();
  1093. }
  1094. };
  1095. })(window, document);