JavaScriptでアップロードした画像のサイズを変更して圧縮する

Question

私は多くのユーザーがアップロードした画像を持つウェブサイトを構築しています。 サーバーにアップロードする前に、これらのイメージのクライアント側のサイズを変更し、圧縮してください（できればその形式を.jpgに変更します）。

これを行うにはどうすればいいですか？ 私はいくつかの解決策を見つけましたが、実際にはアップロードされたファイルでは機能しません。 私が試した最新のスクリプトはHermite-resizeです。

// Get images from input field 
var uploadedImages = event.currentTarget.files; 


var HERMITE = new Hermite_class(); 
HERMITE.resize_image(uploadedImages[1], 300, 100); 

しかし、どうやらnullとしてuploadedImagesリターン：のように単純にする必要があります。私も他の場所で使っていますが、私は100％肯定的です。null このスクリプトをアップロードしたファイルで効果的に使う方法を知っている人はいますか？ クライアント側で画像のサイズを変更/圧縮するためのより良い解決策がありますか？

ありがとうございます！

Answer 1

私は自分の問題に対する解決策を見つけました。誰のために良いことするつもりはありませんが、この男は私が達成しようとしている何のために最適です小さなスクリプトを書いた：

https://stackoverflow.com/a/39235724/6756447

まっすぐボックスのうち

作品！私が追加したのは、配列にプッシュする前に返されたBLOBにタイムスタンプと元の名前を付けることだけでした。

var images = event.currentTarget.files 

resizeImage({ 
    file: images[i], 
    maxSize: 500 
}).then(function(resizedImage) { 
    resizedImage.lastModifiedDate = new Date() 
    resizedImage.name = images[i].name 
    uploadedImages.push(resizedImage) 
}).catch(function(error) { 
    console.log(error) 
}) 

Answer 2

私はエルミート上で動作するようにしようとしたが、それはそれは常にので、あなたがfiddleに、コードの下に使用することができます私にエラーを与えるので、また隠者クラスは、要素ID

HTML

をのimgたい良いクラスではありません

<input type="file" id="fileOpload"><br> 
<img src="" alt="Image preview..." id="image"> 
<canvas id="canvas" height=500 width=500></canvas> 

Javascriptを

function previewFile() { 
    var preview = document.querySelector('img'); 
    var file = document.querySelector('input[type=file]').files[0]; 
    var reader = new FileReader(); 
    var percentage = 0.75; 
     reader.addEventListener("load", function() { 
      preview.src = reader.result; 
      preview.onload = function() { 
       var canvas = document.getElementById("canvas"); 
       var ctx = canvas.getContext("2d"); 
       canvas.height = canvas.width * (preview.height/preview.width); 
       var oc = document.createElement('canvas'),octx = oc.getContext('2d'); 
       oc.width = preview.width * percentage; 
       oc.height = preview.height * percentage; 
       canvas.width = oc.width; 
       canvas.height = oc.height; 
       octx.drawImage(preview, 0, 0, oc.width, oc.height); 
       octx.drawImage(oc, 0, 0, oc.width, oc.height); 
       ctx.drawImage(oc, 0, 0, oc.width, oc.height,0, 0, canvas.width, canvas.height); 
      } 
     }, false); 

    if (file) { 
     reader.readAsDataURL(file); 
    } 
} 
document.getElementById('fileOpload').addEventListener('change', previewFile);