将图像转换为jpg格式 Angular 4

Question

我正在使用Angular 4和TypeScript开发一个Web应用程序。我允许用户上传设备中的缩略图作为png、jpeg或jpg格式，并希望在前端将该照片转换为jpg。因为文件类型是只读的，所以我正在寻找一种方法来实现这一点。

我这样做的原因是，当用户加载个人资料页面时，他们不需要下载大型图片，所以页面速度很快。我认为将其转换为jpg可能是最好的选择，因为通过测试样例图片，同一张图片的png格式大小为35.4KB，而转换为jpg格式后大小为6.7KB。如果有更好的解决方案，我会很高兴听到您的建议！

谢谢！

- Ethan Harlig

---

35 KB仍然非常小。但是我从来没有见过任何人或任何相机使用PNG格式的图片。你可以只安全地接受JPEG图像，没有人会感到烦恼。 - JB Nizet

@JBNizet 我仍希望我的用户能够上传他们在网上找到的其他文件扩展名的图像。如果这真的很少见，我可以重新考虑，但我认为PNG是一种非常常见的格式。 - Ethan Harlig

这是一种常见的图标格式，例如头像图标。但不适用于图片。将PNG图标编码为JPG也无济于事，因为PNG是更适合此类图像的格式。 - JB Nizet

Answer 1

我刚刚写了一些符合你要求的代码，以下是我所做的：

1. 使用FileReader加载本地图片，并为其onload事件添加监听器
2. 在onload监听器中，通过new Image()创建一个“Image”对象，并将“src”属性设置为加载的图像的“src”（Data URL格式）
3. 创建一个“Canvas”元素，并在此画布上绘制图像
4. 使用Canvas.toDataURL()获取转换后的图像数据（base64格式）
5. 将图像数据发送到服务器

在将图像绘制到画布上后，调用Canvas.toDataURL()会以Data URL字符串的形式获取画布内容，请注意这是画布数据而不是原始图像数据。例如，如果图像大小为100 x 100，画布大小为50 x 50，则使用此函数将获得一个50 x 50像素的图像，因此如果您想要全尺寸图像，则需要将画布调整为特定大小。

该函数有两个参数：

canvas.toDataURL(type, encoderOptions);

• type - 指示图像格式的DOMString。默认格式类型为image/png，在您的代码中设置为"image/jpeg"
• encoderOptions - 如果所请求的类型为image/jpeg或image/webp，则为介于0和1之间的数字，表示图像质量。

这是我用TypeScript编写的“预览和上传”函数供参考：

preview(input: HTMLInputElement) {
        if (input.files.length) {
            let reader = new FileReader();
            reader.onload = (e) => {
                if (!this.img) {
                    this.img = new Image();
                }

                this.img.src = (e.target as any).result;
                this.img.onload = () => {
                    // omit code of setting 'dx', 'dy', 'width', 'height'
                    let ctx = <CanvasRenderingContext2D>this.canvas.nativeElement.getContext('2d');
                    ctx.drawImage(this.img, dx, dy, width, height);

                    let dataUrl = (<HTMLCanvasElement>this.canvas.nativeElement).toDataURL('image/jpeg', 0.7);
                    this.uploadService.upload(dataUrl).then((resp: any) => {
                        if (resp.key) {
                            this.asset.image = resp.key;
                        }
                    });
                };
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

我将为您翻译以下内容：

我在上面的代码中省略了一些变量：dx，dy，width，height，我使用这些变量来调整图像位置（用于剪切目的）。

这是JavaScript示例：

function _elm(id) {
  return document.getElementById(id);
}

_elm('fileInput').onchange= function(event) {
  if (event.target.files.length) {
    var fileReader = new FileReader();
    fileReader.onload = function(event) {
      var img = new Image();
      img.src = event.target.result;
      _elm('sizeRaw').innerText = '+ data-url size ' + event.target.result.length;
      img.onload = function() {
        var canvas = _elm('canvas');
        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0, 200, 200);
        var dataUrl = canvas.toDataURL('image/jpeg', 0.5);
        _elm('output').innerText = dataUrl;
        _elm('sizeNew').innerText = '+ data-url size ' + dataUrl.length;
      }
    };
    fileReader.readAsDataURL(event.target.files[0]);
  }
};

#canvas {
  border: 1px solid blue;
}

#output {
  word-break: break-all;
}

<h3>Input file <span id="sizeRaw"></span>: </h3>
<input id="fileInput" type="file" accept="image/*">
<h3>Canvas</h3>
<div>
<canvas id="canvas" width="200" height="200"></canvas>
</div>
<h3>Output <span id="sizeNew"></span>: </h3>
<div id="output">
</div>

- kite.js.org