![](/img/trans.png)
[英]In Kinetic.js how can I load multiple images with one image loaded on canvas at a time
[英]How can I capture multiple images out of one in the <canvas>?
我寫了一些代碼,在可以觸摸的圖像上繪制一個半透明的矩形:
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();
}
這可行。 但是,現在我想擁有它,以便可以將矩形中的圖像的每個部分捕獲為單獨的圖像。
我怎樣才能做到這一點? 因為我擁有重繪的內容,所以它刪除了前一個矩形,這使此操作變得很困難。
畫布只能將整個畫布另存為圖像,因此訣竅是創建一個臨時畫布,其大小與要保存的區域相同。
一種方法是創建一個函數,該函數將圖像和矩形對象作為參數並返回該區域的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():
}
如果不需要頂部的任何圖形,或者在頂部繪制元素,只需傳入原始畫布元素作為圖像源,就可以傳遞原始圖像。 當然,CORS限制也適用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.