我编写了一些代码,在可以通过触摸绘制的图像上绘制半透明矩形:
function drawRect() {
var canvas = document.getElementById('receipt');
var ctx = canvas.getContext('2d');
var drag = false;
var imageObj;
var rect = { };
var touch;
canvas.width = WIDTH;
canvas.height = HEIGHT;
function init() {
imageObj = new Image();
imageObj.src = 'img.jpg';
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0);
};
canvas.addEventListener('touchstart', handleTouch, false);
canvas.addEventListener('touchmove', handleTouch, false);
canvas.addEventListener('touchleave', handleEnd, false);
canvas.addEventListener('touchend', handleEnd, false);
}
function handleTouch(event) {
if (event.targetTouches.length === 1) {
touch = event.targetTouches[0];
if (event.type == 'touchmove') {
if (drag) {
rect.w = touch.pageX - rect.startX;
rect.h = touch.pageY - rect.startY ;
draw();
}
} else {
rect.startX = touch.pageX;
rect.startY = touch.pageY;
drag = true;
}
}
}
function handleEnd(event) {
drag = false;
}
function draw() {
drawImageOnCanvas();
ctx.fillStyle = 'rgba(0, 100, 255, 0.2)';
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
function drawImageOnCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imageObj, 0, 0);
}
init();
}
这有效。但是,现在我想要拥有它,以便我可以将矩形中的图像的每个部分捕获为单独的图像。
我怎样才能做到这一点?因为我有重画的东西,它删除了以前的矩形,这使得这变得很困难。
最佳答案
Canvas 只能将整个 Canvas 保存为图像,因此技巧是创建一个临时 Canvas ,其大小与您要保存的区域的大小相同。
一种方法是创建一个函数,该函数将图像和矩形对象作为参数并返回该区域的 data-uri(或 Blob):
function saveRegion(img, rect) {
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
canvas.width = rect.w;
canvas.height = rect.h;
ctx.drawImage(img, rect.startX, rect.startY, rect.w, rect.h, 0, 0, rect.w, rect.h);
return canvas.toDataURL():
}
如果不希望顶部有任何图形,您可以传入原始图像,或者如果您在其顶部绘制元素,则只需传入原始 Canvas 元素作为图像源。当然,CORS 限制也适用。
关于javascript - 如何从 <canvas> 中的一张图像中捕获多张图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30009710/