旋转HTML5视频并保存画布

Question

I have a HTML5 Video using jpeg_camera ( https://github.com/amw/jpeg_camera )

The Output of hte video on the html looks like this:

<video autoplay="" src="blob:http://localhost:49209/41c42143-5d0e-4525-8fe8-cc1e9f50a8e6" style="transform: scaleX(-1); position: relative; width: 601px; height: 338px; left: -31px; top: 0px;"></video>

When a tablet rotates, I capture the orientationchange and resize event and rotate the video as required.

The problem is when the snapshot is taken, the video is back to the original orientation, I'm trying to rotate the canvas in javascript before it is saved.

this is what I have (but it is unworking). The code is inside the jpgvideo library.

  JpegCameraHtml5.prototype._engine_capture = function(snapshot, mirror, quality, scale, rotate) {
    var canvas, context, crop;
    crop = this._get_capture_crop();
    canvas = document.createElement("canvas");
    canvas.width = Math.round(crop.width * scale);
    canvas.height = Math.round(crop.height * scale);
    context = canvas.getContext("2d");
    context.drawImage(this.video, crop.x_offset, crop.y_offset, crop.width, crop.height, 0, 0, Math.round(crop.width * scale), Math.round(crop.height * scale));
    if (rotate != undefined) {
        context.rotate(rotate*Math.PI/180);  //This was my attempt but it doesn't work
    }
    snapshot._canvas = canvas;
    snapshot._mirror = mirror;
    return snapshot._quality = quality;
  };

Can anyone recommend a way to save the canvas rotated?

Answer 1

The rotation transformation has to happen before the image/video is drawn, and it will happen at origin meaning you will want to translate origin first to the center of the canvas:

• Translate origin from upper-left of canvas to center which is where the rotation will happen
• Rotate
• Translate back as upper-left corner of image is also drawn from origin

Modified code:

context = canvas.getContext("2d");
context.setTransform(1,0,0,1,0,0);                            // reset transforms if any
if (rotate) {
    context.translate(canvas.width / 2, canvas.height / 2);   // to center
    context.rotate(rotate * Math.PI / 180);                   // rotate
    context.translate(-canvas.width / 2, -canvas.height / 2); // and back
}
context.drawImage(this.video, 
  crop.x_offset, crop.y_offset, crop.width, crop.height, 
  0, 0, Math.round(crop.width * scale), Math.round(crop.height * scale));