No scope for custom boundary

[adchowdhury]

Hi,

I am unable find a feature. The scenario is, I have a div whose height is 100px & width is 800px. I want a snapshot of the div but instead of whole div I want the snapshot begin from 20px left, 30px top, 100px in width and 80px in height.

width and height is possible via option. But the top & left position, I am unable to find. Kindly help me out here. How do I achieve this?

Thanks & regards
Aniruddha

[brcontainer]

try: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

[adchowdhury]

Hi,
Thanks for quick response. But my problem is I want to take a snapshot of a DIV and provide coordinate, not that of a picture. Currently what we are doing is, taking full snapshot of the DIV and then cut the image. Not working well. So looking out, if the facility is available in the core engine, it would be great.

Thanks & regards
Aniruddha

[brcontainer]

This link is exactly what you need, but I believe it's just not something ready for your case. Maybe you do not know the events in HTML5 canvas, so do not get it.

I usually do not give codes ready, but in this case I will give you something ready to make it more clear to you how it works.

It would be something like:

<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<style>
*{
margin:0;padding:0;
}
#myDiv{
margin:10px 0 0 10px;
background:#0f0f0f;
padding:0 0 10px 0;
}
#myDiv div{
    border:1px #ccc solid;
    margin:0 0 0 145px;
    background:#fcfcfc;
    height:100px;
}
</style>
<div id="myDiv">
    <p>teste</p>
    <div>
        <p>teste2</p>
    </div>
</div>

<script>
function SnapShotCroped(div,formatOutput,myCallback){
    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 = 150;
                var sourceY = 25;
                var sourceWidth = 150;
                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>

Good luck.

[adchowdhury]

Hello brcontainer,

Thanks a lot. 👍