javascript - ejemplo - Lienzo de corte/Exportar lienzo html5 con cierto ancho y alto

canvas video html5

Question

Hay cientos de tutoriales, cómo uno puede recortar una imagen mediante drawImage () en un lienzo.

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

Sin embargo, tengo un lienzo que llena el navegador del usuario. Al exportar el lienzo como una imagen, me gustaría exportar solo un área de 640px * 480px desde (0 | 0).

Problema: ¿Cómo puedo decirle a javascript que use solo 640 * 480 del lienzo para toDataURL ()?

Esto es lo que tengo hasta ahora:

$("#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>'');
})

PD: No quiero cambiar el tamaño ni escalar, solo cortar / recortar a la ventana fija. Aquí leo que solo especificas canvas.width y canvas.height, pero esto borra el lienzo.

Answer 1

La mejor manera es simplemente crear un lienzo temporal para dibujar desde el lienzo actual. El usuario nunca verá este lienzo de temperatura. Entonces solo necesita usar toDataUrl() en el lienzo de temperatura.

Demo en vivo

$("#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

Realiza un segundo lienzo fuera de pantalla, copia la imagen del primer lienzo al segundo (utilizando el primero como su objeto de imagen) y luego exporta el segundo lienzo.

Answer 3

Cultivo de lienzo html5 puro. Puedes verlo en vivo aquí

$(''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);
}

})