將圖像轉換爲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

回答

相關問題