将图像转换为jpg Angular 4

Posted 2023-03-15

【中文标题】将图像转换为jpg Angular 4

【英文标题】：Converting image to jpg Angular 4

【发布时间】：2018-03-08 11:51:57

【问题描述】：

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

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

提前谢谢你！

【问题讨论】：

35 KB 仍然很小。但无论如何，我从未见过任何人或任何相机使用PNG来拍摄照片。您可以只安全地接受 JPEG 图像，没有人会生气。

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

这是头像图标等图标的常用格式。但不适用于图片。并且在 JPG 中编码 PNG 图标也无济于事，因为 PNG 是此类图像的更好格式。

【参考方案1】：

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

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

将图像绘制到画布后，调用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"  ></canvas>
</div>
<h3>Output <span id="sizeNew"></span>: </h3>
<div id="output">
</div>