旋轉HTML5視頻和保存畫布

我有一個HTML5視頻使用jpeg_camera（https://github.com/amw/jpeg_camera）旋轉HTML5視頻和保存畫布

興田視頻對HTML輸出結果是這樣的：

<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>

當平板旋轉時，我捕捉orientationchange並調整事件大小並根據需要旋轉視頻。

問題是什麼時候拍攝快照，視頻回到原來的方向，我試圖在保存前在javascript中旋轉畫布。

這就是我所擁有的（但它沒有工作）。代碼在jpgvideo庫中。

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; 
    };

任何人都可以推薦一種方法來保存畫布旋轉？

來源

2017-07-06 michael

不是超級熟悉視頻的東西，但你可以通過使用'getImageData（）'方法在畫布上的2D背景的畫布保存數據。然後，爲了將這個圖像數據放回畫布上，可以使用'putImageData（）'。你可以閱讀這些方法[here。]（https://www.w3schools.com/tags/canvas_getimagedata.asp） – DanD

旋轉變換對圖像/視頻前發生的一抽，將在原點發生這意味着你將要首先轉換原點到畫布的中心：

從大寫轉換原點左帆布送到中心，這是其中的旋轉會發生
旋轉
轉換回爲圖像的左上角也從產地拉

國防部指明分數代碼：

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));

來源

2017-07-12 10:30:32 K3N

旋轉HTML5視頻和保存畫布

回答

相關問題