精华内容
下载资源
问答
  • 主要介绍了electron+vue实现div contenteditable截图功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue截图功能的实现

    2021-12-09 14:13:31
    需要截图的页面引入 importhtml2canvasfrom'html2canvas' 需要截图的容器加 ref <divref="imageTofile"class="dashboard-containerhome-box"> toImage() { // 第一个参数是需要生成截图的元素,第二个是...

    安装

    npm install   html2canvas -D

    需要截图的页面引入 

    import html2canvas from 'html2canvas'

    需要截图的容器加 ref

    <div ref="imageTofile" class="dashboard-container home-box">

    toImage() {
              // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
          html2canvas(this.$refs.imageTofile, {
            backgroundColor: null,
            useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
          }).then((canvas) => {
            const url = canvas.toDataURL('image/png')
            this.htmlUrl = url
            console.log('生成的url',this.htmlUrl)
            // 把生成的base64位图片上传到服务器,生成在线图片地址
            // this.sendUrl()  //上传
          })
        },

    toImage是开始截图的函数,调用即可。

    注意

    页面中含有视频截图出来视频部分是黑屏。这个应用场景主要是注入日志。调试错误。页面崩溃时写入日志等。

    展开全文
  • vue实现截图功能

    千次阅读 2021-04-20 15:42:23
    1、安装 ...vue-qr :text=“downloadData.url” :margin=“0” colorDark="#000" colorLight="#fff" :logoSrc=“downloadData.icon” :logoScale=“0.3” :size=“200”> 4、scripts: // 截取

    1、安装

    npm install html2canvas --save

    2、引入

    import html2canvas from ‘html2canvas’

    3、template:

    <vue-qr

    :text=“downloadData.url”

    :margin=“0”

    colorDark="#000"

    colorLight="#fff"

    :logoSrc=“downloadData.icon”

    :logoScale=“0.3”

    :size=“200”>

    4、scripts:

    // 截取图片

    setImage () {

    let that = this;

    var canvas2 = document.createElement(“canvas”);

    // let _canvas = document.getElementById(‘child’);

    let _canvas = document.getElementById(‘nodeBox’);

    var w = parseInt(window.getComputedStyle(_canvas).width);

    var h = parseInt(window.getComputedStyle(_canvas).height);

    //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了

    canvas2.width = w * 4;

    canvas2.height = h * 4;

    canvas2.style.width = w + “px”;

    canvas2.style.height = h + “px”;

    //可以按照自己的需求,对context的参数修改,translate指的是偏移量

    var context = canvas2.getContext(“2d”);

    context.scale(2, 2);

    html2canvas(document.getElementById(‘nodeBox’), {

    canvas: canvas2

    }).then(function (canvas) {

    var blob = that.getBlob(canvas);

    var oMyForm = new FormData();

    var fileName = “mobile” + ‘.jpg’

    oMyForm.append(“file”, blob, fileName);

    // oMyForm.append(“fileName”, fileName);

    oMyForm.append(“fileType”, ‘image’);

    oMyForm.append(“user_id”, that)

    });

    },

    getBlob (canvas) { //获取blob对象

    var data = canvas.toDataURL(“image/jpeg”, 1);

    this.dataurl=data

    console.log(this.dataurl)

    data = data.split(’,’)[1];

    data = window.atob(data);

    var ia = new Uint8Array(data.length);

    for (var i = 0; i < data.length; i++) {

    ia[i] = data.charCodeAt(i);

    }

    return new Blob([ia], {

    type: “image/jpeg”

    });

    },

    5、应用:

    展开全文
  • 需要npm install 相关依赖 ,参照word,已测试
  • 这个功能如果让后端做的话,前端需要把大量的代码传给后端,然后后端去解析生成图片,再返回给前端,幸运的是,html2canvas.js让这件事情变得简单起来,下面是我在vue项目中实现截图功能的代码: 一、先安装...

    最近做地图的项目,有个需求就是前端需要将网页的内容生成一张图片,这个功能如果让后端做的话,前端需要把大量的代码传给后端,然后后端去解析生成图片,再返回给前端,幸运的是,html2canvas.js让这件事情变得简单起来,下面是我在vue项目中实现截图功能的代码:

    一、先安装html2canvas

    npm install html2canvas --save
    
    或者
    
    yarn add html2canvas
    

    二、引入html2canvas

    import html2canvas from 'html2canvas'
    

    三、主要实现代码:

    1、HTML中:

    <template>
        <!--超级地图-->
        <div id="superMap"/>
        
        <!--点击button即可实现页面的截图-->
        <div id="test">
          <el-button @click="getImg">截图</el-button>
        </div>
    </template>
    
    

    2、JavaScript中:

    methods:{
    
    //截图方法
     getImg(){
       html2canvas(
         document.getElementById('superMap'),
         {
           backgroundColor:null,//画出来的图片有白色的边框,不要可设置背景为透明色(null)
           useCORS: true,//支持图片跨域
           scale:1,//设置放大的倍数
         }
       ).then(canvas => {
         //截图用img元素承装,显示在页面的上
         let img = new Image();
         img.src = canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
         document.getElementById('test').appendChild(img);
     
         //如果你需要下载截图,可以使用a标签进行下载
         let a = document.createElement('a');
         a.href = canvas.toDataURL('image/jpeg');
         a.download = 'test';
         a.click();
       })
     }
     
    }
    

    四、在使用html2canvas时,估计大家可能会遇到下面的问题

    1、图片跨域:如果需要截图的地方包含其他域名的图片,那么会出现跨域问题
    解决:
    	1)设置useCORS:true,
    	2)把后端的图片转成base64
    	3)将图片都放在同一个域名下
    

    2、画出来的图片有白色的边框
    解决:
    1)设置 backgroundColor: null

    五、总结

    当然本文只是关于html2canvas一小部分的配置的使用,具体可见官网:http://html2canvas.hertzen.com/documentation

    展开全文
  • electron 的一个截图插件工具,类似QQ截图.............................
  • Vue 实现页面一键截屏功能 1,安装所需要的包: npm i html2canvas --save //将页面内容区域转化为图片格式 2,在你的页面引入html2canvas 组件 import html2canvas from 'html2canvas' 3,定义点击按钮和截屏...

    1,安装所需要的包:

    npm i html2canvas --save //将页面内容区域转化为图片格式

    2,在你的页面引入html2canvas 组件

    import html2canvas from 'html2canvas'
    

    3,定义点击按钮和截屏方法:

        <div style="color:#fff">
                <div class="icon-button right">
    			<!--截屏按钮图标-->
                  <span class="iconfont icon-iconcut" @click="screenShot"></span>
                </div>
         </div>
    
        //截图
        screenShot() {
          //获取页面dom
          //这里的html标签是获取页面最大的dom元素;根据实际业务场景自行更改
          const el = document.querySelector('html');
          html2canvas(el, {allowTaint: true}).then((canvas)=> {
            //document.body.appendChild(canvas)  页面布局会乱
            //转换base64
            const capture = canvas.toDataURL('image/png');
            //下载浏览器弹出下载信息的属性
            const saveInfo = {
             //导出文件格式自己定义,我这里用的是时间作为文件名
              'download': Moment().format("YYYY-MM-DD HH:mm:ss")+`.png`,
              'href': capture
            };
            //下载,浏览器弹出下载文件提示
             this.downloadFile(saveInfo);
          
            //调用保存接口 如果需要后台保存,放开注释
         /*   uploadImage({capture:capture}).then(res => {
              if (res.code == 200) {
                this.$message.success("截取成功!")
              }
            });*/
          })
        },
    
       //下载截图
        downloadFile(saveInfo) {
          const element = document.createElement('a');
          element.style.display = 'none';
          for (const key in saveInfo) {
            element.setAttribute(key, saveInfo[key]);
          }
          document.body.appendChild(element);
          element.click();
          setTimeout(() => {
            document.body.removeChild(element);
          }, 300)
        }
    

    这是纯前端截屏,保存文件以下载的方法是方式展现,文件保存位置由浏览器设置;

    如果需要后端来控制保存位置需要调用保存接口,接口如下:

    4,后代接口

        @PostMapping(value = "/uploadImage", produces = {MediaType.APPLICATION_JSON_UTF8_VALUE})
        @ApiOperation(value = "保存截屏", notes = "保存截屏")
        @ResponseBody
        public Object uploadImage(@RequestBody String jsonStr) {
            //获取前端传送base64文件
            String capture = JSONUtil.parseObj(jsonStr).getStr("capture");
            //截掉data:image/png;base64
            String base64 = capture.substring(capture.indexOf(",") + 1);
            //保存路径
            String path = "~/Desktop/截屏/" + DateUtil.format(new Date(), "yyyy.MM.dd_HH.mm.ss") + ".png";
            //转换保存
            ImgUtil.write(ImgUtil.toImage(base64), FileUtil.file(path));
            logger.info("-----------------截屏图片保存位置---------------------------:" + path);
            return setSuccessModelMap();
        }
    注意:base64字符串偏大,用json对象传;当然方法有很多种;
         base64字符串文件包含头部“data:image/png;base64“,需要截取掉,否则保存的图片无法打开。
        
    
    展开全文
  • vue-video-player 怎么实现截图功能呢? 原生的H5和canvas可以截图
  • vue页面截图功能

    2021-06-25 10:44:43
    第一步安装html2canvas组件: ... 第二步导入页面: ... test.vue:(截图功能) <template> <div> <!--<button>{{$store.state.name}}</button>--> test_test <div ref="image.
  • vue 移动端扫一扫功能

    2020-09-23 11:34:36
    vue移动端手机的扫一扫功能,可以识别二维码,功能比较简单,有需要的可以下载,希望有所帮助,有什么问题可以在下方进行评论或者留言,看到第一时间会进行修复.
  • 主要介绍了Vue解析剪切板图片并实现发送功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了解,可以在我的博客园找到有详细介绍 准备工作: ...
  • element 是指向待被截图的标签 及就是这整块标签内部被截图 options 指的是截图功能中的一些配置项: Name Default Description allowTaint false 是否允许跨域图像污染画布 backgroundColor #ffffff 画布背景...
  • 主要为大家详细介绍了vue使用screenfull插件实现全屏功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue2 js实现截屏功能

    2021-12-01 18:32:33
    vue2 js实现截屏功能
  • 需求描述 最近在做一个后台系统,有一个功能产品需求是页面分为左右两部分,通过右边的组件列表来动态配置左边的页面视图,并且左边由组件拼装...demo截图 代码地址 vue-draggable-list 代码预览 <div cla
  • 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat,实现了发送消息、表情(动图),图片、视频预览,右键菜单、截屏截图可直接...
  • 主要为大家详细介绍了vue+element实现图片上传及裁剪功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 最近开发一个pc端的应用程序,主要是该应用程序涉及到教育类的课程,为了防止公司制作的课程被盗用,不想用户通过复制粘贴或者截图截屏功能操作。 1、主要是我这个项目主要是用electron + vue创建的项目,所以...
  • 右侧是菜单,左侧区域是视频,左侧区域视频做分屏处理,鼠标悬浮上去,展示播放 声音 以及选中 和截图下载功能。 分屏功能类似网站的这个功能:http://nvr.liveqing.com:10800/#/screen。这个网站视频点击选择...
  • 2. vue-cropper.js裁切图片(功能成功实现,很全面) &lt;template&gt; &lt;div&gt; &lt;div class="cropper-content"&gt; &lt;div class="cropper"&gt; ...
  • 普通截图 1.下载 html2canvas 插件 npm install html2canvas --save 2. 引入 import html2canvas from 'html2canvas' 3. 使用 html 使用 ref 绑定 或者 id 绑定 <div class="treeInfo" id="player" ref=...
  • 这个截图有点类似下载的那种,可以按照自己的需要在代码中指定要截屏的部分,点击截图会自动保存到本地,更贴切的说法可以说是快照。不同于我们常用的截图软件,这点要注意。实现结果如图: html2canvas 是 ...
  • vue中实现h5分享截图

    2021-06-21 16:04:14
    } } // } </style> 2、domtoimage(可支持有滚动条的情况) 参考文档 使用案例: 1.index.vue <template> <div> <div id="capture"> 截图内容<div/> </div> 点击截图</button> <poster2 v-model="showPoster"></...
  • Vue拖动截图功能实现

    热门讨论 2021-07-06 21:51:48
    拖动鼠标进行页面截图(也可指定区域拖动截图) 一、安装html2canvas、vue-cropper npm i html2canvas --save //用于将指定区域转为图片 npm i vue-cropper -S //将图片进行裁剪 二、在main.js注册vue-...
  • vue使用canvas进行视频的截图功能 1,直接贴代码了 代码里有注释和解释 <div class="video_list" v-for="(item, index) in testVideoList" //循环的视频数组 :key="index" > <video style="width: ...
  • 主要介绍了使用100行代码实现vue表单校验功能,本文通过实例截图给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • :house: 项目截图 :paperclip: 项目配置也是很简单 npm install vuepress-plugin-ribbon-animation -D or cnpm install vuepress-plugin-ribbon-animation -D 1.1.1 修复打包bug 1.1.2 修复组件高度bug 1.1.3 去掉...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,290
精华内容 3,316
关键字:

vue截图功能

vue 订阅