Commit 0c93698f792f4a7f46be8420df9d9afc592dd987
1 parent
4137159a
Exists in
master
and in
3 other branches
js code to crop uploaded image, moved from users to static folder
Showing
1 changed file
with
66 additions
and
0 deletions
Show diff stats
| @@ -0,0 +1,66 @@ | @@ -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 | +}); |