How to Handle Large image in Jcrop?

user_16309201 0
Viewed 61

I am using Jcrop to crop Images, it is working fine with small size images, but Whenever I try to put large image like 2080x2080 or 1600x1600 it covers all my screen, also It cannot be handle with CSS like width and height control in Image tag

Seeking Solution/Suggestion -

  1. Any method to put this image in container/div and then zoom-in/out with mouse event ?
  2. Any method to handle large size image in a fix container and crop so that image maintain it's quality.

P.s: you can try with large image in below working example and see how it behaves with big Image.

var jcp;
var save = document.getElementById('save');
var imageLoader = document.getElementById('imageLoader');
var img = document.getElementById("target");
imageLoader.onchange = function handleImage(e) { //handling our image picker <input>:
  var reader = new FileReader();
  reader.onload = function(event) {
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}
save.onclick = function() {
  if (jcp && jcp.active) {
    var i = 0;
    for (area of jcp.crops) {
      i++;
      canvas = document.createElement("canvas");
      canvas.setAttribute('width', area.pos.w);
      canvas.setAttribute('height', area.pos.h);
      ctx = canvas.getContext("2d");
      ctx.drawImage(img, area.pos.x, area.pos.y, area.pos.w, area.pos.h, 0, 0, area.pos.w, area.pos.h);
      temp = document.createElement('a');
      temp.setAttribute('download', 'area' + i + '.jpg');
      temp.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream"));
      temp.click();
    }
  }
};
Jcrop.load('target').then(img => {
  jcp = Jcrop.attach(img, {
    multi: true
  });
});
body {
  margin: 0px;
  padding: 0px;
  background-color: #ededed;
}

.cropapp {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 5%;
  background: lightgray;
}

.cropbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

div {
  position: relative;
  overflow: hidden;
}
<head>

  <title>Jcrop Example</title>

  <link href="https://unpkg.com/jcrop@3.0.1/dist/jcrop.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://unpkg.com/jcrop@3.0.1/dist/jcrop.js"></script>

</head>

<body>
  <div style="width:400px; margin:10px auto; padding:10px 0; overflow:hidden;"><a style="float:right; display:block; padding:10px 15px; color:#fff; background-color:#237dbd; font-size: 14px; font-weight:bold; border-radius:5px;" id="save">Save</a>
    <input type="file" id="imageLoader" name="imageLoader" />
    <!-- add this for file picker -->
  </div>
  <div>

    <h1 style="font-family:Helvetica,sans-serif;">

      Image Crop <span style="color:lightgray;"></span>
    </h1>

    <img id="target" style="background-size: cover !important;">


  </div>
</body>

jcrop image jquery javascript
1 Answers

You can add any fixed width or height value to your <img id="target"/>. Just calculate and apply the change ratio to areas:

  canvas = document.createElement("canvas");

  displayWidth=img.width;
  displayHeight=img.height;
  realWidth = img.naturalWidth;
  realHeight = img.naturalHeight;
  
  widthRatio = Math.round(realWidth/displayWidth);
  heightRatio = Math.round(realHeight/displayHeight);
  width=area.pos.w*widthRatio
  height=area.pos.h*heightRatio
  
  canvas.setAttribute('width', width);
  canvas.setAttribute('height', height);
  ctx = canvas.getContext("2d");
  ctx.drawImage(img, area.pos.x*widthRatio, area.pos.y*heightRatio, width, height, 0, 0, width, height);

and <img width="500" id="target"/> (or with css #target{width:500px})

user_172610610
Related