Question

我希望在div中使用缩放和拖动调整图像后将div捕获为图像。

我正在使用此插件http://www.jqueryscript.net/zoom/Smart-jQuery-Pan-Zoom-Plugin-Smart-jQuery-Zoom.html来平移和缩放图像，在div和http://html2canvas.hertzen.com/此插件中将div转换为图像。

htmlfile.html

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="e-smart-zoom-jquery.min.js"></script>
<script src="html2canvas.js"></script>
<style type="text/css">
#imgContainer {
width: 980px;
height: 500px;
}

.zoomableContainer {
background-image: url("assets/transparent.png");
}
</style>
</head>

<body>
<div id="pageContent">
<div id="imgContainer"> <img id="imageFullScreen" src="assets/zoomFullScreen.jpg"/> </div>
</div>
<button onclick="capture()">capture</button>
<script>
$(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 capture(){
    var ele = document.getElementById("pageContent");
    html2canvas(ele, {
      onrendered: function(canvas) {
        document.body.appendChild(canvas);
      }
    });
}
</script>
</body>
</html>

但我没有按要求获得输出。

以下是加载页面时页面的屏幕截图。

以下是执行拖放后页面的屏幕截图

以下是点击捕获按钮后生成的结果

这是小提琴https://jsfiddle.net/knkbsvy2/

捕获div的内容作为图像

0 个答案: