JavaScript を使用して Canvas 画像の解像度 (DPI) を変更する

アプリケーションシナリオ:

倉庫は出荷ごとにラベルを印刷する必要があります。 Canvas はデータベースから読み取った製品情報に基づいてラベル JPG を生成できますが、この JPG 画像のデフォルトの解像度 (DPI) は 72 です

この DPI も高すぎます。 DPI を変更する一般的な方法は、画像をサーバーにアップロードし、C# を使用して DPI を変更してからサーバーにダウンロードすることです

しかし、私は不快に感じています。画像は明らかにクライアント上で生成されたものです (DPI 情報は JPEG 形式の単なるヘッダー META) ので、大きな画像をサーバーにアップロードする必要がありました

その後、以下を使用しました。メソッド

JavaScript DPI を使用して直接変更します

ソースコードはここには掲載されていません。解決策のアイデアのみが提供されているので、必要な友人が自分で試してみることを願っています

これで、DPI は単なるヘッダー情報であることが分かりました。 JPEG形式の非常に小さな部分であり、base64はストリームエンコーディングです。その後、canvas.toDataURL()の後のbase64文字列で、このDPI情報の位置も固定される必要があります

画像処理を使用します同じ内容の 2 つの JPG 画像を生成するプログラム (Fireworks を使用) を作成し、DPI を変更するだけです。写真 A の DPI は 72、写真 B の DPI は 300 です

確認のため、UE を使用して 2 つのファイルを比較してください。確かに、ヘッダー内の数バイトだけが異なります

C# を使用して A/B を読み取ります 画像はそれぞれ BASE64 にエンコードされて A.txt と B.txt を生成します

UE または他のテキスト エディターを使用して 2 つのテキスト ファイルを比較し、異なる部分を見つけてください。同じではない文字が 10 個未満であることがわかります。上記の実験を繰り返し、異なる画像を使用すると、最終的には固定された文字が常に異なることがわかります。 DPIが同じなので固定位置の文字も同じです

ブラウザ側でcanvasを使用します。toDataURLはjpg画像のbase64文字を生成し、固定位置の文字を特徴的な文字に変更します。テスト中は DPI 300 でした

OK、DPI 300 の JPG 画像を取得しました。

興味のある友達は、BASE64 エンコーディングを勉強して、特徴的な文字を計算する関数を作成してください。さまざまな DPI に対応します

バイナリ状態については、計算機でクリックすると、それが直接ストレージであることがわかります

会社のプロジェクトでは、オペレーターはさまざまな DPI を保存することに慣れています。 Canvas によって生成された画像が毎回固定フォルダーに保存されるとき、デフォルトのファイル名は常に Canvas.jpg になります

バッチ番号.jpg を使用すると、エクスペリエンスが大幅に向上します。保存するときのデフォルトのファイル名として使用されます

ここには 2 つの解決策があります

Google にアクセスして Downloadify というプログラムを見つけてください。Downloadify の Flash コンポーネントを使用すると、[ダウンロード] ボタンをクリックすると、保存場所を選択すると、js でデフォルトのファイル名を指定できます

HTML5 のダウンロード属性を使用して、A タグに追加します。ただし、Firefox/Chrome では、この解決策がより簡単です。ユーザーが選択できないように保存し、右クリックして [名前を付けて保存] を選択すると、デフォルトのファイル名の役割が失われます。どちらのオプションにもそれぞれ長所と短所があります。