Ritaglia tela/Esporta tele html5 con una certa larghezza e altezza

Question

Esistono centinaia di tutorial, come si può ritagliare un'immagine da drawImage() su una tela.

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

Tuttavia, ho una tela che riempie il browser dell'utente. Esportando il canvas come immagine, vorrei esportare solo un'area di 640px * 480px da (0 | 0).

Problema: Come posso dire a javascript di utilizzare solo 640 * 480 dell'area di disegno per toDataURL()?

Ecco quello che ho finora:

$("#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: io non voglio ridimensionare o scala, semplicemente ritaglio/ritaglio alla finestra fissa. Here Ho letto che specifichi solo canvas.width e canvas.height, ma questo cancella la tela.

Answer 1

Il modo migliore è solo creare una tela temporanea da cui attingere dalla tela corrente. L'utente non vedrà mai questa tela temporanea. Quindi è sufficiente utilizzare toDataUrl() sulla tela temp.

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

Si effettua una seconda area di lavoro fuori schermo, si copia l'immagine dalla prima area di disegno al secondo (utilizzando il primo come oggetto immagine), quindi si esporta la seconda area di disegno.

Answer 3

coltura pura HTML5 canvas. È possibile controllare dal vivo 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); 
} 

})