JavascriptでRGB画像をサイズ変更してWeb表示

Question

Javascriptで画像サイズを変更して表示したいです。

300300のRGBの画像データがメモリ上にあります。そのデータを100100に変換して表示したいです。
表示先はCanvasが良いかと思い、Canvasに表示させる方法を試していますがうまく行きません。

100*100をCSSで指定しCanvasタグは以下のように記載しています。

<canvas id="img_canvas" class="img-canvas"></canvas>

300300のデータを100100で表示したいですが、うまく行きません。

let tmpImg = 0,0,0,・・・;
// tmpImgは300*300のRGBデータ（別のCanvasでctx.getImageData(0, 0, 300, 300).dataで取得し保持）
if (document.getElementById('img_canvas') == null) return tmpImg
let icanvas = document.getElementById('img_canvas')
let ictx = icanvas.getContext('2d')
ictx.drawImage(tmpImg, 0, 0, 100, 100) // 画像をリサイズ

実施方法についてご教授をお願いします。

Answer 1

スマホからなので簡単に。

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale
https://kuroeveryday.blogspot.com/2017/09/zoom-in-out-and-drag-to-move-on-canvas.html?m=1

拡大、縮小はctx.scale()に任せたほうが早いかと思います。

Comments

[yamayamak]

なるほど、こういうやり方があるんですね。
ありがとうございますm(_ _)m

Answer 2

実施方法

表面には現れないバッファ目的のCanvasを生成して、対象のCanvasに縮小コピーします。

ご質問の方法で、drawImage() の第一引数に ImageDataを与えず「別のCanvas」を、以降は２つの矩形情報（８つの数値）を与えると、縮小コピーの形になるはずです。

---

以下、ご質問のコードをよく読まずに回答していました。

1. 300x300[px] のCanvasを生成して、RGBデータを描く

1.1. createImageData() で{ImageData}を作り data に１点ずつ書き込む（方法＃１
1.2. MDN {CanvasRenderingContext} の fissStyle, fillRect() を使って１点ずつ描く（方法＃２
2. 100x100[px] のCanvasに 1. で作成したCanvas を縮小しつつ描く
2.1. drawImage() を使う

１つのCanvasで実装したい場合は、ImageData.data をループで回し、ピクセルごとに演算処理します（上述した、ネイティブAPIより遅くなります）。

Comments

[yamayamak]

ありがとうございます。
第一引数などに問題がありましたので、修正して行けました。