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");

}

});

정의는 원래 돔 정의와 거의 동일합니다. 여기서 함정은 돔의 위치가 왼쪽 위 모서리에서 시작해야 한다는 것입니다. 그렇지 않으면 렌더링된 캔버스도 간격을 렌더링하여 처리하기 어려울 것입니다.

고화질 이미지를 생성하는 html2canvas 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!