14

何百ものチュートリアルがあり、キャンバス上で drawImage() によって画像をトリミングする方法があります。

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

ただし、ユーザーのブラウザーを満たすキャンバスがあります。キャンバスを画像としてエクスポートすることで、(0|0) から 640px*480px の領域のみをエクスポートしたいと考えています。

問題: toDataURL() にキャンバスの 640*480 のみを使用するように JavaScript に指示するにはどうすればよいですか?

これが私がこれまでに持っているものです：

$("#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: サイズ変更やスケーリングはしたくありません。固定ウィンドウにクリッピング/トリミングするだけです。ここでは、canvas.width と canvas.height のみを指定することを読みましたが、これによりキャンバスがクリアされます。

4

5 に答える 5

26

最良の方法は、現在のキャンバスから描画するための一時的なキャンバスを作成することです。ユーザーはこの一時キャンバスを見ることはありません。toDataUrl()次に、一時キャンバスで使用するだけです。

ライブデモ

$("#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>');
})​
于 2012-10-25T18:21:47.660 に答える
1

2 番目のオフスクリーン キャンバスを作成し、最初のキャンバスから 2 番目のキャンバスにイメージをコピーし (最初のキャンバスをイメージ オブジェクトとして使用)、2 番目のキャンバスをエクスポートします。

于 2012-10-25T17:21:59.840 に答える
1

純粋な html5 キャンバス トリミング:

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

})
于 2014-01-05T18:23:23.750 に答える