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

要件
私の要件は、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 サイトに注目してください。