How to Handle Large image in Jcrop?

Question

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.

Ps: 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>

Answer 1

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?

Question

1 answers

solution1
0 2022-03-10 08:50:40

How to Handle Large image in Jcrop?

Question

1 answers

solution1 0 2022-03-10 08:50:40

solution1
0 2022-03-10 08:50:40