javascript 使用 Jcrop 裁剪上传的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22965960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cropping Uploaded Image using Jcrop
提问by Ganesh Babu
I am trying to crop an uploaded image using Jcrop. My intention is to crop the image when the user upload. I need not store the user uploaded image in the server. But, I should store only the part of image user selects via Jcrop to the server. Here is the fiddlelink for the problem
我正在尝试使用 Jcrop 裁剪上传的图像。我的目的是在用户上传时裁剪图像。我不需要将用户上传的图像存储在服务器中。但是，我应该只将用户通过 Jcrop 选择的部分图像存储到服务器。这是问题的小提琴链接
I have used the following code:
我使用了以下代码：
HTML:
HTML：
<form id="form1">
<input type='file' id="imgInp" />
<img id="blah" class="crop" src="#" alt="your image" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
</form>
CSS:
CSS：
<style>
#blah {
background-color: #FFF;
width: 500px;
height: 330px;
font-size: 24px;
display: block;
}
</style>
Js:
JS：
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
console.log(this);
readURL(this);
$(function(){
$('.crop').Jcrop({
onSelect: updateCoords,
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 16 / 9
});
});
});
function updateCoords(c)
{
console.log(c);
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
I tried like, after uploading image, the same image is used for JCrop, so that I can get the co-ordinate values to generate the rest of the image. My problem now is this: When uploaded, I get black color in the image spot rather than the uploaded image. Can anyone look into it and find what was wrong with the code?
我试过，上传图像后，相同的图像用于 JCrop，这样我就可以获得坐标值来生成图像的其余部分。我现在的问题是：上传时，我在图像点而不是上传的图像中得到黑色。任何人都可以查看它并找出代码有什么问题吗？
回答by David Stetler
The problem with the image showing as black is occurring because you are calling jCrop on the image before it actually loads. You can put the call to jCrop after the reader.onload call so it will run after the image loads. See this :
出现图像显示为黑色的问题是因为您在实际加载之前在图像上调用 jCrop。您可以在 reader.onload 调用之后调用 jCrop，这样它就会在图像加载后运行。看到这个：
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
$('.crop').Jcrop({
onSelect: updateCoords,
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 16 / 9
});
}
Here is an updated fiddle
这是一个更新的小提琴
回答by Ganesh Babu
I seems that the Jcrop has't been updated for a long time and it doesn't support IE 11. The drawback is that it doesn't do cropping images itself. It solely gives you the coordinates, then you upload them with the original images to the web server, then you crop at the server.
Jcrop好像很久没更新了，不支持IE 11。缺点是它本身不做图片裁剪。它只为您提供坐标，然后您将它们与原始图像一起上传到网络服务器，然后在服务器上进行裁剪。
Take a look at the answer here. It gives you an option to use the Jcrop & Upload plugin to crop, resize, scale in the browser and upload the cropped images to the server. This plugin uses the HTML 5 Canvas element to crop the images and it supports IE 11.
看看这里的答案。它为您提供了使用 Jcrop & Upload 插件在浏览器中裁剪、调整大小、缩放并将裁剪后的图像上传到服务器的选项。这个插件使用 HTML 5 Canvas 元素来裁剪图像，它支持 IE 11。
