总结:
html:
<div id="boox">
<div id="box">
<div id="test">
<div id="qrcod">
<img src="http://my.chinaz.com/Areas/ToolVip/Content/img/bannertxt.png" alt=""
style="display: block;">
</div>
<p>测试</p>
</div>
<button>点击成img</button>
</div>
</div>
js引入:
以下是增加了dpi和scale两个选项之后的html2canvas源码:
https://github.com/eKoopmans/html2canvas/tree/develop/dist
<script type="text/javascript" src="./js/html2canvas.js"></script>
js:
$("button").click(function () {
var width =$('#test').offsetWidth; //dom宽
var height = $('#test').offsetHeight; //dom高
var scale = 2; //放大倍数
html2canvas($('#test'), {
useCORS: true,
scale: scale,
width: width,
height: height,
scale: 2,
dpi: 192
}).then(function (canvas) {
// console.log($('#test'))
var dataURL = canvas.toDataURL("image/jpeg");
var pHtml = "<img src='" + dataURL + "'/><p>图片海报</p>";
$('#boox').html(pHtml);
// $('#img').attr('src', dataURL);
// console.log(canvas.toDataURL("image/jpeg"))
});
});