Как разрезать холст изображения / HTML пополам с помощью javascript?
Я использую html2canvas, чтобы превратить Google map javascript API с пользовательскими функциями в холст, а затем изображение.
отлично работает во всех браузерах, за исключением IE 11, он генерирует изображение с дополнительным пробелом справа от изображения, равным (ширина окна браузера-ширина карты). Так что чем шире мое окно, тем больше места справа, и наоборот.
Как я могу нарезать это изображение (или HTMLcanvas) точно на краю фактического изображения (768px широкий)?
Я нашел этот код здесь, но не знаю, как изменить его для этой задачи:
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];
}
3 ответов
вот обрезка холста, которая создает изображение. Вам нужно будет настроить размеры обрезки для вашей карты.
// 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/>вот код, который я сделал, который берет карту google, генерирует холст, срезает его на краю фактического изображения, чтобы исправить ошибку IE 11, затем выводит это новое изображение и, наконец, печатает контейнер.
// 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> </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(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;
}
// ==========================================================================================
// ======= 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> </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
//* });
}
});
попробуйте использовать библиотеку haxcv простой и легкий
https://docs.haxcv.org/Methods/cutImage
пример :
var пикселей = _("img").cutImage (x, y, ширина, высота);
_("img").src (пиксели.src);