js code to crop uploaded image, moved from users to static folder

Gustavo
1 parent 4137159a
Showing 1 changed file with 66 additions and 0 deletions Show diff stats
amadeus/static/js/crop.js
@@ -0,0 +1,66 @@
+$(function () {
+
+  /* Script para abrir o modal com a imagem selecionada */
+  $("#id_image").change(function () {
+    if (this.files && this.files[0]) {
+      var reader = new FileReader();
+      reader.onload = function (e) {
+        $("#image").attr("src", e.target.result);
+        $("#modalCrop").modal("show");
+      }
+      reader.readAsDataURL(this.files[0]);
+    }
+  });
+
+  /* Scripts da caixa de corte da imagem */
+  var $image = $("#image");
+  var cropBoxData;
+  var canvasData;
+  $("#modalCrop").on("shown.bs.modal", function () {
+    $image.cropper({
+      viewMode: 1,
+      aspectRatio: 1/1,
+      minCropBoxWidth: 200,
+      minCropBoxHeight: 200,
+      ready: function () {
+        $image.cropper("setCanvasData", canvasData);
+        $image.cropper("setCropBoxData", cropBoxData);
+      }
+    });
+  }).on("hidden.bs.modal", function () {
+    cropBoxData = $image.cropper("getCropBoxData");
+    canvasData = $image.cropper("getCanvasData");
+    $image.cropper("destroy");
+  });
+
+  $(".js-zoom-in").click(function () {
+    $image.cropper("zoom", 0.1);
+  });
+
+  $(".js-zoom-out").click(function () {
+    $image.cropper("zoom", -0.1);
+  });
+
+  /* Script para pegar os valores das dimensões e depois fechar o modal */
+  $(".js-crop-and-upload").click(function () {
+    var cropData = $image.cropper("getData");
+    $("#id_x").val(cropData["x"]);
+    $("#id_y").val(cropData["y"]);
+    $("#id_height").val(cropData["height"]);
+    $("#id_width").val(cropData["width"]);
+    $("#modalCrop").modal('hide');
+  });
+
+  /* Script para remover o arquivo enviado caso o usuário clique em cancelar*/
+  $("#id_image").on('change', function(){
+     console.log(this.value);
+  });
+
+  $('#crop_cancel').on('click', function(e){
+      var input = $("#id_image");
+      var holder = $("#pic_holder");
+     input.replaceWith(input.val('').clone(true));
+     holder.replaceWith(holder.val('').clone(true));
+  });
+
+});
...	...	@@ -0,0 +1,66 @@
	1	+$(function () {
	2	+
	3	+ /* Script para abrir o modal com a imagem selecionada */
	4	+ $("#id_image").change(function () {
	5	+ if (this.files && this.files[0]) {
	6	+ var reader = new FileReader();
	7	+ reader.onload = function (e) {
	8	+ $("#image").attr("src", e.target.result);
	9	+ $("#modalCrop").modal("show");
	10	+ }
	11	+ reader.readAsDataURL(this.files[0]);
	12	+ }
	13	+ });
	14	+
	15	+ /* Scripts da caixa de corte da imagem */
	16	+ var $image = $("#image");
	17	+ var cropBoxData;
	18	+ var canvasData;
	19	+ $("#modalCrop").on("shown.bs.modal", function () {
	20	+ $image.cropper({
	21	+ viewMode: 1,
	22	+ aspectRatio: 1/1,
	23	+ minCropBoxWidth: 200,
	24	+ minCropBoxHeight: 200,
	25	+ ready: function () {
	26	+ $image.cropper("setCanvasData", canvasData);
	27	+ $image.cropper("setCropBoxData", cropBoxData);
	28	+ }
	29	+ });
	30	+ }).on("hidden.bs.modal", function () {
	31	+ cropBoxData = $image.cropper("getCropBoxData");
	32	+ canvasData = $image.cropper("getCanvasData");
	33	+ $image.cropper("destroy");
	34	+ });
	35	+
	36	+ $(".js-zoom-in").click(function () {
	37	+ $image.cropper("zoom", 0.1);
	38	+ });
	39	+
	40	+ $(".js-zoom-out").click(function () {
	41	+ $image.cropper("zoom", -0.1);
	42	+ });
	43	+
	44	+ /* Script para pegar os valores das dimensões e depois fechar o modal */
	45	+ $(".js-crop-and-upload").click(function () {
	46	+ var cropData = $image.cropper("getData");
	47	+ $("#id_x").val(cropData["x"]);
	48	+ $("#id_y").val(cropData["y"]);
	49	+ $("#id_height").val(cropData["height"]);
	50	+ $("#id_width").val(cropData["width"]);
	51	+ $("#modalCrop").modal('hide');
	52	+ });
	53	+
	54	+ /* Script para remover o arquivo enviado caso o usuário clique em cancelar*/
	55	+ $("#id_image").on('change', function(){
	56	+ console.log(this.value);
	57	+ });
	58	+
	59	+ $('#crop_cancel').on('click', function(e){
	60	+ var input = $("#id_image");
	61	+ var holder = $("#pic_holder");
	62	+ input.replaceWith(input.val('').clone(true));
	63	+ holder.replaceWith(holder.val('').clone(true));
	64	+ });
	65	+
	66	+});
...	...