JavaScript 实现屏幕截图

作者 : 开心源码 本文共5135个字,预计阅读时间需要13分钟 发布时间: 2022-05-13 共180人阅读

方法一

需要安装file-saver,html2canvas插件

 handleExport() {      let htmlDom = document.querySelector('#centerPark');      var FileSaver = require('file-saver');      html2canvas(htmlDom, {        allowTaint: false,   //允许污染        taintTest: true,    //在渲染前测试图片(没整明白有啥用)        useCORS: true,      //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)        background: "#fff",      }).then(canvas => {        if (navigator.msSaveBlob) {          navigator.msSaveBlob(canvas.msToBlob(), 'map.png');        } else {          canvas.toBlob(function (blob) {            FileSaver.saveAs(blob, 'map.png');          });        }      })    },

对于地图截图也可以

    handleExport() {      let map = this.mymap;      var FileSaver = require('file-saver')      map.once('rendercomplete', function (event) {        var canvas = event.context.canvas;        if (navigator.msSaveBlob) {          navigator.msSaveBlob(canvas.msToBlob(), 'map.png');        } else {          canvas.toBlob(function (blob) {            FileSaver.saveAs(blob, 'map.png');          });        }      });      map.renderSync();    },

这个方法的问题是标记标绘可以截不上。

方法二

首先进行预览后在导出成pdf,如下图所示:

image.png

    <el-dialog title="专题报告预览" :visible.sync="imgDialogVisible" width="50%" :before-close="handleClose" @open="openDialog">      <!-- <span>点击图片进行下载</span> -->      <el-form label-width="100px">        <div class="row">          <el-alert title="点击图片可单独保存图片" type="info">          </el-alert>        </div>        <div class="row" style="margin-top:10px">          <el-row>            <el-col :span="8">              <el-form-item label="制作单位:">                <el-input placeholder="请输入制作单位" v-model="unit"></el-input>                </el-input>              </el-form-item>            </el-col>            <el-col :span="8">              <el-form-item label="制作人:">                <el-input placeholder="请输入制作人名称" v-model="producer"></el-input>                </el-input>              </el-form-item>            </el-col>            <el-col :span="8">              <el-form-item label="签发人:">                <el-input v-model="issuer" placeholder="请输入签发人名称" value="admin"></el-input>              </el-form-item>            </el-col>          </el-row>        </div>        <div class="row">          <el-form-item label="报告内容:">            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">            </el-input>          </el-form-item>          <!-- <span><label for="">内容:</label> </span> -->        </div>      </el-form>      <!-- 报告主体 -->      <div id="dialogPage">        <div class="dialog-title" align="center">专题报告</div>        <div class="row">          <span>            {{unit}}          </span>          <span style="" class="right">时间:{{nowDate | formatdatezhSimple}}</span>        </div>        <div class="row">          <span>制作人:{{this.producer}}</span>          <span class="right">签发人:{{this.issuer}}</span>          <div class="line1" style="border-bottom: 2px solid #ff6600;width: 100%; margin: 3px 0;"></div>          <div class="line2" style="border-bottom: 8px solid #ff6600;width: 100%;"></div>        </div>        <div class="row content">{{textarea}}</div>        <a href="" id="imgA" title="点击下载">          <div id="downloadImg"></div>        </a>      </div>      <div class="right">        <el-button type="primary" @click="download">导出pdf</el-button>      </div>      <div id="result" style="height: 300px;"></div>    </el-dialog>

js

    download() {      var element = document.querySelector("#dialogPage")    // 这个dom元素是要导出pdf的div容器      var w = element.style.width;    // 取得该容器的宽      var h = element.style.height;    // 取得该容器的高      var offsetTop = element.offsetHeight;    // 取得该容器到文档顶部的距离      var offsetLeft = element.offsetWidth;    // 取得该容器到文档最左的距离      var canvas = document.createElement("canvas");      var abs = 0;      // var win_i = $(window).width();    // 取得当前可视窗口的宽度(不包含滚动条)      var win_i = document.body.offsetWidth;    // 取得当前可视窗口的宽度(不包含滚动条)      var win_o = window.innerWidth;    // 取得当前窗口的宽度(包含滚动条)      if (win_o > win_i) {        abs = (win_o - win_i) / 2;    // 取得滚动条长度的一半      }      canvas.width = w * 2;    // 将画布宽&&高放大两倍      canvas.height = h * 2;      var context = canvas.getContext("2d");      context.scale(2, 2);      context.translate(-offsetLeft - abs, -offsetTop);      // 这里默认横向没有滚动条的情况,由于offset.left(),有无滚动条的时候存在差值,因而              // translate的时候,要把这个差值去掉      html2canvas(element).then(canvas => {        var contentWidth = canvas.width;        var contentHeight = canvas.height;        //一页pdf显示html页面生成的canvas高度;        var pageHeight = contentWidth / 592.28 * 841.89;        //未生成pdf的html页面高度        var leftHeight = contentHeight;        //页面偏移        var position = 0;        //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高        var imgWidth = 595.28;        var imgHeight = 592.28 / contentWidth * contentHeight;        var pageData = canvas.toDataURL('image/jpeg', 1.0);        var pdf = new jsPDF('', 'pt', 'a4');        //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)        //当内容未超过pdf一页显示的范围,无需分页        if (leftHeight < pageHeight) {          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);        } else {    // 分页          while (leftHeight > 0) {            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)            leftHeight -= pageHeight;            position -= 841.89;            //避免增加空白页            if (leftHeight > 0) {              pdf.addPage();            }          }        }        let now = new Date();        // 调用全局过滤器        let date = this.$options.filters.formatdatezhSimple(now);        pdf.save(date + ' 专题报告.pdf');      })    },    handleExport1() {      this.imgDialogVisible = true;    },    openDialog() {      let htmlDom = document.querySelector('#centerPark')      html2canvas(htmlDom, {        allowTaint: false,   //允许污染        taintTest: true,    //在渲染前测试图片(没整明白有啥用)        useCORS: true,      //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)        background: "#fff",      }).then(canvas => {        // this.imgDialogVisible = true;        let img = document.querySelector('#downloadImg');        if (img.hasChildNodes()) {          var childs = img.childNodes;          for (var i = childs.length - 1; i >= 0; i--) {            img.removeChild(childs[i]);          }        }        const dataImg = new Image()        dataImg.style.height = "500px";        dataImg.style.width = "100%";        dataImg.src = canvas.toDataURL('image/png', 1.0); //将图片转为base64, 0-1 表示清晰度,得到图片的base64编码数据        document.querySelector('#downloadImg').appendChild(dataImg);        let blob_ = this.dataURLtoBlob(dataImg.src)        const alink = document.querySelector("#imgA");        alink.href = window.URL.createObjectURL(blob_);        alink.download = "map.png";        // alink.onclick = () => {        //   canvas.toBlob(function (blob) {        //     saveAs(blob, 'map.png');        //   });        // };      })    },    dataURLtoBlob(dataurl) {      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);      while (n--) {        u8arr[n] = bstr.charCodeAt(n);      }      return new Blob([u8arr], { type: mime });    },
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript 实现屏幕截图

发表回复