Canvas と画像圧縮のサンプルコード

以前、Canvas の画像処理に関する記事を書きました。今日は Canvas を使用して画像を圧縮する方法について説明します。

次に、Canvas画像圧縮の具体的な処理を具体例を挙げて説明します。

1. ローカルファイルを取得する

<!--HTML--><input type=file id=choose-img />

 // JSvarchooseImg = document.getElementById(choose-img);chooseImg.onchange = function(e){ var file = this.files[0]; // ... (コードの一部を省略して示します)配列、以下同じ）};

非常に簡単で、type file のボタンからローカル ファイルを取得するだけです。

 <!--HTML--><div id=result></div>

 // JSvar result = document.getElementById(result); // 画像の出力結果、またはエラー プロンプトを表示するために使用されます if(/image/.test(file.type)){ // ファイル タイプが画像であるかどうかを判断します... }else{ result.innerHTML = '<span style=color: red;>ファイルの種類が間違っています! </span>';}

var img = new Image(), // 元の画像を配置する画像オブジェクトを作成します。 Reader = new FileReader();reader.readAsDataURL(file); // Base64 形式で読み取り、FileReader オブジェクトの result 属性に格納します。リーダー .onload = function(){ img.src = this.result; Image オブジェクトの src 内の document.body.insertBefore(img,chooseImg) に画像の Base64 文字列を直接割り当てます。 // ファイル ボタンの前に出力画像を挿入します img.onload = function(){ // ... }; };

var Canvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var context = Canvas.getContext('2d');

注: キャンバスのサイズは、入力画像の幅と高さと同じです。

context.drawImage(img,0,0,canvas.width,canvas.height);

<!--HTML-->画像圧縮率: <input id=rate type=number min=0 max=100 /> %

 // JSvar rate = document.getElementById(rate).value 100; // 画像の圧縮率を入力します。デフォルトは 100% です。 var imgUrl = Canvas.toDataURL(file.type,rate/100);パラメータは出力画像のタイプで、2 番目のパラメータは圧縮率です。 result.innerHTML = '圧縮後: <img src='+ imgUrl +' />'; //結果に圧縮画像を表示 img.style.display = 'none' // 元の画像を非表示にします。

Canvasに描画した画像をbase64形式で再出力します。

<!--HTML-->画像圧縮率: <input id=rate type=number min=0 max=100 /> %<input type=file id=choose-img /><div id=result></div >

 // JSvarchooseImg = document.getElementById(choose-img), result = document.getElementById(result);chooseImg.onchange = function(e){ var file = this.files[0]; file.type)){ var img = new Image()、reader = new FileReader() Reader.onload = function(){ img.src = this.result; document.body.insertBefore(img,chooseImg); img.onload = function(){ var Canvas = document.createElement('canvas'); ; Canvas.height = img.clientHeight; var context = Canvas.getContext('2d'); context.drawImage(img,0,0,canvas.width,canvas.height); var rate = document.getElementById(rate).value || var imgUrl = Canvas.toDataURL(file.type,rate/100); result.innerHTML = '圧縮後: <img src='+ imgUrl +' />'; result.style.display = 'block'; img.style.display = 'none'; }; } else{ result.innerHTML = '<span style=color: red;>ファイルの種類が間違っています。 </span>' }};

テストの結果、Canvas では JPEG 形式の画像圧縮効果が最も優れていることがわかりましたが、PNG 圧縮効果は明ら​​かではなく、場合によっては圧縮効果が大きくなる場合もあります。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。