How to cut HTML image / canvas in half through javascript?

Question

I use html2canvas to turn the javascript API into Google Maps with custom functions, into a canvas and then an image.

It works well in all browsers, except for IE 11, it creates an image with an additional space to the right of the image equal to (browser window width - map width). Thus, the wider my window, the more space on the right, and vice versa.

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

I found this code here, but did not know how to change 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

This creates a canvas crop that creates an image. You will need to adjust the cropping sizes for your card.

 // 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(ax, ay, bx, by); // create a new cavnas same as clipped size and a context var newCan = document.createElement('canvas'); newCan.width = bx - ax; newCan.height = by - ay; 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/> 

Answer 2

Here, the code I made that takes the google map creates a canvas, cuts it on the edge of the actual image to fix IE 11 error, then displays this new image and finally prints the container.

  // Insert map container for output to printer var element = $("#map-container"); var printContainer = $("#printContainer"); html2canvas(element, { useCORS: true, onrendered: function (canvas) { // Must clear the printContainer before each session prints, or it will also print the previous info (if user presses the print results button twice) printContainer.empty(); // Put the map into a canvas inside #printContainer printContainer.append(canvas); // Find the canvas we just made var myCanvas = printContainer.find("canvas")[0]; // add the [0] to get the native DOM element object myCanvas.id = 'generatedCanvas1'; // Check if we're running IE 11 or earlier var ua = window.navigator.userAgent; var isIE = (ua.indexOf('MSIE') > 0 || ua.indexOf('Trident') > 0); if (isIE) { console.log("We're on IE"); // ========================================================================================== // ======= IE Fix for canvas / image generation - slice the canvas ========================== // ========================================================================================== // 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() { var croppedCan = crop(myCanvas, { x: 0, y: 0 }, { x: 800, y: 768 }); // Create an image for the new canvas. var image = new Image(); image.src = croppedCan.toDataURL(); // Should we print the map image? Only if this is true... if ($('*').hasClass('map-invisible posrel map-show')) { //var dataUrl = canvas.toDataURL("image/png"); imageMap = '<p style="text-align:center;"><img id="canvasImage" src="' + image.src + '" height="800" width="768" /></p>'; div.append('<p>&nbsp;</p>').html(); div.append(imageMap); } // Put the image where you need to. //document.getElementById('printContainer').appendChild(image); return image; //}); })(); 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(ax, ay, bx, by); // create a new cavnas same as clipped size and a context var newCan = document.createElement('canvas'); newCan.width = bx - ax; newCan.height = by - ay; var newCtx = newCan.getContext('2d'); // put the clipped image on the new canvas. newCtx.putImageData(imageData, 0, 0); return newCan; } // ========================================================================================== // ======= END IE Fix for canvas / image generation - slice the canvas ====================== // ========================================================================================== } else { console.log("We're not on IE"); // For all other browsers except IE // Should we print the map image? Only if this is true... if ($('*').hasClass('map-invisible posrel map-show')) { var image = new Image(); image.src = canvas.toDataURL("image/png"); imageMap = '<p style="text-align:center;"><img id="canvasImage" src="' + image.src + '" height="800" width="768" /></p>'; div.append('<p>&nbsp;</p>').html(); div.append(imageMap); } } // Build the data set div.append(criteriaDiv); div.append(pageTable).html(); // Add the new data into the hidden printContainer printContainer.append(div); // Remove the original canvas which was cropped so it doesnt print with the new canvas image $("#generatedCanvas1").remove(); // Fire the print command printContainer.printThis({ //debug: true printDelay: 1500 // variable print delay needed so that css has time to load for the printout }); // For Debugging with the "#printMe" button $(function () { $("#printMe").click(function () { //$printIframe.printThis({ // debug: true, printDelay: 1500 // variable print delay //}); var $iframe = $("iframe[name='printIframe']"); setTimeout(function () { if ($iframe.hasClass("MSIE")) { // check if the iframe was created with the ugly hack // and perform another ugly hack out of neccessity window.frames["printIframe"].focus(); $head.append("<script> window.print(); </script>"); } else { // proper method if (document.queryCommandSupported("print")) { $iframe[0].contentWindow.document.execCommand("print", false, null); } else { $iframe[0].contentWindow.focus(); $iframe[0].contentWindow.print(); } } }, 333); }); }); // PrintThis usage and options //* $("#mySelector").printThis({ //* debug: false, * show the iframe for debugging //* importCSS: true, * import page CSS //* importStyle: false, * import style tags //* printContainer: true, * grab outer container as well as the contents of the selector //* loadCSS: "path/to/my.css", * path to additional css file - us an array [] for multiple //* pageTitle: "", * add title to print page //* removeInline: false, * remove all inline styles from print elements //* printDelay: 333, * variable print delay //* header: null, * prefix to html //* formValues: true * preserve input/form values //* }); } }); 

Answer 3

try using haxcv library simple and easy

https://docs.haxcv.org/Methods/cutImage

example:

var Pixels = _ ("img"). cutImage (x, y, width, height);

.

_ ("IMG") IDC (Pixels.src);