点击 html2canvas 裁剪图像

Question

我正在使用 html2canvas 捕获整个页面，但需要裁剪图像。我在 github (here)

上找到了 brcontainer 的 post 关于这样做的信息

我的这个工作正常，但我想在用户单击按钮时捕获图像。（在他们定制了一些东西之后）有人可以告诉我如何调整这段代码以适应吗？

（我一直在努力适应这个）

$('#save_image_locally').click(function(){
        html2canvas($('#myDiv'), 
         {
            onrendered: function (canvas) {
                var img = canvas.toDataURL("image/png");
                window.open(img);

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

<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>

Answer 1

我通过在 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>

点击 html2canvas 裁剪图像

html2canvas crop image on click

canvas

crop

html2canvas