来源：https://bbs.csdn.net/wap/topics/392154316?from=groupmessage
var triggerEvent = "touchstart"; //指定下载方式
var blob=new Blob([''], {type:'application/octet-stream'});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
var e = document.createEvent('MouseEvents');
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
URL.revokeObjectURL(url);
var imgs = document.getElementsByTagName("img");
for(var i = 0,o;o = imgs[i];i++){
o.addEventListener(triggerEvent,function(){
var url = this.getAttribute("src");
<script type="text/javascript" src="/h5/screencapture/html2canvas.min.js"></script>
<script type="text/javascript" src="/h5/screencapture/canvas2image.js"></script>
<script type="text/javascript">
function convert2canvas() {
var cntElem = $('#content')[0];
var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d');
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
// 【重要】默认转化的格式为png,也可设置为其他格式
var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height);
//document.body.appendChild(img);
$("#content").css("display", "none");
$(".img-container").append(img);
$(img).css({
"width": canvas.width / 2 + "px",
"height": canvas.height + "px",/// 2
}).addClass('f-full');
});
}
convert2canvas();
/* $(function(){
document.querySelector("button").addEventListener("click", function() {
var cntElem = $('#content')[0];
var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 1.98; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(shareContent, opts).then(function (canvas) {
var src = canvas.toDataURL();
var link = document.createElement('a');
//设置下载的文件名
link.download = '报告';
link.style.display = 'none';
//设置下载路径
link.href = src;
//触发点击
document.body.appendChild(link);
link.click();
//移除节点
document.body.removeChild(link);
});
}, false);
}); */
</script>
