0

私のウェブサイトのユーザーに、画像をキャンバスに印刷すると、サイズが大きくなるにつれて品質が低下することを説明する必要があります. これを行う方法は、画面に表示される画像の解像度を意図的に下げることです。なぜこのようになるのかについての免責事項を示します。

画像のレンダリングについて聞いたことがありますが、私が見たすべての例は、当然のことながら、画像のサイズを大きくしたときにブラウザー全体で画像を改善することについてでした。画像を同じサイズに保ちながら解像度を下げる方法はありますか? css、JavaScript、PHP を喜んで使用します。

4

2 に答える 2

1

Cloudinaryの画像変換 API を使用できます

これは、変換された画像を希望どおりに返す API です。特別なものも高帯域幅も必要ないことを考えると、これはあなたにぴったりかもしれません.

使用方法は次のとおりです。

  • 無料アカウントを作成
  • 画像をアップロードする
  • 次のようにイメージにアクセスします。http://res.cloudinary.com/demo/image/upload/e_pixelate:4/sample.jpg
  • demoは「バケツ」、imageは画像リソースのディレクトリ、e_pixelate:4は効果の名前とそのパラメータ、最後sample.jpgは画像のファイル名です。
于 2016-03-03T14:32:52.620 に答える
0

canvas2d API を使用すると、imageSmoothingEnabledパラメーターのおかげで IE10+ ブラウザーで実行できます。

var c = document.getElementById('c');
var ctx = c.getContext('2d');

var img = document.getElementById('original');
img.src = 'http://lorempixel.com/200/200';
img.onload = function() {

  var scale = .1;
  //scale down your context matrix
  ctx.scale(scale, scale)
    // remove the smoothing
  ctx.mozImageSmoothingEnabled = false;
  ctx.webkitImageSmoothingEnabled = false;
  ctx.msImageSmoothingEnabled = false;
  ctx.imageSmoothingEnabled = false;

  // draw a first time your image 
  ctx.drawImage(img, 0, 0, img.width, img.height);
  // reset your context's transformation matrix
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  // draw your canvas on itself using the cropping features of drawImage
  ctx.drawImage(c, 0, 0, img.width * scale, img.height * scale, 0, 0, img.width, img.height)
};
<canvas id="c" width="200" height="200"></canvas>
<img id="original" />

このパラメーターをサポートしていない古いブラウザーの場合は、ctx から取得した imageData を操作して、自分で行うこともできます。getImageData。

いくつかのリンク:

ctx。imageSmoothingEnabled
ctx. drawImage
ctx. ctx をスケーリングします。setTransform

Ps :完全な要件を満たしているかどうかはわかりません。また、ピクセル化された結果ではなく、アーティファクト化された結果が必要な場合は、imageSmoothingEnabledフラグを false に設定しないでください:

var c = document.getElementById('c');
var ctx = c.getContext('2d');

var img = document.getElementById('original');
img.src = 'http://lorempixel.com/200/200';
img.onload = function() {

  var scale = .1;
  //scale down your context matrix
  ctx.scale(scale, scale)
  // draw a first time your image 
  ctx.drawImage(img, 0, 0, img.width, img.height);
  // reset your context's transformation matrix
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  // draw your canvas on itself using the cropping features of drawImage
  ctx.drawImage(c, 0, 0, img.width * scale, img.height * scale, 0, 0, img.width, img.height)
};
<canvas id="c" width="200" height="200"></canvas>
<img id="original"/>

于 2016-03-04T10:21:53.373 に答える