zoukankan      html  css  js  c++  java
  • vue html2canvas 实现截图功能

    前几天公司项目里有这样一个需求,进入网页可以整个拍照,就想到了整个截图,生成的图片结合文字,二维码再次生成截图。好,废话不多说了。直接上逻辑和代码。'

    这个问题的解决方案:html to canvas to png.
    目前有一个这样的插件: html2canvas,

    gitHub:https://github.com/niklasvh/html2canvas

    <div>
        <div class="rankWrap reg-main RegMain" id="RegMain">
          <div id="picMain">
            <img class="bg" id="bg" style="100%;height:100%;" :src="imagesPath+'/2021/images/map/map_img3.jpg'"/>
          </div>
          <!-- 拍照 -->
          <img class="bg" id="tupian" style="100%;height:100%;" :src="picUrl"/>
          <img class="pic" @click="chanPic" :src="imagesPath+'/2021/images/map/map_img2.png'"/>
        </div>
      </div>
    

      

    var that = this;
            let shareContent = document.getElementById('picMain');
            html2canvas(shareContent,{
              logging: false, //日志开关,便于查看html2canvas的内部执行流程
               shareContent.clientWidth, //dom 原始宽度
              height: shareContent.clientHeight,
              scrollY: 0, 
              scrollX: 0,
              useCORS: true
            }).then(function(canvas){
              let imgUrl =  canvas.toDataURL('image/' + "jpg");
              document.getElementById("RegMain").style.transform = `rotate(90deg)`;
              that.picUrl = imgUrl
              that.shareData = {
                url: imgUrl
              }
              that.show = true;
           });
    

      

  • 相关阅读:
    安装Hadoop单机版
    Linux的en33没有IP地址
    idea导入spring源码
    CSS 选择器之基础选择器
    CSS 简介和代码风格
    JavaScript 中 双感叹号 !! 的作用
    VS Code 中的settings.js 配置
    项目中使用 vuex 实现(状态)数据共享
    VS Code 相关设置
    Node.js 的简单了解
  • 原文地址:https://www.cnblogs.com/douyage/p/14542985.html
Copyright © 2011-2022 走看看