Question

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

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

提前谢谢！

Answer 1

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

按FileReader加载本地图片并为其onload事件添加监听器
在onload听众中，创建一个＆＃34;图像＆＃34;对象new Image()，并设置＆＃34; src＆＃34;属性由加载的图像＆＃34; src＆＃34; （数据URL格式）
制作＆＃34;画布＆＃34;元素，并在此画布上绘制图像
使用Canvas.toDataURL()获取转换后的图像数据（在base64中）
将图像数据发布到服务器

将图像绘制到画布后，调用Canvas.toDataURL()将获得Data URL字符串中的画布内容，请注意它的画布数据不是原始图像数据，例如，如果图像大小为100 x 100，画布大小为50 x 50，使用此功能可以获得50 x 50像素的图像，因此如果需要全尺寸图像，则需要将画布大小调整为特定大小

这个函数有两个参数：

canvas.toDataURL（type，encoderOptions）;

type - 指示图像格式的DOMString。默认格式类型为image / png。在您的代码中，设置为＆＃34; image / jpeg＆＃34;在您的情况下
encoderOptions - 介于0和1之间的数字，表示请求的类型为image / jpeg或image / webp时的图像质量。

这是我的预览和上传＆＃34;函数在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示例：

＆＃13;

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]);
  }
};

＆＃13;

#canvas {
  border: 1px solid blue;
}

#output {
  word-break: break-all;
}

＆＃13;

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

＆＃13;

将图像转换为jpg Angular 4

1 个答案: