在畫布上旋轉圖像

Question

在我的Web應用程序中，我允許用戶選擇圖像。 如果圖像的高度大於寬度，則將圖像旋轉270度。

我對旋轉后的圖像的理想尺寸應該感到困惑，因為稍后我會保存該旋轉后的圖像。

例如，如果用戶上傳的是低分辨率圖像，那么該圖像的大小應該是多少？如果用戶上傳的是高旋轉圖像，其大小應該是多少？

我不希望像素失真。 有什么好的庫可以在客戶端旋轉圖像嗎？ 或任何可以幫助我的算法？

Answer 1

您可以使用Blob對象方法。 將圖像轉換為Blob對象，即可使用它。 我不能幫助代碼coz不太了解blob。 請對Blob進行更多研究，您可以使用Blob實現您想要做的事情。

Answer 2

您可以嘗試使用朴素的畫布方法，如下所示：

基本上，您將在畫布上繪制圖像，旋轉，然后將畫布保存到dataUrl

var context = canvas.getContext('2d');
//save the context
//pushes a Matrix on the transformation stack
context.save();
context.translate(x, y); //where to put image (in the canvas)
context.rotate(angle); //angle in degrees (i think...)
context.scale(scale); //optional scale
//rotate around center of image
context.drawImage(bitmap, -image.width / 2, -image.height / 2);
//or rotate around top left corner of image
context.drawImage(image, 0, 0);
//restore the canvas
//pop a matrix off the transformation stack
context.restore();
//now save the canvas to a data url for download or to display in an image object / tag
var data = canvas.toDataUrl();

參考文獻：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement

http://html5.litten.com/understanding-save-and-restore-for-the-canvas-context/