1.首先引入js(这个js可以解决保存的图片模糊问题)
js下载地址:https://github.com/eKoopmans/html2canvas/tree/develop/dist
import html2canvas from '~/assets/js/html2canvas.min.js'; // 引入截图js
2.
downLoadTcPhoto() { //点击下载图片按钮
this.$nextTick(()=>{
window.pageYoffset = 0;
document.documentElement.scrollTop = 0; //跳到顶部解决截图不全的问题
document.body.scrollTop = 0;
html2canvas(document.querySelector('.tc_photo'), {
// 以下字段可选
//width: 798, // canvas宽度
//height: this.$refs.tcPhoto.offsetHeight, // canvas高度
// x: 0, // x坐标
// y: 0, // y坐标
// width:window.screen.availWidth,
// height:window.getComputedStyle(this.$refs.tcPhoto).height,
// windowWidth:document.body.scrollWidth,
// x:0,
// y:window.pageYOffset,
foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
useCORS: true, // 是否尝试使用CORS从服务器加载图像
async: false, // 是否异步解析和呈现元素
// 以下字段必填
background: '#ffffff', // 一定要添加背景颜色,否则出来的图片,背景全部都是透明的
dpi: 300, // 处理模糊问题
onrendered: function (canvas) {
// https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
// let url = canvas.toDataURL('image/png', 1.0)
let url = canvas.toDataURL();
let a = document.createElement('a');
let event = new MouseEvent('click');
a.download = 'test';
a.href = url; //下载图片到浏览器
a.dispatchEvent(event);
},
});
})
},