div html2canvas imagens desfocadas tomadas e imagens download de conteúdo para resolver compensado
$ ( "# btnSave") Click (function () {.
var copyDom = $ ( "# modalcontent");
var width = copyDom.offsetWidth; // DOM largura
altura var = copyDom.offsetHeight; // dom high
var scale = 2; // Fator de ampliação
var canvas = document.createElement ('canvas');
canvas.width = width * scale; // largura da tela
canvas.height = height * scale; // altura da tela
var content = canvas.getContext ("2d");
content.scale (scale, scale);
var rect = copyDom.get (0) .getBoundingClientRect (); // Obtenha o deslocamento do elemento em relação à inspeção
content.translate (-rect.left, -rect.top); // Defina a posição do contexto, o valor é um deslocamento negativo em relação à janela, redefina a imagem
html2canvas (copyDom [0], {
dpi: window.devicePixelRatio * 2
escala: escala,
tela: tela,
largura: largura,
altura:
}). then (function (canvas) {
var url = canvas.toDataURL ();
var triggerDownload = $ ("<a>") .attr (" href ", url) .attr (" download ","
Details.png "). appendTo (" body "); triggerDownload [0] .click ();
triggerDownload.remove ();
});
})
usa 2018 O código html2canvas.js foi baixado no site oficial em 22 de agosto de 2014. O código acima pode resolver o problema de imagens borradas e deslocadas.
Há também um método para definir a configuração, não há problema de deslocamento da imagem, é necessário fazer o download da nova versão, a versão antiga do js não pode ser usada.
dpi: window.devicePixelRatio, scale: 2, esses dois configuração DPI refere-se a pixels por polegada, escala é aumentar os pixels em proporção
$ ("# btnsave"). click (function () {
var copyDom = $ ("# modalcontent");
var width = copyDom.offsetWidth; // dom 宽
var height = copyDom.offsetHeight; // dom 高
var scale = 2; // html2canvas
(copyDom [0], {
dpi: window.devicePixelRatio * 2,
scale: scale,
width: width,
heigth: height,
}).
Then (function (canvas) { var url = canvas.toDataURL ();
var triggerDownload = $ ("<a>") .attr ("href", url) .attr ("download", "详情 .png"). appendTo ("body");
triggerDownload [0] .click ();
triggerDownload.remove ();
});
})
