html2canvas crop image on click

nzdavo Published at Dev

148

nzdavo

I am using html2canvas to capture a whole page but need to crop the image. I found brcontainer's post about doing this on github (here)

I have this working fine but I'd like to capture the image when the user clicks a button. (After they have customized some things) Can someone please show me how to adapt this code to suit?

(I've been trying to adapt this)

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

(Here is the cropping code and the test function that it works with at the bottom)

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

nzdavo

I figured it out by cobbling together other examples on Stack Exchange - hope this helps someone else!

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

Collected from the Internet

Please contact [email protected] to delete if infringement.