将图像转换为jpg Angular 4

Question

我将 Angular 4 与 TypeScript 一起用于 Web 应用程序。我允许用户从他们的设备以 png、jpeg 或 jpg 格式上传缩略图个人资料照片，并且我想在前端将该照片转换为 jpg。我正在寻找一些方法来做到这一点，因为文件类型是只读的。

我这样做的原因是当用户加载个人资料页面时，他们不必下载大图像，因此页面很快。我认为转换为 jpg 可能是最好的选择，因为在使用示例图像进行测试时，图像的 png 为 35.4KB，而同一图像的转换为 jpg 为 6.7KB。如果有更好的解决方案，我很想听听！

提前谢谢你！

Answer 1

我刚刚写了一些你的要求的代码，这就是我所做的：

1. 通过FileReader 加载本地图像并为其onload 事件添加监听器
2. 在onload监听器中，通过new Image()创建一个“Image”对象，并通过加载的图片“src”（数据URL格式）设置“src”属性
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 之间的数字表示图像质量。

这是我用 TypesScript 编写的“预览和上传”功能供参考：

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