将图像转换为jpg Angular 4

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

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

预先感谢您！

来源

2017-09-27 Ethan Harlig

35 KB仍然是非常小的。但我从来没有见过任何人或任何相机使用PNG照片。您只能安全地接受JPEG图像，而且没有人会感到恼火。 –

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

这是像头像图标这样的图标的常用格式。但不适合照片。并且使用JPG格式编码PNG图标将无济于事，因为PNG是这种图像的更好格式。 –

我只是写像你要求一些代码，这里是我做过什么：

加载本地图像通过FileReader和听众在onload监听器添加到它的onload事件
，创建一个“图像”，由new Image()对象，并设置‘src’属性由所加载的图像‘SRC’（数据URL格式）
创建一个‘画布’元件，并得出这样的帆布
使用上的图像获取转换后的图像数据（以base64）
后的图像数据到服务器

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

这个函数有两个参数：

canvas.toDataURL（类型，encoderOptions）;

type - 指示图像格式的DOMString。默认的格式类型是image/png。在您的代码中，在您的案例中设置为“image/jpeg”
encoderOptions - 0到1之间的数字，指示图像质量，如果请求的类型是image/jpeg或image/webp。

这是我的“预览和上传”功能写在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>

来源

2017-09-27 06:07:50

将图像转换为jpg Angular 4

回答

相关问题