How to Handle Large image in Jcrop?

Question

How to Handle Large image in Jcrop?

290 Views Asked by kate moss At 03 March 2022 at 04:06

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 -

Any method to put this image in container/div and then zoom-in/out with mouse event ?
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/[email protected]/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/[email protected]/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>

Original Q&A

There are 1 best solutions below

**keyhan** · Answer 1 · 2022-03-10T08:50:40.523000

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})

How to Handle Large image in Jcrop?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in IMAGE

Related Questions in JCROP

Trending Questions

Popular # Hahtags

Popular Questions