キャンバス画像圧縮秘密

始まります

まず、明確なキャンバスは圧縮大きな画像にのみ適している、画像のサイズが小さすぎると、任意の使用にすることはできません。なぜキャンバスのサイズが小さすぎると、それを圧縮することはできません

• 圧縮品質がなければ、キャンバスより大きな絵を通して
• 画像は、IMGタグの後に方向を変えたとき
• キャンバスの圧縮を使用するとき

私たちは、見た目のキャンバスtoDataURL toBlob方法を取ります

// 不压缩，原画质
canvas.toBlob(callback, "image/jpeg", {quality: 1});
canvas.toDataURL( "image/jpeg", {quality: 1});
复制代码

キャンバスは、大きな画像の後、口の恐れ。我々は、より大きな画像のキャンバスより大きな割合後小さい画像場合、我々は、より大きな割合の原画大きい、小さいことを見出し、データの2つの異なるセットを比較しました。では、なぜこれが起こるん

5.3M
5284528<6228026

229kb
229214<242046

60kb
60022<229214
复制代码

その後、キャンバス自体はそう何ピクセルを描画しないベクトルの概念であり、より多くの白画素がdrawImageメソッドの時間を描画することで、存在し、それはのdrawImageチューブ空白画素を行くことはありませんここで、絵自体ははるかに圧縮され小さく空白のキャンバスのピクセルは、実際のピクセルとなっているので、上記の場合があり、なぜそれが説明した後、

0.7選択圧縮品質は比較的正常、まだ小さな画像理想的ではありません。携帯電話で撮影した写真の場合は可能です。だから、限界がたくさんあります。

では、なぜそれ小さいの品質を定義することはできませんか？それから彼はの質問に答えるために開始します。

我々は1ワットピクセルにしたいキャンバス圧縮ポイントは、実際のピクセルになるためのキャンバスに空白画素1ワット絵があると仮定すると、今本当の空白ピクセル2ワット確かに、サイズやオリジナル、オリジナルの低解像度の比率などがあります。

まあ、我々は我々今、空白、空白画素3W圧縮、圧縮し続ける今、あまりにも小さなサイズ4ワット本物です。私は自分自身がどのように考えるべき画素のkbのサイズの数十を取得したいです。基本的なキャンバスで品質を確認するために、大きさが数百キロバイトを取得しなければなりませんでした。

どのようにIMGの後に行うに方向を変える場合に、携帯電話の写真を撮るには？

私たちが扱うことができる方法4,5MB携帯電話は肖像画から横画面にimgタグの写真を撮るには？

我々は確かに画像をレンダリングするためのimgタグを助けたいキャンバス圧縮では、その後、時間のimg方向が変化した後、我々はキャンバスにキャンバスを回転させる必要があり、その後、描画を開始します

画像が回転した場合どのように我々は知っています。私たちは、EXIF-JSの使用はオリエンテーションの値を取得しますし、再度キャンバスを回転させることができます

とき私は、圧縮を使用しますか？

もちろん、あなたは、帯域幅、ストレージ容量と要求速度を圧縮することができれば良いですが、その後、上記の法則によると、私たちはそのプロセスを言うと、元のファイルを提出することができます比較を行う、小型のアップロードを選択

私のコード圧縮を送ります

ひどく書かれて、あなたは私のコードが成長している聞かせて、指し示すポインティングを大物することができます

// 图像压缩

import EXIF from 'exif-js'

// 获取图片信息
function getImageInfo(img, callback) {
  let Orientation = 1

  EXIF.getData(img, function () {
    Orientation = EXIF.getTag(this, 'Orientation');

    callback(Orientation)
  });
}

// 旋转画布
function rotate(ctx,Orientation){
  switch(Orientation){
    case 3:
      //旋转180度
      ctx.rotate(Math.PI)
      break;
    case 6:
      //旋转90度
      ctx.rotate(Math.PI/2)
      break;
    case 8:
      //旋转270度
      ctx.rotate(Math.PI*1.5)
      break;
  }
}

// canvas 绘制图片
function drawImage(img, quality, Orientation, callback) {
  const { width, height } = img
  //生成canvas
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  
  if(Orientation==3||Orientation==6){
    canvas.width = height
    canvas.height = width
  } else{
    canvas.width = width
    canvas.height = height  
  }
  if(Orientation!=1){
    ctx.translate(canvas.width/2,canvas.width/2);
    rotate(ctx, Orientation)
    ctx.translate(-canvas.width/2,-canvas.width/2);
  }
  

  ctx.drawImage(img, 0, 0);
  // 图像质量
  if (!(quality && quality <= 1 && quality > 0)) {
    quality = 0.7
  }
  // quality值越小，所绘制出的图像越模糊
  canvas.toBlob(callback, "image/jpeg", quality);
}

// 图片渲染
function canvasDataURL(file, quality = 0.7, callback) {
  var img = new Image();
  img.src = window.URL.createObjectURL(file);

  img.onload = function () {
    getImageInfo(img, Orientation => {
      drawImage(img, quality, Orientation, callback)
    })
  };
}


function compressionImg(file, callback) {
  let newFile = null
  canvasDataURL(file, 0.7, blob => {
    // 处理后的file
    newFile = new File([blob], file.name, { type: blob.type })
    if (!newFile || newFile.size > file.size) {
      newFile = file
    }
    callback(newFile)
  });
}

export default compressionImg;
复制代码