我想从用户那里获取图像，显示它并允许用户在 div 中调整它，然后捕获调整后的图像并将其附加到正文中。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<script src="Canvas2Image.js"></script>
<script src="e-smart-zoom-jquery.min.js"></script>
<style type="text/css">
#wrapper {
width: 980px;
height: 500px;
}
</style>
</head>
<body>
<div id="wrapper" style="background-color: white" width="980px" height="500px">
<img id="imageFullScreen" src="https://s-media-cache-ak0.pinimg.com/736x/b5/41/8d/b5418dcc2ab6efa7fe51d8bffd385343.jpg">
</div>
<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<input type="file" accept="image/*" name="photo" id="imgInp" onchange="loadFile(event);"/>
<div id="img-out"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
function moveButtonClickHandler(e){
var pixelsToMoveOnX = 0;
var pixelsToMoveOnY = 0;
switch(e.target.id){
case "leftPositionMap":
pixelsToMoveOnX = 50;
break;
case "rightPositionMap":
pixelsToMoveOnX = -50;
break;
case "topPositionMap":
pixelsToMoveOnY = 50;
break;
case "bottomPositionMap":
pixelsToMoveOnY = -50;
break;
}
$('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
}
});
$(function() {
$("#btnSave").click(function() {
html2canvas($("#wrapper"), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
$('body').append('<img src="'+img+'"/>');
}
});
});
});
var loadFile = function(event) {
oldimg = $('.imageFullScreen').attr('src');
var preview = document.getElementById('imageFullScreen');
preview.src = URL.createObjectURL(event.target.files[0]);
newimg = preview.src;
if(newimg.indexOf('/null') > -1) {
preview.src = oldimg;
$('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
}
};
</script>
</body>
</html>
我能够使用 src 属性显示图像，并缩放和拖动它，但无法从用户那里获取图像。
最佳答案
尝试改用 FileReader。
var reader = new FileReader();
$(document).ready(function() {
reader.addEventListener("load", function() {
var preview = document.getElementById('imageFullScreen');
$('#imageFullScreen').smartZoom("destroy");
preview.src = reader.result;
$('#imageFullScreen').smartZoom();
}, false);
$("#imgInp").on("change", function(event) {
if (event.target.files[0]) {
reader.readAsDataURL(event.target.files[0]);
}
});
function moveButtonClickHandler(e) {
var pixelsToMoveOnX = 0;
var pixelsToMoveOnY = 0;
switch (e.target.id) {
case "leftPositionMap":
pixelsToMoveOnX = 50;
break;
case "rightPositionMap":
pixelsToMoveOnX = -50;
break;
case "topPositionMap":
pixelsToMoveOnY = 50;
break;
case "bottomPositionMap":
pixelsToMoveOnY = -50;
break;
}
$('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
}
});
$('#imageFullScreen').smartZoom();
$(function() {
$("#btnSave").click(function() {
html2canvas($("#wrapper"), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
$('body').append('<img src="' + img + '"/>');
}
});
});
});
这是 JS Fiddle
编辑:您必须在更改 src 之前销毁 smartZoom 对象，然后必须重新初始化它。
关于javascript - 无法从用户那里获取图像，在 div 中显示它，缩放它并将它附加到正文，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41792025/