Question

我想从用户那里拍摄一张图片，显示它并允许用户在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属性显示图像，并缩放并拖动它但无法从用户处拍摄图像。

jsfiddle

Answer 1

尝试使用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对象，然后必须重新初始化它。

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

1 个答案: