精华内容
下载资源
问答
  • vue截图Canvas 上传

    2018-10-19 10:13:23
    我们需要两张画布,一个展示选取图片的压缩图,一个展示截取后的图片 在移动Web蓬勃发展的今天,有太多太多的应用需要让用户在移动Web上传图片文件了,正因如此,我们有些困难必须去攻克: 截图效果
  • electron 的一个截图插件工具,类似QQ截图.............................
  • vue截图并发送

    千次阅读 2019-04-27 11:33:21
    import html2canvas from 'html2canvas' snapshotRatioImagea() { // 截图并发送 let that = this let opts = { logging: true, //日志开关,便于查看html2canvas的内部执行流程 ...
    import html2canvas from 'html2canvas'
    snapshotRatioImagea() { // 截图并发送
                    let that = this
                    let opts = {
                        logging: true, //日志开关,便于查看html2canvas的内部执行流程
                        useCORS: true // 【重要】开启跨域配置
                    };
                    let arr = ['shotcart1', 'shotcart2', 'shotcart3', 'shotcart4', 'shotcart5', 'shotcart6']
                    let sixImage = []
                    arr.map((v, i) => {
                        html2canvas(document.getElementById(v), opts).then((canvas) => {
                            const dataUrl = canvas.toDataURL();
                            const newImg = document.createElement("img")
                            newImg.src = dataUrl
                            let width
                            let height
                            let pic
                            // 加载完成执行
                            newImg.onload = function () {
                                const sliceBase64 = canvas.toDataURL().slice(canvas.toDataURL().indexOf(',') + 1)
                                width = newImg.width
                                height = newImg.height
                                pic = {
                                    sliceBase64,
                                    width,
                                    height,
                                    i
                                }
                                sixImage.push(pic)
                                // console.log('.....................pic', pic)
    //                             let datae = {
    //                                 valueType: '2',
    //                                 key: '${FAMILY_FINANCIAL_DIAGNOSIS}',
    //                                 value: sliceBase64,
    //                                 part: '5',
    //                                 point: '4',
    //                                 imgWidth: width,
    //                                 imgHeight: height
    //                             };
    //
    //                             that.setReportInfo(datae)
    //                             that.setPreReportInfo(datae)
                                // if (flag == "2") {
                                //     that.fastQiut();
                                // }
                            };
                        })
                    })
                    // console.log('---------------sixImaeg', sixImage)
                    var timer = setInterval(() => {
                        if (sixImage.length == 6) {
                            clearInterval(timer);
                            let d1 = {
                                valueType: '2',
                                key: '${CURRENT_RATIO}',
                                value: sixImage[0].sliceBase64,
                                part: '5',
                                point: '4',
                                imgWidth: sixImage[0].width,
                                imgHeight: sixImage[0].height,
                            };
                            that.setReportInfo(d1)
                            that.setPreReportInfo(d1)
                            let d2 = {
                                valueType: '2',
                                key: '${DEBT_RATIO}',
                                value: sixImage[1].sliceBase64,
                                part: '5',
                                point: '4',
                                imgWidth: sixImage[1].width,
                                imgHeight: sixImage[1].height,
                            };
                            that.setReportInfo(d2)
                            that.setPreReportInfo(d2)
                            let d3 = {
                                valueType: '2',
                                key: '${NET_ASSENTS_RATIO}',
                                value: sixImage[2].sliceBase64,
                                part: '5',
                                point: '4',
                                imgWidth: sixImage[2].width,
                                imgHeight: sixImage[2].height,
                            };
                            that.setReportInfo(d3)
                            that.setPreReportInfo(d3)
                            let d4 = {
                                valueType: '2',
                                key: '${SAVING_EXPENSE_RATIO}',
                                value: sixImage[3].sliceBase64,
                                part: '5',
                                point: '4',
                                imgWidth: sixImage[3].width,
                                imgHeight: sixImage[3].height,
                            };
                            that.setReportInfo(d4)
                            that.setPreReportInfo(d4)
    
                            let d5 = {
                                valueType: '2',
                                key: '${REPAY_RATIO}',
                                value: sixImage[4].sliceBase64,
                                part: '5',
                                point: '4',
                                imgWidth: sixImage[4].width,
                                imgHeight: sixImage[4].height,
                            };
                            that.setReportInfo(d5)
                            that.setPreReportInfo(d5)
    
                            let d6 = {
                                valueType: '2',
                                key: '${FREEDOM}',
                                value: sixImage[5].sliceBase64,
                                part: '5',
                                point: '4',
                                imgWidth: sixImage[5].width,
                                imgHeight: sixImage[5].height,
                            };
    
                            that.setReportInfo(d6)
                            that.setPreReportInfo(d6)
    
    //                      if (flag == "2") {
    //                          that.fastQiut();
    //                      }
                        }
                    }, 1000);
                },

     

    展开全文
  • 主要介绍了electron+vue实现div contenteditable截图功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 截图

    2021-06-21 17:31:06
    1111.1 1.html2canvas 2.kscreenshot 3.vue-cropper

    1.html2canvas

    npm install --save html2canvas

    或者直接去官网(http://html2canvas.hertzen.com/)下载js到本地,然后引用

    <script type="text/javascript" src="js/html2canvas.js"></script>

    组件引用

    import html2canvas from 'html2canvas';

    页面使用

    html2canvas(document.body).then(function(canvas) {
        document.body.appendChild(canvas);
    });

     下面这段是我用到的

    // html2canvas(
            //   document.getElementById('allmap'),
            //   {
            //     backgroundColor:null,
            //     useCORS: true,
            //     scale:1,
            //   }
            // ).then(canvas => {
            //   let img = new Image();
            //   img.src = canvas.toDataURL('image/jpeg');
            //   document.getElementById('allmap').appendChild(img);
            //   let a = document.createElement('a');
            //   a.href = canvas.toDataURL('image/jpeg');
            //   a.download = 'allmap';
            //   a.click();
            // })

    2.kscreenshot

    npm install kscreenshot --save

    组件引用

    import kscreenshot from "kscreenshot";

     使用

    new kscreenshot({
        key: 65,//按shift+A键
        needDownload: true,//可下载
    });


    3.vue-cropper

    ​​​​​​​npm install vue-cropper

    组件引用

    import { VueCropper } from "vue-cropper";
    
    components: { VueCropper },

    页面使用

    <el-row>
            <el-col :xs="24" :md="12" :style="{height: '350px'}">
              <vue-cropper
                ref="cropper"
                :img="options.img"
                :info="true"
                :autoCrop="options.autoCrop"
                :autoCropWidth="options.autoCropWidth"
                :autoCropHeight="options.autoCropHeight"
                :fixedBox="options.fixedBox"
                @realTime="realTime"
              />
            </el-col>
            <el-col :xs="24" :md="12" :style="{height: '350px'}">
              <div class="avatar-upload-preview">
                <img :src="previews.url" :style="previews.img" />
              </div>
            </el-col>
          </el-row>
    
    
    
    // 实时预览
        realTime(data) {
          this.previews = data;
        }

     

    展开全文
  • 需要npm install 相关依赖 ,参照word,已测试
  • 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的图片裁剪组件,实现了缩放裁剪,自定义裁剪尺寸,以及iphone和部分安卓机型的照片角度纠正
  • 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、应用:

    展开全文
  • 简单粗暴vue实现截图

    千次阅读 2020-04-14 11:29:20
    vue实现图片截取 最近项目有一个需求,需要上传图片,...我们的架构是vue,所以用的是一个vue截图插件 安装插件:npm install vue-cropper --save-dev 引入组件 import Vue from 'vue'; import { VueCropper }...
  • vue页面截图

    2020-11-11 17:53:31
    参考: (1)html2canvas 图片合成模糊以及保存为图片背景图丢失问题解决:https://blog.csdn.net/youngjqz/article/details/96594540  我: (1)页面 帮他拉票 (2)方法 // 截图获取 myPoster 区域 html2poster...
  • vue页面截图等功能

    2021-06-25 10:44:43
    第一步安装html2canvas组件: ... 第二步导入页面: ... test.vue:(截图功能) <template> <div> <!--<button>{{$store.state.name}}</button>--> test_test <div ref="image.
  • 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项目截图页面导出PDF 首先我也是去百度了一下方法,来自这个老哥的文章 VUE中将页面导出为图片或者PDF 但是一顿操作之后就遇到了另一个问题 如何在Vue中获取想要的dom元素 便了解了一下方法,首先想获取被vue渲染...
  • vue点击按钮自动截图并下载

    千次阅读 热门讨论 2020-06-17 14:14:37
    vue中点击按钮自动截图并下载图片点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载 代码实现 1、npm install html2canvas //下载包 2、import html2canvas from "html2canvas" //导入包 ...
  • 普通截图 1.下载 html2canvas 插件 npm install html2canvas --save 2. 引入 import html2canvas from 'html2canvas' 3. 使用 html 使用 ref 绑定 或者 id 绑定 <div class="treeInfo" id="player" ref=...
  • ... ... ...--如果有图片,建议添加 crossOrigin='anonymous',因为 canvas toDataUrl时可能会存在跨域问题 -...简单的截图就完成了,由于html2canvas 有些偏差,会存在白边。 注意:html2canvas截取的是可试窗口的数据
  • 这个功能如果让后端做的话,前端需要把大量的代码传给后端,然后后端去解析生成图片,再返回给前端,幸运的是,html2canvas.js让这件事情变得简单起来,下面是我在vue项目中实现截图功能的代码: 一、先安装...
  • 下载插件: ... 引用: ...//屏幕截图、保存图片到相册 handleExport() { let htmlDom = document.getElementById("long"); // 你要截图的元素 可直接是img var FileSaver = require("file-saver"); th
  • npm install vue-cropper # cropper.vue <template> <div style="width: auto; height: 500px;"> <vue-cropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType=...
  • 基于vue的图片裁剪插件vue-cropper

    千次阅读 2020-10-01 20:53:22
    我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了。有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的, 我这里采用了4:3的固定...
  • vue+element 做类似截图保存图片操作

    千次阅读 2019-05-23 10:05:44
    vue项目安装html2canvas npm install html2canvas 构建dom元素 <div ref="imageTofile"></div> <!-- 需要截图保存的dom--> <img :src="imgUrl "> //截图展示 js里面 //引入 import ...
  • [解决] VUE项目video、img截图及资源跨域处理视频截图 视频截图 代码如下: <template> <div class="info"> <video crossOrigin="anonymous" // 1.跨域处理 [crossOrigin]...
  • 由于项目需要同时导入excel文档和jpg图片,因此尝试了一些方法来完成任务。 图片数据是以base64格式存入的,显示和转移都比较...使用的是element-ui,使用的是vue解析excel方法,需要安装xslx,可参考https://blog.cs
  • vue 安装html2canvas插件 npm install html2canvas --save 引入插件 import html2canvas from "html2canvas" <div class="imageWrapper" ref="imageWrapper"> <div class="share-wrap"> &...
  • ... 2、html选取截图区域和...//截图区域 <el-button type="info" size="mini" @click="saveImg">保存图片</el-button> 3、页面JS引用和保存上传的方法 import html2canvas from 'html2canvas' //方法
  • Vue 使用vue-cropper截图

    千次阅读 2020-03-26 16:19:48
    使用vue-cropper截图 1.下载vue-cropper依赖 npm install vue-cropper 2.在使用的页面引入 import VueCropper from 'vue-cropper' 3.页面使用 <vueCropper ref="cropper" :img="option.img" :output...
  • vue-cropper 截图插件的使用

    万次阅读 2018-09-19 18:07:11
    npm install vue-cropper --save-dev 引用: import vueCropper from 'vue-cropper' 声明: components: { vueCropper } &lt;vueCropper ref="cropper" :img="option.img" // 裁剪图片...
  • 主要介绍了解决VUE动态加载图片在跨域时无法显示的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

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

vue截图

vue 订阅