javascript - 如何旋转 Canvas 中的图像？

Question

我正在尝试使用 d3 从 json 文件绘制图像。然后将该图像数据放入 Canvas 上下文中以实际绘制图像。我想旋转生成的图像，但我找不到如何旋转。我实际使用的代码

$(document).ready(function() {
    d3.json("resources/image.json").then(function(image) {
        var canvas = d3.select("colorImage")
                       .append("canvas")
                       .attr("width", 200)
                       .attr("height", 200);


        var context = canvas.node().getContext("2d");
        var image_data = context.createImageData(200, 200);

        image_data.data.set(image);
        context.rotate(60); 
        context.putImageData(image_data, 0, 0);  // <---- image not rotated
        context.fillRect( 100, 100, 20, 20 );  // <--- rectangle rotated
    }).catch(function(error){
        if (error) throw error;
    });
})

Answer 1

putImageData()和 getImageData()不受上下文变换矩阵的影响。

要旋转它，最简单的是 create an ImageBitmap从中使用 drawImage() 绘制 ImageBitmap:

(async () => {
  const canvas = document.getElementById( 'canvas' );
  const context = canvas.getContext( '2d' );
  // make some noise
  const image = new Uint8Array( Uint32Array.from(
      { length: 200 * 200 },
      _ => (Math.random() * 0xFFFFFFFF)
    ).buffer );

  const image_data = context.createImageData( 200, 200 );
  image_data.data.set( image );
  
  const center_w = canvas.width / 2;
  const center_h = canvas.height / 2;
  const bitmap = await createImageBitmap( image_data );
  context.translate( center_w, center_h ); 
  context.rotate( 60 );
  context.translate( -center_w, -center_h ); 
  context.drawImage( bitmap, center_w-100, center_h-100 );  // <---- image rotated
  context.lineWidth = 4;
  context.strokeStyle = 'green';
  context.strokeRect( center_w-100, center_h-100, 200, 200 );  // <--- rectangle rotated
})().catch( console.error );

<canvas id="canvas" height="300" width="300"></canvas>

对于不支持 createImageBitmap() 方法的浏览器，您可以通过使用 HTMLCanvasElement 轻松地修补此精确用法:

/* if( !window.createImageBitmap ) { */ // for demo we force monkey-patch
 monkeyPatchCreateImageBitmap();
/*} */

(async () => {
  const canvas = document.getElementById( 'canvas' );
  const context = canvas.getContext( '2d' );
  // make some noise
  const image = new Uint8Array( Uint32Array.from(
      { length: 200 * 200 },
      _ => (Math.random() * 0xFFFFFFFF)
    ).buffer );

  const image_data = context.createImageData( 200, 200 );
  image_data.data.set( image );
  
  const center_w = canvas.width / 2;
  const center_h = canvas.height / 2;
  const bitmap = await createImageBitmap( image_data );
  context.translate( center_w, center_h ); 
  context.rotate( 60 );
  context.translate( -center_w, -center_h ); 
  context.drawImage( bitmap, center_w-100, center_h-100 );  // <---- image rotated
  context.lineWidth = 4;
  context.strokeStyle = 'green';
  context.strokeRect( center_w-100, center_h-100, 200, 200 );  // <--- rectangle rotated
})().catch( console.error );


// minimalistic version that only accepts ImageData, and no clipping
function monkeyPatchCreateImageBitmap() {
  window.createImageBitmap = function( source ) {
    if( source instanceof ImageData ) {
      const dest = document.createElement( 'canvas' );
      dest.width = source.width;
      dest.height = source.height;
      dest.getContext( '2d' ).putImageData( source, 0, 0 );
      return Promise.resolve( dest );
    }
  };
}

<canvas id="canvas" height="300" width="300"></canvas>