Cara Membuat Crop Gambar Plus Upload dengan PHP

1. (function (factory) {
2. if (typeof define === 'function' && define.amd) {
3. // AMD. Register as anonymous module.
4. define(['jquery'], factory);
5. } else if (typeof exports === 'object') {
6. // Node / CommonJS
7. factory(require('jquery'));
8. } else {
9. // Browser globals.
10. factory(jQuery);
11. }
12. })(function ($) {
14. 'use strict';
16. var console = window.console || { log: function () {} };
18. function CropAvatar($element) {
19. // mengambil element
20. this.$container = $element;
22. // memanggil class avatar-view
23. this.$avatarView = this.$container.find('.avatar-view');
24. // memanggil tag html img
25. this.$avatar = this.$avatarView.find('img');
26. // memanggil id avatar-modal
27. this.$avatarModal = this.$container.find('#avatar-modal');
28. // memanggil class loading
29. this.$loading = this.$container.find('.loading');
31. // memanggil class avatar-form
32. this.$avatarForm = this.$avatarModal.find('.avatar-form');
33. // memanggil class avatar-form
34. this.$avatarUpload = this.$avatarForm.find('.avatar-upload');
35. // memanggil class avatar src
36. this.$avatarSrc = this.$avatarForm.find('.avatar-src');
37. // memanggil class avatar-data
38. this.$avatarData = this.$avatarForm.find('.avatar-data');
39. // memanggil class avatar-input
40. this.$avatarInput = this.$avatarForm.find('.avatar-input');
41. // memanggil class avatar save
42. this.$avatarSave = this.$avatarForm.find('.avatar-save');
43. // memanggil class avatar btns
44. this.$avatarBtns = this.$avatarForm.find('.avatar-btns');
46. // memanggil avatar-wrapper
47. this.$avatarWrapper = this.$avatarModal.find('.avatar-wrapper');
48. // memanggil avatar-preview
49. this.$avatarPreview = this.$avatarModal.find('.avatar-preview');
51. // memanggil function init untuk menjalankan CropAvatar
52. this.init();
53. }
55. CropAvatar.prototype = {
56. constructor: CropAvatar,
58. support: {
59. fileList: !!$('<input type="file">').prop('files'),
60. blobURLs: !!window.URL && URL.createObjectURL,
61. formData: !!window.FormData
62. },
64. // function untuk memulai proses cropavatar
65. init: function () {
66. this.support.datauri = this.support.fileList && this.support.blobURLs;
68. if (!this.support.formData) {
69. this.initIframe();
70. }
72. this.initTooltip();
73. this.initModal();
74. this.addListener();
75. },
77. // function menambah list gambar agar dapat di munculkan juga di bagian kotak-kotak kiri di atas
78. addListener: function () {
79. this.$avatarView.on('click', $.proxy(this.click, this));
80. this.$avatarInput.on('change', $.proxy(this.change, this));
81. this.$avatarForm.on('submit', $.proxy(this.submit, this));
82. this.$avatarBtns.on('click', $.proxy(this.rotate, this));
83. },
85. // function untuk memunculkan title pada saat kursor di dekatkan di gambar untuk menambah gambar
86. initTooltip: function () {
87. this.$avatarView.tooltip({
88. placement: 'bottom'
89. });
90. },
92. // function untuk menampilkan show modal cropper avatar
93. initModal: function () {
94. this.$avatarModal.modal({
95. show: false
96. });
97. },
99. // function untuk menampilkan gambar preview di dalam canvas
100. initPreview: function () {
101. var url = this.$avatar.attr('src');
103. this.$avatarPreview.html('<img src="' + url + '">%MCEPASTEBIN%');
104. },
106. // fungsi untuk membuat frame agar gambar dapat di tampilkan pada canvas
107. initIframe: function () {
108. var target = 'upload-iframe-' + (new Date()).getTime();
109. var $iframe = $('<iframe>').attr({
110. name: target,
111. src: ''
112. });
113. var _this = this;
115. // Ready ifrmae
116. $iframe.one('load', function () {
118. // respond response
119. $iframe.on('load', function () {
120. var data;
122. try {
123. data = $(this).contents().find('body').text();
124. } catch (e) {
125. console.log(e.message);
126. }
128. if (data) {
129. try {
130. data = $.parseJSON(data);
131. } catch (e) {
132. console.log(e.message);
133. }
135. _this.submitDone(data);
136. } else {
137. _this.submitFail('Image upload failed!');
138. }
140. _this.submitEnd();
142. });
143. });
145. this.$iframe = $iframe;
146. this.$avatarForm.attr('target', target).after($iframe.hide());
147. },
149. // fungsi untuk memulai pertama kali pada saat di klik gambar awal
150. click: function () {
151. this.$avatarModal.modal('show');
152. this.initPreview();
153. },
155. // fungsi untuk merubah ukuran gambar yang akan di crop
156. change: function () {
157. var files;
158. var file;
160. if (this.support.datauri) {
161. files = this.$avatarInput.prop('files');
163. if (files.length > 0) {
164. file = files[0];
166. if (this.isImageFile(file)) {
167. if (this.url) {
168. URL.revokeObjectURL(this.url); // Revoke the old one
169. }
171. this.url = URL.createObjectURL(file);
172. this.startCropper();
173. }
174. }
175. } else {
176. file = this.$avatarInput.val();
178. if (this.isImageFile(file)) {
179. this.syncUpload();
180. }
181. }
182. },
184. // fungsi untuk mengirimkan gambar yang sudah di crop ke proses penyimpana gambar
185. submit: function () {
186. if (!this.$avatarSrc.val() && !this.$avatarInput.val()) {
187. return false;
188. }
190. if (this.support.formData) {
191. this.ajaxUpload();
192. return false;
193. }
194. },
196. // fungsi untuk rotasi gambar tersebut pada canvas
197. rotate: function (e) {
198. var data;
200. if (this.active) {
201. data = $(e.target).data();
203. if (data.method) {
204. this.$img.cropper(data.method, data.option);
205. }
206. }
207. },
209. // fungsi untuk meng validasi type gambar yang di upload
210. isImageFile: function (file) {
211. if (file.type) {
212. return /^image\/\w+$/.test(file.type);
213. } else {
214. return /\.(jpg|jpeg|png|gif)$/.test(file);
215. }
216. },
218. // funsgi untuk menjalankan crop gambar
219. startCropper: function () {
220. var _this = this;
222. if (this.active) {
223. this.$img.cropper('replace', this.url);
224. } else {
225. this.$img = $('<img src="' + this.url + '">');
226. this.$avatarWrapper.empty().html(this.$img);
227. this.$img.cropper({
228. aspectRatio: 1,
229. preview: this.$avatarPreview.selector,
230. crop: function (e) {
231. var json = [
232. '{"x":' + e.x,
233. '"y":' + e.y,
234. '"height":' + e.height,
235. '"width":' + e.width,
236. '"rotate":' + e.rotate + '}'
237. ].join();
239. _this.$avatarData.val(json);
240. }
241. });
243. this.active = true;
244. }
246. this.$avatarModal.one('hidden.bs.modal', function () {
247. _this.$avatarPreview.empty();
248. _this.stopCropper();
249. });
250. },
252. // fungsi untuk memberhentikan proses crop yang sedang berjalan
253. stopCropper: function () {
254. if (this.active) {
255. this.$img.cropper('destroy');
256. this.$img.remove();
257. this.active = false;
258. }
259. },
261. // fungsi untuk meng upload gambar yang tadi sudah di masukan dan di proses
262. ajaxUpload: function () {
263. var url = this.$avatarForm.attr('action');
264. var data = new FormData(this.$avatarForm[0]);
265. var _this = this;
267. $.ajax(url, {
268. type: 'post',
269. data: data,
270. dataType: 'json',
271. processData: false,
272. contentType: false,
274. beforeSend: function () {
275. _this.submitStart();
276. },
278. success: function (data) {
279. _this.submitDone(data);
280. },
282. error: function (XMLHttpRequest, textStatus, errorThrown) {
283. _this.submitFail(textStatus || errorThrown);
284. },
286. complete: function () {
287. _this.submitEnd();
288. }
289. });
290. },
292. // fungsi untuk membanding kan gambar yang sebelum di crop dengan sesudah di crop
293. syncUpload: function () {
294. this.$avatarSave.click();
295. },
297. // fungsi untuk memulai crop
298. submitStart: function () {
299. this.$loading.fadeIn();
300. },
302. // fungsi untuk menyimpan hasil setelah proses simpan gambar telah selesai dan menerima response yang di terima
303. submitDone: function (data) {
304. console.log(data);
306. if ($.isPlainObject(data) && data.state === 200) {
307. if (data.result) {
308. this.url = data.result;
310. if (this.support.datauri || this.uploaded) {
311. this.uploaded = false;
312. this.cropDone();
313. } else {
314. this.uploaded = true;
315. this.$avatarSrc.val(this.url);
316. this.startCropper();
317. }
319. this.$avatarInput.val('');
320. } else if (data.message) {
321. this.alert(data.message);
322. }
323. } else {
324. this.alert('Failed to response');
325. }
326. },
328. // fungsi ketika proses mengalami ke gagalan akan mengeluarkan pesan error nya
329. submitFail: function (msg) {
330. this.alert(msg);
331. },
333. // fungsi untuk mengakhiri proses cropper
334. submitEnd: function () {
335. this.$loading.fadeOut();
336. },
338. // fungsi ini akan di panggil ketika proses cropper telah selesai
339. cropDone: function () {
340. this.$avatarForm.get(0).reset();
341. this.$avatar.attr('src', this.url);
342. this.stopCropper();
343. this.$avatarModal.modal('hide');
344. },
346. // fungsi untuk menampilkan pesan error
347. alert: function (msg) {
348. var $alert = [
349. '<div class="alert alert-danger avatar-alert alert-dismissable">',
350. '<button type="button" class="close" data-dismiss="alert">&times;</button>',
351. msg,
352. '</div>'
353. ].join('');
355. this.$avatarUpload.after($alert);
356. }
357. };
359. // untuk memulai keseluruhan coding yang sudah kita buat tadi supaya dapat berjalan
360. $(function () {
361. return new CropAvatar($('#crop-avatar'));
362. });
364. });

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as anonymous module.
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node / CommonJS
    factory(require('jquery'));
  } else {
    // Browser globals.
    factory(jQuery);
  }
})(function ($) {

  'use strict';

  var console = window.console || { log: function () {} };

  function CropAvatar($element) {
    // mengambil element 
    this.$container = $element;

    // memanggil class avatar-view
    this.$avatarView = this.$container.find('.avatar-view');
    // memanggil tag html img
    this.$avatar = this.$avatarView.find('img');
    // memanggil id avatar-modal
    this.$avatarModal = this.$container.find('#avatar-modal');
    // memanggil class loading
    this.$loading = this.$container.find('.loading');

    // memanggil class avatar-form
    this.$avatarForm = this.$avatarModal.find('.avatar-form');
    // memanggil class avatar-form
    this.$avatarUpload = this.$avatarForm.find('.avatar-upload');
    // memanggil class avatar src
    this.$avatarSrc = this.$avatarForm.find('.avatar-src');
    // memanggil class avatar-data
    this.$avatarData = this.$avatarForm.find('.avatar-data');
    // memanggil class avatar-input
    this.$avatarInput = this.$avatarForm.find('.avatar-input');
    // memanggil class avatar save
    this.$avatarSave = this.$avatarForm.find('.avatar-save');
    // memanggil class avatar btns
    this.$avatarBtns = this.$avatarForm.find('.avatar-btns');

    // memanggil avatar-wrapper
    this.$avatarWrapper = this.$avatarModal.find('.avatar-wrapper');
    // memanggil avatar-preview
    this.$avatarPreview = this.$avatarModal.find('.avatar-preview');

    // memanggil function init untuk menjalankan CropAvatar
    this.init();
  }

  CropAvatar.prototype = {
    constructor: CropAvatar,

    support: {
      fileList: !!$('<input type="file">').prop('files'),
      blobURLs: !!window.URL && URL.createObjectURL,
      formData: !!window.FormData
    },

    // function untuk memulai proses cropavatar
    init: function () {
      this.support.datauri = this.support.fileList && this.support.blobURLs;

      if (!this.support.formData) {
        this.initIframe();
      }

      this.initTooltip();
      this.initModal();
      this.addListener();
    },

    // function menambah list gambar agar dapat di munculkan juga di bagian kotak-kotak kiri di atas
    addListener: function () {
      this.$avatarView.on('click', $.proxy(this.click, this));
      this.$avatarInput.on('change', $.proxy(this.change, this));
      this.$avatarForm.on('submit', $.proxy(this.submit, this));
      this.$avatarBtns.on('click', $.proxy(this.rotate, this));
    },

    // function untuk memunculkan title pada saat kursor di dekatkan di gambar untuk menambah gambar
    initTooltip: function () {
      this.$avatarView.tooltip({
        placement: 'bottom'
      });
    },

    // function untuk menampilkan show modal cropper avatar
    initModal: function () {
      this.$avatarModal.modal({
        show: false
      });
    },

    // function untuk menampilkan gambar preview di dalam canvas
    initPreview: function () {
      var url = this.$avatar.attr('src');

      this.$avatarPreview.html('<img src="' + url + '">%MCEPASTEBIN%');
    },

    // fungsi untuk membuat frame agar gambar dapat di tampilkan pada canvas
    initIframe: function () {
      var target = 'upload-iframe-' + (new Date()).getTime();
      var $iframe = $('<iframe>').attr({
            name: target,
            src: ''
          });
      var _this = this;

      // Ready ifrmae
      $iframe.one('load', function () {

        // respond response
        $iframe.on('load', function () {
          var data;

          try {
            data = $(this).contents().find('body').text();
          } catch (e) {
            console.log(e.message);
          }

          if (data) {
            try {
              data = $.parseJSON(data);
            } catch (e) {
              console.log(e.message);
            }

            _this.submitDone(data);
          } else {
            _this.submitFail('Image upload failed!');
          }

          _this.submitEnd();

        });
      });

      this.$iframe = $iframe;
      this.$avatarForm.attr('target', target).after($iframe.hide());
    },

    // fungsi untuk memulai pertama kali pada saat di klik gambar awal
    click: function () {
      this.$avatarModal.modal('show');
      this.initPreview();
    },

    // fungsi untuk merubah ukuran gambar yang akan di crop
    change: function () {
      var files;
      var file;

      if (this.support.datauri) {
        files = this.$avatarInput.prop('files');

        if (files.length > 0) {
          file = files[0];

          if (this.isImageFile(file)) {
            if (this.url) {
              URL.revokeObjectURL(this.url); // Revoke the old one
            }

            this.url = URL.createObjectURL(file);
            this.startCropper();
          }
        }
      } else {
        file = this.$avatarInput.val();

        if (this.isImageFile(file)) {
          this.syncUpload();
        }
      }
    },

    // fungsi untuk mengirimkan gambar yang sudah di crop ke proses penyimpana gambar
    submit: function () {
      if (!this.$avatarSrc.val() && !this.$avatarInput.val()) {
        return false;
      }

      if (this.support.formData) {
        this.ajaxUpload();
        return false;
      }
    },

    // fungsi untuk rotasi gambar tersebut pada canvas
    rotate: function (e) {
      var data;

      if (this.active) {
        data = $(e.target).data();

        if (data.method) {
          this.$img.cropper(data.method, data.option);
        }
      }
    },

    // fungsi untuk meng validasi type gambar yang di upload
    isImageFile: function (file) {
      if (file.type) {
        return /^image\/\w+$/.test(file.type);
      } else {
        return /\.(jpg|jpeg|png|gif)$/.test(file);
      }
    },

    // funsgi untuk menjalankan crop gambar
    startCropper: function () {
      var _this = this;

      if (this.active) {
        this.$img.cropper('replace', this.url);
      } else {
        this.$img = $('<img src="' + this.url + '">');
        this.$avatarWrapper.empty().html(this.$img);
        this.$img.cropper({
          aspectRatio: 1,
          preview: this.$avatarPreview.selector,
          crop: function (e) {
            var json = [
                  '{"x":' + e.x,
                  '"y":' + e.y,
                  '"height":' + e.height,
                  '"width":' + e.width,
                  '"rotate":' + e.rotate + '}'
                ].join();

            _this.$avatarData.val(json);
          }
        });

        this.active = true;
      }

      this.$avatarModal.one('hidden.bs.modal', function () {
        _this.$avatarPreview.empty();
        _this.stopCropper();
      });
    },

    // fungsi untuk memberhentikan proses crop yang sedang berjalan
    stopCropper: function () {
      if (this.active) {
        this.$img.cropper('destroy');
        this.$img.remove();
        this.active = false;
      }
    },

    // fungsi untuk meng upload gambar yang tadi sudah di masukan dan di proses
    ajaxUpload: function () {
      var url = this.$avatarForm.attr('action');
      var data = new FormData(this.$avatarForm[0]);
      var _this = this;

      $.ajax(url, {
        type: 'post',
        data: data,
        dataType: 'json',
        processData: false,
        contentType: false,

        beforeSend: function () {
          _this.submitStart();
        },

        success: function (data) {
          _this.submitDone(data);
        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _this.submitFail(textStatus || errorThrown);
        },

        complete: function () {
          _this.submitEnd();
        }
      });
    },

    // fungsi untuk membanding kan gambar yang sebelum di crop dengan sesudah di crop
    syncUpload: function () {
      this.$avatarSave.click();
    },

    // fungsi untuk memulai crop
    submitStart: function () {
      this.$loading.fadeIn();
    },

    // fungsi untuk menyimpan hasil setelah proses simpan gambar telah selesai dan menerima response yang di terima
    submitDone: function (data) {
      console.log(data);

      if ($.isPlainObject(data) && data.state === 200) {
        if (data.result) {
          this.url = data.result;

          if (this.support.datauri || this.uploaded) {
            this.uploaded = false;
            this.cropDone();
          } else {
            this.uploaded = true;
            this.$avatarSrc.val(this.url);
            this.startCropper();
          }

          this.$avatarInput.val('');
        } else if (data.message) {
          this.alert(data.message);
        }
      } else {
        this.alert('Failed to response');
      }
    },

    // fungsi ketika proses mengalami ke gagalan akan mengeluarkan pesan error nya
    submitFail: function (msg) {
      this.alert(msg);
    },

    // fungsi untuk mengakhiri proses cropper
    submitEnd: function () {
      this.$loading.fadeOut();
    },

    // fungsi ini akan di panggil ketika proses cropper telah selesai
    cropDone: function () {
      this.$avatarForm.get(0).reset();
      this.$avatar.attr('src', this.url);
      this.stopCropper();
      this.$avatarModal.modal('hide');
    },

    // fungsi untuk menampilkan pesan error
    alert: function (msg) {
      var $alert = [
            '<div class="alert alert-danger avatar-alert alert-dismissable">',
              '<button type="button" class="close" data-dismiss="alert">&times;</button>',
              msg,
            '</div>'
          ].join('');

      this.$avatarUpload.after($alert);
    }
  };

  // untuk memulai keseluruhan coding yang sudah kita buat tadi supaya dapat berjalan
  $(function () {
    return new CropAvatar($('#crop-avatar'));
  });

});

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <meta http-equiv="x-ua-compatible" content="ie=edge">
6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7. <meta name="description" content="A complete example of Cropper.">
8. <meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image cropping, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development">
9. <meta name="author" content="Fengyuan Chen">
10. <title>Cropper</title>
11. <link rel="stylesheet" href="css/bootstrap.min.css">
12. <link rel="stylesheet" href="js/cropper/cropper.min.css">
13. <link rel="stylesheet" href="css/main.css">
15. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
16. <!--[if lt IE 9]>
17. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
18. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
19. <![endif]-->
20. </head>
21. <body>
22. <div class="container" id="crop-avatar">
24. <!-- Current avatar -->
25. <div class="avatar-view" title="Change the avatar">
26. <img src="images/picture.jpg" alt="Avatar">
27. </div>
29. <!-- Cropping modal -->
30. <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
31. <div class="modal-dialog modal-lg">
32. <div class="modal-content">
33. <form class="avatar-form" action="crop.php" enctype="multipart/form-data" method="post">
34. <div class="modal-header">
35. <button type="button" class="close" data-dismiss="modal">&times;</button>
36. <h4 class="modal-title" id="avatar-modal-label">Change Avatar</h4>
37. </div>
38. <div class="modal-body">
39. <div class="avatar-body">
41. <!-- Upload image and data -->
42. <div class="avatar-upload">
43. <input type="hidden" class="avatar-src" name="avatar_src">
44. <input type="hidden" class="avatar-data" name="avatar_data">
45. <label for="avatarInput">Local upload</label>
46. <input type="file" class="avatar-input" id="avatarInput" name="avatar_file">
47. </div>
49. <!-- Crop and preview -->
50. <div class="row">
51. <div class="col-md-9">
52. <div class="avatar-wrapper"></div>
53. </div>
54. <div class="col-md-3">
55. <div class="avatar-preview preview-lg"></div>
56. <div class="avatar-preview preview-md"></div>
57. <div class="avatar-preview preview-sm"></div>
58. </div>
59. </div>
61. <div class="row avatar-btns">
62. <div class="col-md-9">
63. <div class="btn-group">
64. <button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate -90 degrees">Rotate Left</button>
65. <button type="button" class="btn btn-primary" data-method="rotate" data-option="-15">-15deg</button>
66. <button type="button" class="btn btn-primary" data-method="rotate" data-option="-30">-30deg</button>
67. <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45">-45deg</button>
68. </div>
69. <div class="btn-group">
70. <button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate 90 degrees">Rotate Right</button>
71. <button type="button" class="btn btn-primary" data-method="rotate" data-option="15">15deg</button>
72. <button type="button" class="btn btn-primary" data-method="rotate" data-option="30">30deg</button>
73. <button type="button" class="btn btn-primary" data-method="rotate" data-option="45">45deg</button>
74. </div>
75. </div>
76. <div class="col-md-3">
77. <button type="submit" class="btn btn-primary btn-block avatar-save">Done</button>
78. </div>
79. </div>
80. </div>
81. </div>
82. <!-- <div class="modal-footer">
83. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
84. </div> -->
85. </form>
86. </div>
87. </div>
88. </div><!-- /.modal -->
90. <!-- Loading state -->
91. <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
92. </div>
94. <script src="js/jquery.min.js"></script>
95. <script src="js/bootstrap.min.js"></script>
96. <script src="js/cropper/cropper.min.js"></script>
97. <script src="js/main.js"></script>
98. </body>
99. </html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="A complete example of Cropper.">
  <meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image cropping, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development">
  <meta name="author" content="Fengyuan Chen">
  <title>Cropper</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="js/cropper/cropper.min.css">
  <link rel="stylesheet" href="css/main.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <div class="container" id="crop-avatar">

    <!-- Current avatar -->
    <div class="avatar-view" title="Change the avatar">
      <img src="images/picture.jpg" alt="Avatar">
    </div>

    <!-- Cropping modal -->
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <form class="avatar-form" action="crop.php" enctype="multipart/form-data" method="post">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title" id="avatar-modal-label">Change Avatar</h4>
            </div>
            <div class="modal-body">
              <div class="avatar-body">

                <!-- Upload image and data -->
                <div class="avatar-upload">
                  <input type="hidden" class="avatar-src" name="avatar_src">
                  <input type="hidden" class="avatar-data" name="avatar_data">
                  <label for="avatarInput">Local upload</label>
                  <input type="file" class="avatar-input" id="avatarInput" name="avatar_file">
                </div>

                <!-- Crop and preview -->
                <div class="row">
                  <div class="col-md-9">
                    <div class="avatar-wrapper"></div>
                  </div>
                  <div class="col-md-3">
                    <div class="avatar-preview preview-lg"></div>
                    <div class="avatar-preview preview-md"></div>
                    <div class="avatar-preview preview-sm"></div>
                  </div>
                </div>

                <div class="row avatar-btns">
                  <div class="col-md-9">
                    <div class="btn-group">
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate -90 degrees">Rotate Left</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="-15">-15deg</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="-30">-30deg</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45">-45deg</button>
                    </div>
                    <div class="btn-group">
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate 90 degrees">Rotate Right</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="15">15deg</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="30">30deg</button>
                      <button type="button" class="btn btn-primary" data-method="rotate" data-option="45">45deg</button>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <button type="submit" class="btn btn-primary btn-block avatar-save">Done</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div> -->
          </form>
        </div>
      </div>
    </div><!-- /.modal -->

    <!-- Loading state -->
    <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/cropper/cropper.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

1. <?php
2. class CropAvatar {
3. private $src;
4. private $data;
5. private $dst;
6. private $type;
7. private $extension;
8. private $msg;
10. function __construct($src, $data, $file) {
11. $this -> setSrc($src);
12. $this -> setData($data);
13. $this -> setFile($file);
14. $this -> crop($this -> src, $this -> dst, $this -> data);
15. }
17. private function setSrc($src) {
18. if (!empty($src)) {
19. $type = exif_imagetype($src);
21. if ($type) {
22. $this -> src = $src;
23. $this -> type = $type;
24. $this -> extension = image_type_to_extension($type);
25. $this -> setDst();
26. }
27. }
28. }
30. private function setData($data) {
31. if (!empty($data)) {
32. $this -> data = json_decode(stripslashes($data));
33. }
34. }
36. private function setFile($file) {
37. $errorCode = $file['error'];
39. if ($errorCode === UPLOAD_ERR_OK) {
40. $type = exif_imagetype($file['tmp_name']);
42. if ($type) {
43. $extension = image_type_to_extension($type);
44. $src = 'images/' . date('YmdHis') . '.original' . $extension;
46. if ($type == IMAGETYPE_GIF || $type == IMAGETYPE_JPEG || $type == IMAGETYPE_PNG) {
48. if (file_exists($src)) {
49. unlink($src);
50. }
52. $result = move_uploaded_file($file['tmp_name'], $src);
54. if ($result) {
55. $this -> src = $src;
56. $this -> type = $type;
57. $this -> extension = $extension;
58. $this -> setDst();
59. } else {
60. $this -> msg = 'Failed to save file';
61. }
62. } else {
63. $this -> msg = 'Please upload image with the following types: JPG, PNG, GIF';
64. }
65. } else {
66. $this -> msg = 'Please upload image file';
67. }
68. } else {
69. $this -> msg = $this -> codeToMessage($errorCode);
70. }
71. }
73. private function setDst() {
74. $this -> dst = 'images/' . date('YmdHis') . '.png';
75. }
77. private function crop($src, $dst, $data) {
78. if (!empty($src) && !empty($dst) && !empty($data)) {
79. switch ($this -> type) {
80. case IMAGETYPE_GIF:
81. $src_img = imagecreatefromgif($src);
82. break;
84. case IMAGETYPE_JPEG:
85. $src_img = imagecreatefromjpeg($src);
86. break;
88. case IMAGETYPE_PNG:
89. $src_img = imagecreatefrompng($src);
90. break;
91. }
93. if (!$src_img) {
94. $this -> msg = "Failed to read the image file";
95. return;
96. }
98. $size = getimagesize($src);
99. $size_w = $size[0]; // natural width
100. $size_h = $size[1]; // natural height
102. $src_img_w = $size_w;
103. $src_img_h = $size_h;
105. $degrees = $data -> rotate;
107. // Rotate the source image
108. if (is_numeric($degrees) && $degrees != 0) {
109. // PHP's degrees is opposite to CSS's degrees
110. $new_img = imagerotate( $src_img, -$degrees, imagecolorallocatealpha($src_img, 0, 0, 0, 127) );
112. imagedestroy($src_img);
113. $src_img = $new_img;
115. $deg = abs($degrees) % 180;
116. $arc = ($deg > 90 ? (180 - $deg) : $deg) * M_PI / 180;
118. $src_img_w = $size_w * cos($arc) + $size_h * sin($arc);
119. $src_img_h = $size_w * sin($arc) + $size_h * cos($arc);
121. // Fix rotated image miss 1px issue when degrees < 0
122. $src_img_w -= 1;
123. $src_img_h -= 1;
124. }
126. $tmp_img_w = $data -> width;
127. $tmp_img_h = $data -> height;
128. $dst_img_w = 220;
129. $dst_img_h = 220;
131. $src_x = $data -> x;
132. $src_y = $data -> y;
134. if ($src_x <= -$tmp_img_w || $src_x > $src_img_w) {
135. $src_x = $src_w = $dst_x = $dst_w = 0;
136. } else if ($src_x <= 0) {
137. $dst_x = -$src_x;
138. $src_x = 0;
139. $src_w = $dst_w = min($src_img_w, $tmp_img_w + $src_x);
140. } else if ($src_x <= $src_img_w) {
141. $dst_x = 0;
142. $src_w = $dst_w = min($tmp_img_w, $src_img_w - $src_x);
143. }
145. if ($src_w <= 0 || $src_y <= -$tmp_img_h || $src_y > $src_img_h) {
146. $src_y = $src_h = $dst_y = $dst_h = 0;
147. } else if ($src_y <= 0) {
148. $dst_y = -$src_y;
149. $src_y = 0;
150. $src_h = $dst_h = min($src_img_h, $tmp_img_h + $src_y);
151. } else if ($src_y <= $src_img_h) {
152. $dst_y = 0;
153. $src_h = $dst_h = min($tmp_img_h, $src_img_h - $src_y);
154. }
156. // Scale to destination position and size
157. $ratio = $tmp_img_w / $dst_img_w;
158. $dst_x /= $ratio;
159. $dst_y /= $ratio;
160. $dst_w /= $ratio;
161. $dst_h /= $ratio;
163. $dst_img = imagecreatetruecolor($dst_img_w, $dst_img_h);
165. // Add transparent background to destination image
166. imagefill($dst_img, 0, 0, imagecolorallocatealpha($dst_img, 0, 0, 0, 127));
167. imagesavealpha($dst_img, true);
169. $result = imagecopyresampled($dst_img, $src_img, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);
171. if ($result) {
172. if (!imagepng($dst_img, $dst)) {
173. $this -> msg = "Failed to save the cropped image file";
174. }
175. } else {
176. $this -> msg = "Failed to crop the image file";
177. }
179. imagedestroy($src_img);
180. imagedestroy($dst_img);
181. }
182. }
184. private function codeToMessage($code) {
185. $errors = array(
186. UPLOAD_ERR_INI_SIZE =>'The uploaded file exceeds the upload_max_filesize directive in php.ini',
187. UPLOAD_ERR_FORM_SIZE =>'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form',
188. UPLOAD_ERR_PARTIAL =>'The uploaded file was only partially uploaded',
189. UPLOAD_ERR_NO_FILE =>'No file was uploaded',
190. UPLOAD_ERR_NO_TMP_DIR =>'Missing a temporary folder',
191. UPLOAD_ERR_CANT_WRITE =>'Failed to write file to disk',
192. UPLOAD_ERR_EXTENSION =>'File upload stopped by extension',
193. );
195. if (array_key_exists($code, $errors)) {
196. return $errors[$code];
197. }
199. return 'Unknown upload error';
200. }
202. public function getResult() {
203. return !empty($this -> data) ? $this -> dst : $this -> src;
204. }
206. public function getMsg() {
207. return $this -> msg;
208. }
209. }
211. $crop = new CropAvatar(
212. isset($_POST['avatar_src']) ? $_POST['avatar_src'] : null,
213. isset($_POST['avatar_data']) ? $_POST['avatar_data'] : null,
214. isset($_FILES['avatar_file']) ? $_FILES['avatar_file'] : null
215. );
217. $response = array(
218. 'state' => 200,
219. 'message' => $crop -> getMsg(),
220. 'result' => $crop -> getResult()
221. );
223. echo json_encode($response);

<?php
class CropAvatar {
  private $src;
  private $data;
  private $dst;
  private $type;
  private $extension;
  private $msg;

  function __construct($src, $data, $file) {
    $this -> setSrc($src);
    $this -> setData($data);
    $this -> setFile($file);
    $this -> crop($this -> src, $this -> dst, $this -> data);
  }

  private function setSrc($src) {
    if (!empty($src)) {
      $type = exif_imagetype($src);

      if ($type) {
        $this -> src = $src;
        $this -> type = $type;
        $this -> extension = image_type_to_extension($type);
        $this -> setDst();
      }
    }
  }

  private function setData($data) {
    if (!empty($data)) {
      $this -> data = json_decode(stripslashes($data));
    }
  }

  private function setFile($file) {
    $errorCode = $file['error'];
    
    if ($errorCode === UPLOAD_ERR_OK) {
      $type = exif_imagetype($file['tmp_name']);

      if ($type) {
        $extension = image_type_to_extension($type);
        $src = 'images/' . date('YmdHis') . '.original' . $extension;

        if ($type == IMAGETYPE_GIF || $type == IMAGETYPE_JPEG || $type == IMAGETYPE_PNG) {

          if (file_exists($src)) {
            unlink($src);
          }

          $result = move_uploaded_file($file['tmp_name'], $src);

          if ($result) {
            $this -> src = $src;
            $this -> type = $type;
            $this -> extension = $extension;
            $this -> setDst();
          } else {
             $this -> msg = 'Failed to save file';
          }
        } else {
          $this -> msg = 'Please upload image with the following types: JPG, PNG, GIF';
        }
      } else {
        $this -> msg = 'Please upload image file';
      }
    } else {
      $this -> msg = $this -> codeToMessage($errorCode);
    }
  }

  private function setDst() {
    $this -> dst = 'images/' . date('YmdHis') . '.png';
  }

  private function crop($src, $dst, $data) {
    if (!empty($src) && !empty($dst) && !empty($data)) {
      switch ($this -> type) {
        case IMAGETYPE_GIF:
          $src_img = imagecreatefromgif($src);
          break;

        case IMAGETYPE_JPEG:
          $src_img = imagecreatefromjpeg($src);
          break;

        case IMAGETYPE_PNG:
          $src_img = imagecreatefrompng($src);
          break;
      }

      if (!$src_img) {
        $this -> msg = "Failed to read the image file";
        return;
      }

      $size = getimagesize($src);
      $size_w = $size[0]; // natural width
      $size_h = $size[1]; // natural height

      $src_img_w = $size_w;
      $src_img_h = $size_h;

      $degrees = $data -> rotate;

      // Rotate the source image
      if (is_numeric($degrees) && $degrees != 0) {
        // PHP's degrees is opposite to CSS's degrees
        $new_img = imagerotate( $src_img, -$degrees, imagecolorallocatealpha($src_img, 0, 0, 0, 127) );

        imagedestroy($src_img);
        $src_img = $new_img;

        $deg = abs($degrees) % 180;
        $arc = ($deg > 90 ? (180 - $deg) : $deg) * M_PI / 180;

        $src_img_w = $size_w * cos($arc) + $size_h * sin($arc);
        $src_img_h = $size_w * sin($arc) + $size_h * cos($arc);

        // Fix rotated image miss 1px issue when degrees < 0
        $src_img_w -= 1;
        $src_img_h -= 1;
      }

      $tmp_img_w = $data -> width;
      $tmp_img_h = $data -> height;
      $dst_img_w = 220;
      $dst_img_h = 220;

      $src_x = $data -> x;
      $src_y = $data -> y;

      if ($src_x <= -$tmp_img_w || $src_x > $src_img_w) {
        $src_x = $src_w = $dst_x = $dst_w = 0;
      } else if ($src_x <= 0) {
        $dst_x = -$src_x;
        $src_x = 0;
        $src_w = $dst_w = min($src_img_w, $tmp_img_w + $src_x);
      } else if ($src_x <= $src_img_w) {
        $dst_x = 0;
        $src_w = $dst_w = min($tmp_img_w, $src_img_w - $src_x);
      }

      if ($src_w <= 0 || $src_y <= -$tmp_img_h || $src_y > $src_img_h) {
        $src_y = $src_h = $dst_y = $dst_h = 0;
      } else if ($src_y <= 0) {
        $dst_y = -$src_y;
        $src_y = 0;
        $src_h = $dst_h = min($src_img_h, $tmp_img_h + $src_y);
      } else if ($src_y <= $src_img_h) {
        $dst_y = 0;
        $src_h = $dst_h = min($tmp_img_h, $src_img_h - $src_y);
      }

      // Scale to destination position and size
      $ratio = $tmp_img_w / $dst_img_w;
      $dst_x /= $ratio;
      $dst_y /= $ratio;
      $dst_w /= $ratio;
      $dst_h /= $ratio;

      $dst_img = imagecreatetruecolor($dst_img_w, $dst_img_h);

      // Add transparent background to destination image
      imagefill($dst_img, 0, 0, imagecolorallocatealpha($dst_img, 0, 0, 0, 127));
      imagesavealpha($dst_img, true);

      $result = imagecopyresampled($dst_img, $src_img, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);

      if ($result) {
        if (!imagepng($dst_img, $dst)) {
          $this -> msg = "Failed to save the cropped image file";
        }
      } else {
        $this -> msg = "Failed to crop the image file";
      }

      imagedestroy($src_img);
      imagedestroy($dst_img);
    }
  }

  private function codeToMessage($code) {
    $errors = array(
      UPLOAD_ERR_INI_SIZE =>'The uploaded file exceeds the upload_max_filesize directive in php.ini',
      UPLOAD_ERR_FORM_SIZE =>'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form',
      UPLOAD_ERR_PARTIAL =>'The uploaded file was only partially uploaded',
      UPLOAD_ERR_NO_FILE =>'No file was uploaded',
      UPLOAD_ERR_NO_TMP_DIR =>'Missing a temporary folder',
      UPLOAD_ERR_CANT_WRITE =>'Failed to write file to disk',
      UPLOAD_ERR_EXTENSION =>'File upload stopped by extension',
    );

    if (array_key_exists($code, $errors)) {
      return $errors[$code];
    }

    return 'Unknown upload error';
  }

  public function getResult() {
    return !empty($this -> data) ? $this -> dst : $this -> src;
  }

  public function getMsg() {
    return $this -> msg;
  }
}

$crop = new CropAvatar(
  isset($_POST['avatar_src']) ? $_POST['avatar_src'] : null,
  isset($_POST['avatar_data']) ? $_POST['avatar_data'] : null,
  isset($_FILES['avatar_file']) ? $_FILES['avatar_file'] : null
);

$response = array(
  'state'  => 200,
  'message' => $crop -> getMsg(),
  'result' => $crop -> getResult()
);

echo json_encode($response);