前端vue实现截图功能
使用html2canvas库实现截图
html2canvas是一个流行的JavaScript库，可以将HTML元素渲染为canvas，进而转换为图片。在Vue项目中安装使用：
npm install html2canvas组件中使用示例：
import html2canvas from 'html2canvas';
export default {
methods: {
captureElement() {
html2canvas(document.querySelector('#target-element')).then(canvas => {
const imgData = canvas.toDataURL('image/png');
this.downloadImage(imgData, 'screenshot.png');
});
},
downloadImage(data, filename) {
const link = document.createElement('a');
link.href = data;
link.download = filename;
link.click();
}
}
}使用vue-html2canvas插件
vue-html2canvas是专门为Vue封装的截图插件，使用更简便：
npm install vue-html2canvas全局注册后使用：
this.$html2canvas(document.getElementById('target'), {
onrendered: canvas => {
const img = canvas.toDataURL();
document.body.appendChild(canvas);
}
});截图指定DOM元素
通过ref精准定位要截图的组件：
capture() {
html2canvas(this.$refs.component.$el).then(canvas => {
canvas.toBlob(blob => {
saveAs(blob, 'component.png');
});
});
}处理截图中的跨域资源
遇到图片跨域问题时需要配置：
html2canvas(element, {
useCORS: true,
allowTaint: true
});截图质量与格式控制
调整输出图片质量：
canvas.toDataURL('image/jpeg', 0.95); // JPEG质量0.95
canvas.toBlob(callback, 'image/png', 1); // PNG最高质量实现网页全屏截图
滚动截图完整页面：
const options = {
scrollX: 0,
scrollY: 0,
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight
};
html2canvas(document.body, options).then(canvas => {
// 处理全屏截图
});使用Canvas2Image保存图片
配合canvas2image库实现更多保存选项：
import Canvas2Image from 'canvas2image';
Canvas2Image.saveAsPNG(canvas); // 保存为PNG
Canvas2Image.saveAsJPEG(canvas); // 保存为JPEG常见问题解决方案
截图模糊时添加scale参数：
html2canvas(element, {
scale: 2 // 双倍分辨率
});截图缺失字体时：
html2canvas(element, {
fontEmbedding: true
});
