版权声明:本文为QQ帝国原创博客,转载请附上链接,谢谢。 https://blog.csdn.net/QQ_Empire/article/details/88221692
常用的插件就是html2canvas。插件的使用本身很简单,这里说的是如何将其生成的canvas保存为图片。
1、引入
import html2canvas from 'html2canvas'
<div >
<el-button type="info" size="mini" @click="tohomedetail" class="back">返回</el-button>
<el-button type="info" size="mini" @click="savecanvas" class="back">保存地图</el-button>
<div id="allmap" style="height:800px" class="canvas" ref="canvas"></div>
</div>
<div id="canvasContainer" style="display:none"></div>
let oCard = document.querySelector("#bsCard");//要转换成canvas的元素
let oContainer = document.querySelector("#canvasContainer");//装canvas的容器
html2canvas(oCard).then(function(canvas) {
oContainer.appendChild(canvas);
//延迟执行确保万无一失,玄学
setTimeout(() => {
var type = 'png';
var oCanvas = oContainer.getElementsByTagName("canvas")[0];
var imgData = oCanvas.toDataURL(type);//canvas转换为图片
// 加工image data,替换mime type,方便以后唤起浏览器下载
imgData = imgData.replace(_fixType(type), 'image/octet-stream');
fileDownload(imgData);
}, 0)
});
function _fixType(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
let r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
//唤起浏览器下载
function fileDownload(downloadUrl){
let aLink = document.createElement('a');
aLink.style.display = 'none';
aLink.href = downloadUrl;
aLink.download = "下载文件名xxx.png";
// 触发点击-然后移除
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
}