如何通过 javascript 将图像 / HTML canvas 切成两半？
How to cut an image / HTML canvas in half via javascript?
我正在使用 html2canvas 将具有自定义功能的 google 地图 javascript API 转换为 canvas，然后是图像.
在所有浏览器上都能正常工作，除了在 IE 11 上，它生成的图像在图像右侧有额外的空白 space，等于（浏览器宽度 window - 地图宽度） .所以我的 window 越宽，右边的 space 越多，反之亦然。
如何在实际图像（768 像素宽）的边缘切分此图像（或 HTMLcanvas）？
我在这里找到了这段代码，但不知道如何为这个任务修改它：
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];
}
这是创建图像的 canvas 裁剪器。您需要调整地图的裁剪尺寸。
// 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 地图，生成 canvas，在实际图像的边缘对其进行切片以修复 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 Pixels = _("img").cutImage( x , y , width , height ) ;
_("img").src(Pixels.src);
我正在使用 html2canvas 将具有自定义功能的 google 地图 javascript API 转换为 canvas，然后是图像.
在所有浏览器上都能正常工作，除了在 IE 11 上，它生成的图像在图像右侧有额外的空白 space，等于（浏览器宽度 window - 地图宽度） .所以我的 window 越宽，右边的 space 越多，反之亦然。
如何在实际图像（768 像素宽）的边缘切分此图像（或 HTMLcanvas）？
我在这里找到了这段代码，但不知道如何为这个任务修改它：
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];
}
这是创建图像的 canvas 裁剪器。您需要调整地图的裁剪尺寸。
// 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 地图，生成 canvas，在实际图像的边缘对其进行切片以修复 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 Pixels = _("img").cutImage( x , y , width , height ) ;
_("img").src(Pixels.src);