HTML页面生成图片并下载(html2canvas)

首先引入html2canvas，附上链接 https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js

使用 html2canvas 选取需要的区域并下载

//选取<div id="view"></div>的区域，此方法为页面的点击事件function takeScreenshot() {html2canvas(document.getElementById('view')).then(canvas => {convertCanvasToImg(canvas)});
}//转换图片格式
function convertCanvasToImg(canvas) {// canvas base64 转 blobvar myBlob = dataURLtoBlob(canvas.toDataURL('img/png', 0.92))// blob转URL对象myUrl = URL.createObjectURL(myBlob)// 创建a标签，下载图片downImg(myUrl)
}//base64 转 blob
function dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
}//下载图片 filename是图片名称
function downImg(url) {// 创建a标签 并设置其相关属性，最后触发其点击事件let a = document.createElement("a")let clickEvent = document.createEvent("MouseEvents");a.setAttribute("href", url)a.setAttribute("download", "filename")a.setAttribute("target", '_blank')clickEvent.initEvent('click', true, true)a.dispatchEvent(clickEvent);
}

HTML页面生成图片并下载(html2canvas)相关推荐

FileSaver+html2canvas js页面生成图片并下载保存
使用html2canvas.js生成图片 FileSaver.js保存为图片并下载 html <a href="#" class="btn blue" o ...
htmlCanvas2将html页面生成图片并下载
需求是需要将html页面保存图片,使用的技术是html2Canvas 主要思路就是我们先找到自己想要获取的是页面的div,然后获取这个dom,然后将获取dom的宽和高,并将其缩放为原来的2倍,这样是为 ...
vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图
功能: 1.兼容 PC 和 Mobile: 2.对指定的区域进行截取: 3.可以控制截图大小: 4.截图生成base64图片地址一.安装插件 npm install html2canvas --sa ...
小程序将页面生成图片，并上传至阿里OSS
前端时间公司的业务里,需要自动将背景图和用户输入的标题生成封面并上传至OSS的需求,感觉以后会用到,因此记录一下. 一.将页面生成图片使用了Painter 2.0库插件(Painter). step ...
JS如何将 DOM 生成图片并下载
最近有一个需求,h5页面生成图片,保存图片打开弹窗,并下载.如图所示: 文件结构如下: index.vue : <template><div class="report-w ...
小程序超长页面截图保存web-view+html2canvas
web-view文档建议参考----支付宝提供的文档,html2canvas官方文档(官网可以下载html2canvas.js 和 html2canvas.min.js).由于篇幅受限,这里就贴了一下 ...
VUE页面转pdf下载
一.欢迎你们走进杭老师小学堂,今天给大家讲解一下vue页面转PDF下载,本人亲测有效哦! 随着项目体积的不断增加,我们的项目内容也逐渐越来越丰富新颖! 多了不说上需求跟代码! 1.首先我们要绑定一个按 ...
html2canvas 实现网页截图 / 下载html2canvas.js插件包
html2canvas可以通过纯JS对浏览器网页进行截屏,但截图的精确度还有待提高官网: http://html2canvas.hertzen.com/ gitHub: https://github ...
h5 html页面生成图片
h5 html页面生成图片引入html2canvas.min.js <div class="success_content"> ...

HTML页面生成图片并下载(html2canvas)

HTML页面生成图片并下载(html2canvas)相关推荐

最新文章

热门文章