gpt4 book ai didi

javascript - 使用 Jcrop 裁剪上传的图像

转载 作者:搜寻专家 更新时间:2023-10-31 22:20:48 24 4
gpt4 key购买 nike

我正在尝试使用 Jcrop 裁剪上传的图像。我的意图是在用户上传时裁剪图像。我不需要将用户上传的图像存储在服务器中。但是,我应该只将用户通过 Jcrop 选择的部分图像存储到服务器。这是 fiddle问题链接

我使用了以下代码:

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:

<style>
#blah {
background-color: #FFF;
width: 500px;
height: 330px;
font-size: 24px;
display: block;
}
</style>

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

我试过,在上传图像后,同一图像用于 JCrop,这样我就可以获得坐标值来生成图像的其余部分。我现在的问题是:上传时,我在图像点而不是上传的图像中得到黑色。任何人都可以查看它并找出代码有什么问题吗?

最佳答案

出现图像显示为黑色的问题是因为您在图像实际加载之前调用了 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
});
}

这是更新的 fiddle

关于javascript - 使用 Jcrop 裁剪上传的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22965960/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com