如何在Jcrop中处理大图像？

发布于 2025-01-11 18:02:08 字数 3427 浏览 2 评论 0原文

我正在使用Jcrop来裁剪图像，它可以很好地处理小尺寸图像，但是每当我尝试放置像2080x2080或1600x1600这样的大图像时，它也会覆盖我的整个屏幕， 无法使用 CSS 来处理，例如图像标签中的宽度和高度控制

寻求解决方案/建议 -

任何将此图像放入容器/div 中的方法，然后使用鼠标事件放大/缩小？
任何在固定容器中处理大尺寸图像并裁剪以使图像保持其质量的方法。

Ps：您可以在下面的工作示例中尝试使用大图像，看看它在大图像上的表现如何。

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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鱼忆七猫命九 2025-01-18 18:02:08

您可以向添加任何固定宽度或高度值。只需计算变化率并将其应用于区域：

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

和（或使用 css #target{width:500px})

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

回复收藏 0 原文

~没有更多了~