Fatal编程技术网
  • javascript/
  • Javascript 无法从用户处获取图像，在div中显示图像，缩放图像并将其附加到正文中

Javascript 无法从用户处获取图像，在div中显示图像，缩放图像并将其附加到正文中

javascript jquery html css

Javascript 无法从用户处获取图像，在div中显示图像，缩放图像并将其附加到正文中,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想从用户那里获取图像，显示它，并允许用户在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="Canvas2

我想从用户那里获取图像，显示它，并允许用户在
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>


#包装纸{
宽度：980px；
高度：500px；
}


$（文档）.ready（函数（）{
$（#imageFullScreen'）.smartZoom（{'containerClass'：'zoomableContainer'}）；
功能moveButtonClickHandler（e）{
var pixelsToMoveOnX=0；
var pixelsToMoveOnY=0；
开关（如target.id）{
案例“leftPositionMap”：
pixelsToMoveOnX=50；
打破
案例“rightPositionMap”：
pixelsToMoveOnX=-50；
打破
案例“topPositionMap”：
pixelsToMoveOnY=50；
打破
案例“底部位置图”：
pixelsToMoveOnY=-50；
打破
}
$（#imageFullScreen'）.smartZoom（'pan'，pixelsToMoveOnX，pixelsToMoveOnY）；
}
});
$（函数（）{
$（“#btnSave”）。单击（函数（）{
html2canvas（$（“#包装”）{
onrendered：函数（画布）{
var img=canvas.toDataURL（“image/png”）；
$（'body'）。追加（''）；
}
});
});
});
var loadFile=函数（事件）{
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'}）；
}
};
我可以使用
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 + '"/>');
            }
        });
    });
});

var reader=newfilereader（）；
$（文档）.ready（函数（）{
reader.addEventListener（“加载”，函数（）{
var preview=document.getElementById（'imageFullScreen'）；
$（“#图像全屏”）.smartZoom（“销毁”）；
preview.src=reader.result；
$（“#图像全屏”）.smartZoom（）；
}，假）；
$（“#imgInp”）。关于（“更改”，函数（事件）{
if（event.target.files[0]）{
reader.readAsDataURL（event.target.files[0]）；
}
});
功能moveButtonClickHandler（e）{
var pixelsToMoveOnX=0；
var pixelsToMoveOnY=0；
开关（如target.id）{
案例“leftPositionMap”：
pixelsToMoveOnX=50；
打破
案例“rightPositionMap”：
pixelsToMoveOnX=-50；
打破
案例“topPositionMap”：
pixelsToMoveOnY=50；
打破
案例“底部位置图”：
pixelsToMoveOnY=-50；
打破
}
$（#imageFullScreen'）.smartZoom（'pan'，pixelsToMoveOnX，pixelsToMoveOnY）；
}
});
$（“#图像全屏”）.smartZoom（）；
$（函数（）{
$（“#btnSave”）。单击（函数（）{
html2canvas（$（“#包装”）{
onrendered：函数（画布）{
var img=canvas.toDataURL（“image/png”）；
$（'body'）。追加（''）；
}
});
});
});
这是你的电话号码

编辑：您必须在更改src之前销毁smartZoom对象，然后重新初始化它。

现在，可以上载图像，但在缩放或拖动图像时会出现混乱，捕获按钮仍然无法正常工作。我认为jquery库不支持blob图像。我正在努力解决它。除了捕获按钮，其他一切都正常工作。它仍然不工作。你说不工作是什么意思？对我来说，它捕获了预览中看到的图像。你想让它以另一种方式工作吗？问题是，这是当用户上传图像时，这是当图像被放大时，这是捕获的图像