Question

我正在创建一个类似博客的平台，现在我正在努力保存图片。我想在文件大小限制下存储图片，并希望我的用户在将图片发送到服务器之前将图片旋转到正确的方向。以一种简单的方式，我可以这样做：

1.读取文件并在大于限制时调整大小。

//Make a blob
var blob = new Blob([oFREvent.target.result]);
window.URL = window.URL || window.webkitURL;
var blobURL = window.URL.createObjectURL(blob);

//Make Image object to resize on client side
var picture = new Image();
picture.src = blobURL;

//Resize. Create resized Image Object
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.drawImage(picture, 0, 0, picturewidth, pictureheight, 0, 0, maxwidth, proportionalheight);
var resizedPicture = canvas.toDataURL('image/jpeg');

2.向用户显示图片的预览，如果用户则旋转图片必要的。

3.旋转图像

var ctx = canvas.getContext("2d");

//rotate by 90 degrees. maxwidth in step 2 = maxheight in step 3
ctx.rotate(90 * Math.PI/180); 
ctx.drawImage(resizedPicture, 0, 0, picturewidth, pictureheight, proportionalheight, maxheight);
var resizedRotatedPicture = canvas.toDataURL('image/jpeg');

这种方法需要以jpg格式绘制两次图片。这不是有损吗？我应该在步骤3中使用原始blob调整大小并再次旋转，还是应该在步骤1中输出png中的dataURL并在步骤3中将其更改为jpg？

图像处理中AB = A x B？

0 个答案: