0
我正在尝试制作一个图像选择器,您可以在图片上选择区域并将其上传到服务器。 现在我已经从我的代码中复制了一些东西,问题是它没有像它应该那样工作。 在我的最后一个问题中,有人给了我一个完美的技巧,如何裁剪,我已经使用并已经集成到我的代码中。最后发布:Html image crop + showing image codeJavascript图像作物画布bug
问题是,当我点击'确定'的图像没有正确的权利。该demensions是不对的位置,您可以从中选择也是错误的:
function readURL(input) { //Seite6
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
\t document.getElementById("seite6_bb").style.visibility = "visible";
document.getElementById("seite6_imageinput").style.visibility = "hidden";
$('#seite6_vorschau').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#seite6_imageinput").change(function() {
readURL(this);
});
function seite6_bildabb()
{
document.getElementById("seite6_bb").style.visibility = "hidden";
document.getElementById("seite6_imageinput").style.visibility = "visible";
}
function seite6_bildok()
{
var seite6_crop_canvas = document.getElementById('seite6_canvas');
var seite6_sleft = $('#seite6_vorschauaus').position().left;
var seite6_top = $('#seite6_vorschauaus').position().top;
seite6_crop_canvas.getContext('2d').drawImage($('#seite6_vorschau')[0], seite6_sleft, seite6_top, 100, 100, 0, 0, 100, 100);
document.getElementById("seite6_profilbild1").src = seite6_crop_canvas.toDataURL();
document.getElementById("seite6_bb").style.visibility = "hidden";
document.getElementById("seite6_imageinput").style.visibility = "visible";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hammerjs.github.io/dist/hammer.js"></script>
<div id="seite6_bb" style="background: black; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; visibility: hidden;">
<img id="seite6_vorschau" src="#" style="max-width: 100%; max-height: 80%;"/>
<div id="seite6_vorschauaus" style="position: absolute; height: 100px; width: 100px; background: white; opacity: 0.5; border: 1px solid black; top: 0px; left: 0px;"></div>
<div style="position: absolute; bottom: 0px; width: 100%; height: 40px; background: white;">
<div style="position: absolute; top: 0px; left: 0px; width: 50%; height: 100%; text-align: center; font-size: 13px; color: #333333; font-family: RobotoMedium; line-height: 40px;" onclick="seite6_bildabb()">Abbrechen</div>
<div style="position: absolute; top: 0px; right: 0px; width: 50%; height: 100%; text-align: center; font-size: 13px; border-left: 1px solid #656565; color: #333333; font-family: RobotoMedium; line-height: 40px;" onclick="seite6_bildok()">OK</div>
</div>
<canvas id="seite6_canvas" width="100" height="100" style="display:none;"></canvas>
</div>
<input id="seite6_imageinput" type="file" name="image" style="position: absolute; top: 60px; left: 0px; background: lightgrey; z-index: 10;"/>
<img id="seite6_profilbild1" src="#" style="width: 150px; position: absolute; top: 30px;"/>
<script>
var mcor3 = document.getElementById('seite6_vorschauaus');
var mco3 = document.getElementById('seite6_vorschauaus',{ direction: Hammer.DIRECTION_ALL });
var mc3 = new Hammer(mco3);
mc3.on("pan", function(ev) {
mcor3.style.left = ev.center.x+"px";
\t mcor3.style.top = ev.center.y+"px";
});
</script>
我做了什么错? 希望有人知道/发现我的错误;)
这看起来不像android。 – zgc7009
检查http://www.hotscripts.com/blog/javascript-image-cropping-scripts/ – Microsmsm
感谢您的提示,但我想用我自己的代码做到这一点,以便我有充分的控制。任何人都可以找到错误? –