Js+Canvasで画像圧縮

今回は画像を圧縮するためのJs+Canvasをご紹介します。Js+Canvasで画像を圧縮する場合の注意点を実際に見てみましょう。

りー

上記は、画像データを Base64 形式で返す画像圧縮関数です。 圧縮率の値 (0 ～ 1) が大きいほど、画質は高くなります。画像のbase64はjpegよりもはるかに長いため、画像をpng形式に変換しないことをお勧めします。実際の呼び出しは次のとおりです:

/* 
 * 图片压缩
 * img    原始图片
 * width   压缩后的宽度
 * height  压缩后的高度
 * ratio   压缩比率 
 */
 function compress(img, width, height, ratio) {        
   var canvas, ctx, img64;
   canvas = document.createElement('canvas');        
   canvas.width = width;
   canvas.height = height;    
   ctx = canvas.getContext("2d");            
   img64 = canvas.toDataURL("image/jpeg", ratio);    
   return img64;
 }

注: 圧縮メソッドの呼び出しとイメージの src 割り当ては、イメージの onload メソッドに配置する必要があります。イメージをロードした後にのみ、イメージを圧縮して Base64 に変換して割り当てられるためです。 onloadメソッドの外に置くと、圧縮コードが不正になったり、真っ黒な画像が生成される可能性があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

angularJS+Ionic によるモバイル端末への画像アップロード (コード付き)

Particles.js はパーティクルの動的背景アニメーションを実装します

以上がJs+Canvasで画像圧縮の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。