Postingan lainnya

Bagaimana cara re-initialize gambar pada cropper.js?

Saya membuat form upload gambar dengan fitur cropping, ketika gambar di pilih cropper berfungsi dengan baik, kemudian ketika saya mau memilih gambar yang lain gambar yang lama tidak berubah.


<!DOCTYPE html>
<html>
<head>
<title>cropper</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.4/cropper.css" rel="stylesheet">
</head>

<body>

<img id="photo_file" src="#" alt="">
<div id="cropped_result" class="hide"></div>
<input type="file" name="photo" onchange="readURL(this)">
<button type="button" id="crop_button">CROP</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.4/cropper.js">
<script>
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#photo_file').attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
    setTimeout(initCropper, 300);
  }
}

function initCropper(){
  var image = document.getElementById('photo_file');

  var cropper = new Cropper(image, {
    aspectRatio: 1 / 1,
    crop: function(e) {

    }
  });

  // On crop button clicked
  document.getElementById('crop_button').addEventListener('click', function(){

    var imgurl =  cropper.getCroppedCanvas().toDataURL();
    var img = document.createElement("img");
    img.src = imgurl;
    document.getElementById("cropped_result").appendChild(img);
      cropper.getCroppedCanvas().toBlob(function (blob) {
        var formData = new FormData();
        formData.append('photo', blob);

        $.ajax('process.php', {
          method: "POST",
          data: formData,
          processData: false,
          contentType: false,
          success: function () {
            location.reload(true);
          },
          error: function () {
            //error message
          }
        });
      });
  })
}
</script>
</body>
</html>

javascript

@Adnan12

1 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

1 Jawaban:

sptnya harus ada tombol reset dlu gan. Kasusnya jg sama yg sy alami. Tp sy menggunakan croppie [link] https://foliotek.github.io/Croppie/ [/link] . Untuk croppie bisa liat contoh di link ini gan : https://jsfiddle.net/q9dLwwvc/

@chaidiryahya

139 Kontribusi 99 Poin

Dipost 6 tahun yang lalu