JsでCanvasを使って画像を圧縮する方法を説明します

以下のエディターは、JSを使用してCanvasを使用した画像圧縮機能を実装する方法に関する記事をお届けします。編集者はこれがとても良いと思ったので、参考として共有します。編集者をフォローして見てみましょう

私が最近取り組んだAPPプロジェクトでは、携帯電話で写真を撮ってアップロードする必要があります。携帯電話で撮影した写真は通常比較的大きいため、アップロードは非常に遅くなります。このため、アップロード機能を最適化するために画像を圧縮する必要があります。以下は具体的な実装です:

/* 
 * 图片压缩
 * 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");        
   ctx.drawImage(img, 0, 0, width, height);
        
   img64 = canvas.toDataURL("image/jpeg", ratio);
        
   return img64;
 }

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

var image = new Image();
image.src = "/img/test.jpg";
      
image.onload = function(){
  var img64 = compress(image, 500, 400, 0.7);
  document.getElementById("test").src = img64;
}

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

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