ホームページ > ウェブフロントエンド > htmlチュートリアル > html2canvasで高精細画像を生成する方法

html2canvasで高精細画像を生成する方法

高洛峰
リリース: 2017-02-15 14:17:40
オリジナル
2449 人が閲覧しました

要件
私の要件は、HTML の一部をモバイル ページ上の画像に変換して、ユーザーが保存できるようにすることです。そのため、前の HTML の部分を表示する必要はありません。

通常のレンダリング
html2canvasを使用して通常にレンダリングすると、携帯電話の表示が非常にぼやけます。コードは以下の通りです:

var dom = $("#id");

html2canvas(dom[0], {

canvas: canvas,

onrendered: function (canvas) {

$(dom).css("display", "none");

$(".img-container").append(Canvas2Image.convertToImage(canvas, width * scaleBy, height * scaleBy, type));

}

});
ログイン後にコピー

例では、canvas2image.js というプラグインを使用してキャンバスを画像に変換しています

最適化

var dom = $(".content-container .show-content");

var width = dom.width();

var height = dom.height();

var type = "png";

var scaleBy = 3;

var canvas = document.createElement('canvas');

canvas.width = width * scaleBy;

canvas.height = height * scaleBy + 35;

canvas.style.width = width * scaleBy + 'px';

canvas.style.height = height * scaleBy + 'px';

var context = canvas.getContext('2d');

context.scale(scaleBy, scaleBy);

context.font = 'Microsoft YaHei';

html2canvas(dom[0], {

canvas: canvas,

onrendered: function (canvas) {

var all_width = $(window).width();

$("#content-container").css("display", "none");

$(".img-container").append(Canvas2Image.convertToImage(canvas, width * scaleBy, height * scaleBy, type));

$(".img-container img").css("width", all_width + "px").css("height", "aotu");

}

});
ログイン後にコピー

定義は元の dom 定義とほぼ同じです。ここでの落とし穴は、DOM の位置が開始位置の左上隅にある必要があることです。そうしないと、レンダリングされたキャンバスの間隔もレンダリングされてしまい、対処が難しくなります。

html2canvas の高解像度画像の生成方法に関する詳細については、PHP 中国語 Web サイトに注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート