印刷用のクリア画像を生成するhtml2canvasのサンプルコード
2022-01-28 08:05:14
プリアンブル
最近、会社の業務上の必要性から、総ての地図を印刷するために写真画像をワンクリックで生成することを完了する必要がある
html2canvasは非常に強力なスクリーンショットプラグインで、多くの画像生成や印刷の場面で使用されている
しかし、結果はぼやけてしまうので、この記事では、ぼやけの問題を解決する方法と、さまざまなパラメータの設定方法について記録します
目次
- 基本的な使用方法
- あいまいな表現への対応
- 詳細 - base64圧縮、処理の書き出し
基本的な使い方
window.html2canvas(dom, {
scale: scale,
width: dom.offsetWidth,
height: dom.offsetHeight
}).then(function (canvas) {
var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var src64 = canvas.toDataURL()
}
スケールは倍率で、私は4に設定しました。
dom.offsetWidth height: dom.offsetHeight 画像に変換する dom 要素の幅と高さを直接取得する。
ぼかしの処理
var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
このコードはジャギーを除去し、画像をシャープにするもので、拡大縮小処理と組み合わせて使用します。
詳細
生成されたbase64が大きすぎるとパフォーマンスが落ちるので、base64を圧縮する必要がある
まず、base64のサイズを取得する必要があるかもしれません。
getImgSize: function (str) {
//Get the base64 image size and return the KB number
var str = str.replace('data:image/jpeg;base64,', '');//modify here according to the format of your uploaded image
var strLength = str.length;
var fileLength = parseInt(strLength - (strLength / 8) * 2);
// convert from bytes to KB
var size = "";
size = (fileLength / 1024).toFixed(2);
return parseInt(size);
}
次に、取得したサイズからbase64圧縮を行うかどうかを決定します。
圧縮のためのコードは以下の通りです。
compress: function (base64String, w, quality) {
var getMimeType = function (urlData) {
var arr = urlData.split(',');
var mime = arr[0].match(/:(. *?) ;/)[1];
// return mime.replace("image/", "");
return mime;
};
var newImage = new Image();
var imgWidth, imgHeight;
var promise = new Promise(function (resolve) {
newImage.onload = resolve;
});
newImage.src = base64String;
return promise.then(function () {
imgWidth = newImage.width;
imgHeight = newImage.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = w * imgHeight / imgWidth;
} else {
canvas.height = w;
canvas.width = w * imgWidth / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL(getMimeType(base64String), quality);
return base64;
})
}
使用方法
self.compress(src64,width,1).then(function(base){
src64 = base
src64 = src64.replace(/data:image\/. *;base64,/, '')
// call the interface to save the image
}).catch(function(err){
dialog.tip(err.message, dialog.MESSAGE.WARN);
})
この記事では、特に html2canvas の使用方法、パラメータ、画像の鮮明さを確保する方法、base64 の処理について説明します。
以上が今回の内容の全てです。勉強になると思いますし、スクリプトハウスをもっと応援して頂ければと思います。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Html5プロジェクト適応システムダークカラーモードプログラム概要の詳細説明
-
フロントエンドのHtml5でスクリーンショットを共有する方法のサンプルコード
-
HTMLとCSSを使ったタグクラウド効果(デモあり)
-
amaze uiを使った詳細チュートリアル
-
Html5 Streamを用いたリアルタイムモニタリングシステムの開発
-
localStorageの最大記憶容量を取得する方法を説明する
-
H5 オフラインストレージ マニフェストの原理と使い方
-
html5でBUI折りたたみメニュープラグインを書く方法
-
キャンバスの描画は、contain または cover モードで適応され、中央に配置されます。
-
HTML5でよく使われるセマンティックタグの説明