Javascript 在图像处理中AB=A x B吗？

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

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？

缩放->到jpeg->旋转->到jpeg将添加额外的压缩噪声。只是不要在中间做压缩步骤。画布可以像图像一样绘制，因此第二步使用画布作为图像源。画布也是双缓冲的，因此您可以在画布自身的顶部渲染画布。例如，第一步

ctx.drawImage（图片，

然后

ctx.rotate（角度）；ctx.drawImage（ctx.canvas，

嗨！感谢您的回复！我将尝试：）缩放->到JPEG- >旋转->将增加额外的压缩噪声。只是不要在中间进行压缩步骤。画布可以像图像一样绘制，因此第二步使用画布作为图像源。画布也是双缓冲的，这样您就可以在自己的顶部渲染画布。例如第一步<代码> CTX.DRAWIMAGE（图片，then

ctx.rotate（angle）；ctx.drawImage（ctx.canvas，…

Hi！感谢您的回复！我将尝试：）