Blobオブジェクトを拡大したい

Question

下記のようにdivの要素を画像として出力したあと、blobオブジェクトに変換して
サーバにアップロードしているのですが、この画像を拡大してアップロードするように
変更したいのですが、良い方法が見つかりません。

試したこと。
・保存前にcanvasを拡大してから処理すとうまくいくが一瞬画像が大きくなるので好ましくない
・canvasを非表示(hide)して処理するとblobがnullになる（表示状態でないと処理できない？）

var type = 'image/png';
var dataurl = canvas.toDataURL(type);
var bin = atob(dataurl.split(',')[1]);
var buffer = new Uint8Array(bin.length);
for (var i = 0; i < bin.length; i++) {
   buffer[i] = bin.charCodeAt(i);
}
var blob = new Blob([buffer.buffer], { type: type });

良い方法はないでしょうか。

Answer 1

拡大処理そのものはcanvas経由でうまくいってるのであれば、あとはcanvasを隠す方法を考えるのがよさそうです。
hideだとうまくいかないのであれば、CSSで

• opacity : 0 で透明化
• position:absolute; left:-100%;top:-100%などで画面外に移動
• transform:translate(100%,100%) などで画面外に移動その2
• transform:scale(0,0) で見た目のサイズ0倍化

などをcanvasの親タグに行えば、どれかひとつぐらいはうまくいきそうです。

Comments

[Qoo]

opacity : 0 でうまくいきました！
ありがとうございます！