vue 屏幕截图,vue前端开发截图功能

　　本文主要介绍vue如何进行网页截图，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

目录

　　 1、安装html2Canvas2，引入所需vue组件3、编写截图按钮4、调用函数toImage summary。

1、安装html2Canvas

　　npm安装html2canvas -保存

2、在需要的vue组件中引入

　　从“html2canvas”导入html 2 can vas；

3、编写一个截图按钮

　　El-button class= button-dalod size= mini title=生成图片 @ click= to image() icon= El-icon-download /El-button

4、调用函数toImage

　　//页面元素到图片

　　toImage () {

　　//手动创建画布标签

　　const canvas=document . createelement( canvas )

　　//获取父标签，这意味着该标签中的DOM元素生成图片

　　//imageTofile是屏幕截图范围内父元素的自定义引用名称。

　　让canvasBox=这个。$refs.imageTofile

　　//获取父级的宽度和高度

　　const width=parse int(window . getcomputedstyle(canvasBox))。宽度)

　　const height=parse int(window . getcomputedstyle(canvasBox))。高度)

　　//宽高* 2，放大2倍是为了防止画面模糊。

　　canvas.width=宽度* 2

　　canvas.height=高度* 2

　　canvas.style.width=width px

　　canvas.style.height=height px

　　const context=canvas . get context( 2d )；

　　context.scale(2，2)；

　　常量选项={

　　backgroundColor: null

　　画布：画布，

　　useCORS:对

　　}

　　html2canvas(canvasBox，选项)。然后((画布)={

　　//today aurl图像格式转换为base64

　　let dataURL=canvas . toda taurl( image/png )

　　console.log(数据URL)

　　this.downloadImage(dataURL)

　　})

　　},

　　//下载图片

　　下载图像(url) {

　　//如果是在网页中，可以直接创建一个A标签，直接下载。

　　设a=document.createElement(a )

　　a.href=url

　　A.download=主页截图

　　a .单击()

　　},

　　不要忘记在页面的截图范围内给父元素添加ref属性，这样canvas就可以找到父元素并计算宽度和高度来捕捉屏幕。

　　这就是截图出来的效果：

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。