html2canvas单击即可裁剪图像

我使用html2canvas来捕获整个页面，但需要裁剪图像。我在github（）上找到了brcontainer关于这样做的帖子

我有这个工作很好，但我想捕捉图像时，用户点击一个按钮。（在他们定制了一些东西之后）有人能告诉我如何调整此代码以适应吗

（我一直在尝试调整）

（下面是裁剪代码及其在底部使用的测试函数）

下载img
函数快照（div、formatOutput、myCallback）{
html2canvas（document.body{
“onrendered”：函数（画布）{//获取整个div“快照”
var context=canvas.getContext（'2d'）；//来自originalCanvas的上下文
var tmpCanvas=document.createElement（'canvas'）；
tmpCanvas.width=canvas.width；
tmpCanvas.height=canvas.height；
var context2=canvas.getContext（'2d'）；//来自tmpCanvas的上下文
var imageObj=新图像（）；
imageObj.onload=函数（）{
//设置：绘制裁剪图像
var-sourceX=0；
var-sourceY=25；
var-sourceWidth=400；
var-sourceHeight=150；
var destWidth=sourceWidth；
var destHeight=源高度；
var destX=canvas.width/2-destWidth/2；
var destY=canvas.height/2-destHeight/2；
context2.drawImage（imageObj、sourceX、sourceY、sourceWidth、sourceHeight、destX、destY、destWidth、destHeight）；
var data=context2.getImageData（sourceX、sourceY、sourceWidth、sourceHeight）；
context.clearRect（0,0，canvas.width，canvas.height）；//清除原始canvas
canvas.width=sourceWidth；
canvas.height=源高度；
context2.putImageData（数据，0,0）；
myCallback（canvas.toDataURL（formatOutput））；
//记忆！！！
context.clearRect（0，0，sourceWidth，sourceHeight）；//清除原始Canvas
context2.clearRect（0，0，sourceWidth，sourceHeight）；//清除tmpCanvas
数据=空；
tmpCanvas=null；
canvas=null；
imageObj=null；
};
imageObj.src=tmpCanvas.toDataURL（“image/png”）；
}
});
}
//测试。。。
快照（document.getElementById（“myDiv”），“image/png”，函数（imgData）{
窗口打开（imgData）；
});

我通过在Stack Exchange上拼凑其他示例找到了答案-希望这对其他人有所帮助

<script>
function SnapShotCroped(div,formatOutput,myCallback){
html2canvas(document.body, {
// html2canvas([div],{
"onrendered":function(canvas){//get entire div "snapshot"
        var context = canvas.getContext('2d');//context from originalCanvas

        var tmpCanvas = document.createElement('canvas');
            tmpCanvas.width = canvas.width;
            tmpCanvas.height = canvas.height;
        var context2 = canvas.getContext('2d');//context from tmpCanvas

        var imageObj = new Image();

        imageObj.onload = function() {
            //setup: draw cropped image
            var sourceX = 1090;
            var sourceY = 150;
            var sourceWidth = 830;
            var sourceHeight = 590;
            var destWidth = sourceWidth;
            var destHeight = sourceHeight;
            var destX = canvas.width / 2 - destWidth / 2;
            var destY = canvas.height / 2 - destHeight / 2;

            context2.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
            var data = context2.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);

            context.clearRect(0, 0, canvas.width, canvas.height);//clear originalCanvas
            canvas.width = sourceWidth;
            canvas.height = sourceHeight;

            context2.putImageData(data,0,0);

            myCallback(canvas.toDataURL(formatOutput));

            //memory!!!
            context.clearRect(0, 0,  sourceWidth, sourceHeight);//clear originalCanvas
            context2.clearRect(0, 0, sourceWidth, sourceHeight);//clear tmpCanvas
            data = null;
            tmpCanvas = null;
            canvas = null;
            imageObj = null;
        };
        imageObj.src = tmpCanvas.toDataURL("image/png");
    }
});
}
</script>
<script>
//save when button with id save_image_locally is clicked...
$('#save_image_locally').click(function(){
SnapShotCroped(document.getElementById("page"),"image/png",function(imgData){
window.open(imgData);
});
});
</script>

函数快照（div、formatOutput、myCallback）{
html2canvas（document.body{
//html2canvas（[div]{
“onrendered”：函数（画布）{//获取整个div“快照”
var context=canvas.getContext（'2d'）；//来自originalCanvas的上下文
var tmpCanvas=document.createElement（'canvas'）；
tmpCanvas.width=canvas.width；
tmpCanvas.height=canvas.height；
var context2=canvas.getContext（'2d'）；//来自tmpCanvas的上下文
var imageObj=新图像（）；
imageObj.onload=函数（）{
//设置：绘制裁剪图像
var-sourceX=1090；
var-sourceY=150；
var sourceWidth=830；
var-sourceHeight=590；
var destWidth=sourceWidth；
var destHeight=源高度；
var destX=canvas.width/2-destWidth/2；
var destY=canvas.height/2-destHeight/2；
context2.drawImage（imageObj、sourceX、sourceY、sourceWidth、sourceHeight、destX、destY、destWidth、destHeight）；
var data=context2.getImageData（sourceX、sourceY、sourceWidth、sourceHeight）；
context.clearRect（0,0，canvas.width，canvas.height）；//清除原始canvas
canvas.width=sourceWidth；
canvas.height=源高度；
context2.putImageData（数据，0,0）；
myCallback（canvas.toDataURL（formatOutput））；
//记忆！！！
context.clearRect（0，0，sourceWidth，sourceHeight）；//清除原始Canvas
context2.clearRect（0，0，sourceWidth，sourceHeight）；//清除tmpCanvas
数据=空；
tmpCanvas=null；
canvas=null；
imageObj=null；
};
imageObj.src=tmpCanvas.toDataURL（“image/png”）；
}
});
}
//单击id为“本地保存图像”的按钮时保存。。。
$（“#本地保存图像”）。单击（函数（）{
快照（document.getElementById（“page”），“image/png”，函数（imgData）{
窗口打开（imgData）；
});
});

<button id="save_image_locally">download img</button>

<script>
function SnapShotCroped(div,formatOutput,myCallback){
html2canvas(document.body, {
    "onrendered":function(canvas){//get entire div "snapshot"
        var context = canvas.getContext('2d');//context from  originalCanvas

        var tmpCanvas = document.createElement('canvas');
            tmpCanvas.width = canvas.width;
            tmpCanvas.height = canvas.height;
        var context2 = canvas.getContext('2d');//context from tmpCanvas

        var imageObj = new Image();

        imageObj.onload = function() {
            //setup: draw cropped image
            var sourceX = 0;
            var sourceY = 25;
            var sourceWidth = 400;
            var sourceHeight = 150;
            var destWidth = sourceWidth;
            var destHeight = sourceHeight;
            var destX = canvas.width / 2 - destWidth / 2;
            var destY = canvas.height / 2 - destHeight / 2;

            context2.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
            var data = context2.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);

            context.clearRect(0, 0, canvas.width, canvas.height);//clear originalCanvas
            canvas.width = sourceWidth;
            canvas.height = sourceHeight;

            context2.putImageData(data,0,0);

            myCallback(canvas.toDataURL(formatOutput));

            //memory!!!
            context.clearRect(0, 0,  sourceWidth, sourceHeight);//clear originalCanvas
            context2.clearRect(0, 0, sourceWidth, sourceHeight);//clear tmpCanvas
            data = null;
            tmpCanvas = null;
            canvas = null;
            imageObj = null;
        };
        imageObj.src = tmpCanvas.toDataURL("image/png");
    }
});
}

//Test...
SnapShotCroped(document.getElementById("myDiv"),"image/png",function(imgData){
window.open(imgData);
});
</script>

<script>
function SnapShotCroped(div,formatOutput,myCallback){
html2canvas(document.body, {
// html2canvas([div],{
"onrendered":function(canvas){//get entire div "snapshot"
        var context = canvas.getContext('2d');//context from originalCanvas

        var tmpCanvas = document.createElement('canvas');
            tmpCanvas.width = canvas.width;
            tmpCanvas.height = canvas.height;
        var context2 = canvas.getContext('2d');//context from tmpCanvas

        var imageObj = new Image();

        imageObj.onload = function() {
            //setup: draw cropped image
            var sourceX = 1090;
            var sourceY = 150;
            var sourceWidth = 830;
            var sourceHeight = 590;
            var destWidth = sourceWidth;
            var destHeight = sourceHeight;
            var destX = canvas.width / 2 - destWidth / 2;
            var destY = canvas.height / 2 - destHeight / 2;

            context2.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
            var data = context2.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);

            context.clearRect(0, 0, canvas.width, canvas.height);//clear originalCanvas
            canvas.width = sourceWidth;
            canvas.height = sourceHeight;

            context2.putImageData(data,0,0);

            myCallback(canvas.toDataURL(formatOutput));

            //memory!!!
            context.clearRect(0, 0,  sourceWidth, sourceHeight);//clear originalCanvas
            context2.clearRect(0, 0, sourceWidth, sourceHeight);//clear tmpCanvas
            data = null;
            tmpCanvas = null;
            canvas = null;
            imageObj = null;
        };
        imageObj.src = tmpCanvas.toDataURL("image/png");
    }
});
}
</script>
<script>
//save when button with id save_image_locally is clicked...
$('#save_image_locally').click(function(){
SnapShotCroped(document.getElementById("page"),"image/png",function(imgData){
window.open(imgData);
});
});
</script>