Cắt xén vải/Xuất khẩu vải html5 với chiều rộng và chiều cao nhất định

Question

Có hàng trăm hướng dẫn, cách có thể cắt hình ảnh bằng drawImage() trên canvas.

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); 

Tuy nhiên, tôi có khung vẽ đầy trình duyệt của người dùng. Bằng cách xuất khung hình làm hình ảnh, tôi chỉ muốn xuất một vùng có kích thước 640px * 480px từ (0 | 0).

Sự cố: Làm cách nào tôi có thể yêu cầu javascript chỉ sử dụng 640 * 480 canvas cho toDataURL()?

Dưới đây là những gì tôi có cho đến nay:

$("#submitGraphic").click(function(){ 
    var canvas = document.getElementsByTagName("canvas"); 
    // canvas context 
    var context = canvas[0].getContext("2d"); 
    // get the current ImageData for the canvas 
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height); 
    // store the current globalCompositeOperation 
    var compositeOperation = context.globalCompositeOperation; 
    // set to draw behind current content 
    context.globalCompositeOperation = "destination-over"; 
    //set background color 
    context.fillStyle = "#FFFFFF"; 
    // draw background/rectangle on entire canvas 
    context.fillRect(0,0,canvas[0].width,canvas[0].height); 

    // not working, seems to clear the canvas? browser hangs? 
    // seems that I can click a white image in the background 
    /*canvas[0].width = 640; 
    canvas[0].height = 480;*/ 

    // not working either 
    /*canvas[0].style.width = '640px'; 
    canvas[0].style.height = '480px';*/ 

    // not working at all 
    /*context.canvas.width = 640; 
    context.canvas.height = 480;*/ 

    // write on screen 
    var img = canvas[0].toDataURL("image/png"); 
    document.write('<a href="'+img+'"><img src="'+img+'"/></a>'); 
}) 

PS: Tôi không muốn thay đổi kích thước hoặc quy mô, chỉ cần cắt/cắt vào cửa sổ cố định. Here Tôi đọc rằng bạn chỉ xác định canvas.width và canvas.height - nhưng điều này sẽ xóa canvas.

Answer 1

Cách tốt nhất là chỉ tạo canvas tạm thời để vẽ lên từ canvas hiện tại. Người dùng sẽ không bao giờ thấy canvas tạm thời này. Sau đó, bạn chỉ cần sử dụng toDataUrl() trên canvas tạm thời.

Live Demo

$("#submitGraphic").click(function(){ 
    var canvas = document.getElementsByTagName("canvas"); 
    // canvas context 
    var context = canvas[0].getContext("2d"); 
    // get the current ImageData for the canvas 
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height); 
    // store the current globalCompositeOperation 
    var compositeOperation = context.globalCompositeOperation; 
    // set to draw behind current content 
    context.globalCompositeOperation = "destination-over"; 
    //set background color 
    context.fillStyle = "#FFFFFF"; 
    // draw background/rectangle on entire canvas 
    context.fillRect(0,0,canvas[0].width,canvas[0].height); 

    var tempCanvas = document.createElement("canvas"), 
     tCtx = tempCanvas.getContext("2d"); 

    tempCanvas.width = 640; 
    tempCanvas.height = 480; 

    tCtx.drawImage(canvas[0],0,0); 

    // write on screen 
    var img = tempCanvas.toDataURL("image/png"); 
    document.write('<a href="'+img+'"><img src="'+img+'"/></a>'); 
})​ 

Answer 2

Bạn tạo canvas ngoài màn hình thứ hai, bạn sao chép hình ảnh từ canvas đầu tiên sang khung thứ hai (sử dụng ảnh đầu tiên làm đối tượng hình ảnh của bạn), sau đó bạn xuất canvas thứ hai.

Answer 3

tinh khiết cây trồng html5 canvas. Bạn có thể khám phá trực tiếp here

$('document').ready(function(){ 
const divOffset = 1 
var x1,x2,y1,y2, xDif, yDif = 0; 
var isSelection, 
    isBottomRight, 
    isTopRight, 
    isTopLeft, 
    isBottomLeft = false 

var r = document.getElementById('source').getBoundingClientRect(); 
var pos = [0, 0]; 
pos[0] = r.left; 
pos[1] = r.top; //got position coordinates of canvas 

var sel = document.getElementById('sel') 
var canvasSource = document.getElementById("source"); 
var ctxSource = canvasSource.getContext("2d"); 

var img = new Image() 
img.src = "http://bohdaq.name/assets/localImage.jpg" 
img.onload = function(){ 
    ctxSource.drawImage(img, 0, 0) 
} 

$("#source").mousedown(function(event) { 
    isSelection = true 

    x1 = event.pageX - pos[0] 
    y1 = event.pageY - pos[1] 

    sel.style.setProperty('display', 'block') 

    sel.style.setProperty('left', event.pageX + "px") 
    sel.style.setProperty('top', event.pageY + "px") 

    sel.style.setProperty('width', '0px') 
    sel.style.setProperty('height', '0px') 
}); 

$("#source").mouseup(function(event) { 
    isSelection = false 
    if(isBottomRight){ 
    x2 = event.pageX - pos[0] 
    y2 = event.pageY - pos[1] 

    xDif = x2-x1 
    yDif = y2-y1 
    } else if (isBottomLeft){ 
    y2 = event.pageY - pos[1] 
    yDif = y2 - y1 

    xDif = x1 - x2 
    x1 = x1 - xDif 

    } else if(isTopRight){ 
    x2 = event.pageX - pos[0] 
    xDif = x2 - x1 
    yDif = y1 - y2 
    y1 = y1 - yDif   
    } else if (isTopLeft){ 
    xDif = x1 - x2 
    x1 = x1 - xDif 
    yDif = y1 - y2 
    y1 = y1 - yDif   
    } 
    sel.style.setProperty('display', 'none') 
    crop(x1, y1, xDif, yDif) 
}); 

$('#source').mousemove(function(event){ 
    if(isSelection){ 
    x2 = event.pageX - pos[0] 
    y2 = event.pageY - pos[1] 
    if(x2>x1 && y2>y1){ //moving right bottom selection 
     isBottomRight = true 
     isBottomLeft = false 
     isTopLeft = false 
     isTopRight = false 

     xDif = x2 - x1 
     yDif = y2 - y1 

     sel.style.setProperty('width', xDif + 'px') 
     sel.style.setProperty('height', yDif + 'px') 
    } else if(x2<x1 && y2>y1){ //moving left bottom selection 
     isBottomLeft = true 
     isTopLeft = false 
     isTopRight = false 
     isBottomRight = false 

     xDif = x1 - x2 
     yDif = y2 - y1 

     sel.style.setProperty('left', x2 + 'px') 
     sel.style.setProperty('width', xDif + 'px') 
     sel.style.setProperty('height', yDif + 'px') 

    } else if(x2>x1 && y2<y1){ 
     isTopRight = true 
     isTopLeft = false 
     isBottomLeft = false 
     isBottomRight = false 

     xDif = y1 - y2 
     yDif = x2 - x1 

     sel.style.setProperty('top', y2 + 'px') 
     sel.style.setProperty('width', yDif + 'px') 
     sel.style.setProperty('height', xDif + 'px') 
    } else if (x2<x1 && y2<y1){ 
     isTopLeft = true 
     isTopRight = false 
     isBottomLeft = false 
     isBottomRight = false 

     yDif = y1 - y2 
     xDif = x1 - x2 

     sel.style.setProperty('left', x2 + pos[0] + divOffset + 'px') 
     sel.style.setProperty('top', y2 + pos[1] + divOffset + 'px') 
     sel.style.setProperty('width', xDif + 'px') 
     sel.style.setProperty('height', yDif + 'px') 
    } 
} 
}) 

function crop(x, y, xDif, yDif){ 
    canvasSource.width = xDif 
    canvasSource.height = yDif 
    ctxSource.drawImage(img, x, y, xDif, yDif, 0, 0, xDif, yDif); 
} 

})