How to cut an image / HTML canvas in half via javascript?

Question

I'm using html2canvas to turn a google map javascript API with custom features, into a canvas, and then an image.

Works fine on all browsers, except on IE 11 it generates an image with extra blank space to the right of the image, equal to the (width of browser window - map width). So the wider my window is, the more space to the right, and visa versa.

How can I slice this image (or HTMLcanvas) at exactly the edge of the actual image (768px wide)?

I found this code here but did not know how to modify it for this task:

var image = new Image();
image.onload = cutImageUp;
image.src = 'myimage.png';

function cutImageUp() {
    var imagePieces = [];
    for(var x = 0; x < numColsToCut; ++x) {
        for(var y = 0; y < numRowsToCut; ++y) {
            var canvas = document.createElement('canvas');
            canvas.width = widthOfOnePiece;
            canvas.height = heightOfOnePiece;
            var context = canvas.getContext('2d');
            context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
            imagePieces.push(canvas.toDataURL());
        }
    }

    // imagePieces now contains data urls of all the pieces of the image

    // load one piece onto the page
    var anImageElement = document.getElementById('myImageElementInTheDom');
    anImageElement.src = imagePieces[0];
}

Answer 1

Here's a canvas cropper that creates an image. You'll need to adjust the cropping dimensions for your map.

// initialize the test canvas and wireup cut button.
(function() {
  var can = document.getElementById('test');
  var w = can.width = 400;
  var h = can.height = 200;
  var ctx = can.getContext('2d');

  ctx.fillStyle = "#336699";
  ctx.fillRect(0, 0, 200, 200);
  ctx.strokeStyle = "#000000";
  ctx.lineWidth = 20;
  ctx.strokeRect(0, 0, w, h);
  ctx.strokeRect(0, 0, w / 2, h);
  var btn = document.getElementById('cut');
  btn.addEventListener('click', function() {
     
    var croppedCan = crop(can, {x: 0, y: 0}, {x: 200, y: 200});
    
    // Create an image for the new canvas.
    var image = new Image();
    image.src = croppedCan.toDataURL();
  
    // Put the image where you need to.
    document.getElementsByTagName('body')[0].appendChild(image);
    return image;
    
  });
})();


// function crop
// Returns a cropped canvas given a cavnas and crop region.
//
// Inputs:
// can, canvas
// a, {x: number, y: number} - left top corner
// b, {x: number, y: number} - bottom right corner

function crop(can, a, b) {
    // get your canvas and a context for it
    var ctx = can.getContext('2d');
    
    // get the image data you want to keep.
    var imageData = ctx.getImageData(a.x, a.y, b.x, b.y);
  
    // create a new cavnas same as clipped size and a context
    var newCan = document.createElement('canvas');
    newCan.width = b.x - a.x;
    newCan.height = b.y - a.y;
    var newCtx = newCan.getContext('2d');
  
    // put the clipped image on the new canvas.
    newCtx.putImageData(imageData, 0, 0);
  
    return newCan;    
 }

<button id='cut'>Crop</button>
<hr/>
<canvas id='test'></canvas>
<hr/>