html2Canvas截取h5网页生成图片模糊问题

需求:h5长页面生成图片
问题:html2Canvas生成的图模糊问题
image.png
image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="baidu-site-verification" content="J0n5tbab1c" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="Copyright" content="Tencent">
    <meta name="format-detection" content="telephone=no">
    <title>合成图片并保存</title>
    <!-- <link rel="stylesheet" href="../css/index.css">
    <script src="../js/adaptive.js"></script> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            position: relative;
        }
        #wrap{
            height: 100%;
            background: seashell;
            text-align: center;
            padding-top: 20px;
            position: fixed;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        #capture{
            width: 80%;
            height: 70%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 15px;
            border: 5px solid #ffffff;
            display: none;
            z-index: 999;
            overflow:scroll;
        }

        #capture img{
            width: 100%;
        }
        h3,p{
            margin-top: 8px;
        }

        #saveImg{
            appearance: none;
            position: absolute;
            bottom: 50px;
            z-index: 888;
            width: 150px;
            height: 30px;
            line-height: 30px;
            border-radius: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: orange;
            color: #ffffff;
        }

        #wrap img{
            width: 80%;
            text-align: center;
        }
        .log{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 33;
            background: rgba(0, 0, 0, .8);
            display: none;
        }

        #hidden_wrap{
            position: absolute;
            z-index: -10;
            overflow: scroll;

        }
        #hidden_wrap #wrap{
            position: relative;
            overflow: auto;
        }

        #capture .close{
            display: inline-block;
            position: absolute;
            border: 1px solid #ffff;
            color: #ffffff;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            top: -30px;
            right: -5px;
        }
    </style>
</head>

<body>
    <div class="log">
            </div>
    <div id="wrap">
        <h4>家乡的茶园开满花</h4>
        <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
        <img src="./a.jpg" alt="">
        <h4>家乡的茶园开满花</h4>
        <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
        <img src="./b.png" alt="">
        <h4>家乡的茶园开满花</h4>
        <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
        <img src="./c.png" alt="">
        <h4>家乡的茶园开满花</h4>
        <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
        <img src="./a.jpg" alt="">
        <h4>家乡的茶园开满花</h4>
        <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
        <img src="./a.jpg" alt="">
        <h4>家乡的茶园开满花</h4>
        <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
        <img src="./a.jpg" alt="">
         <!-- 合成并保存 -->   
    </div>
    <button  id="saveImg">合成并保存</button>
    <div id="hidden_wrap"></div>

   


    <div id="capture">
        <span class="close">X</span>
        <img src="" alt="" class="copyImage">
    </div>
    <!-- <script src="js/jquery-3.2.1.min.js"></script>
  <script src="./html2canvas.min.js"></script> -->

  <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- <a id="dl-hidden"  download="合成图.png" href=""></a> -->
    <script>
        // 加载即克隆,克隆完截图赋值,移除克隆元素,点击展示图片
        window.onload = function(){
        var IMAGE_URL;
        $('#wrap').clone().appendTo($('#hidden_wrap'));
        takeScreenshot();
        $('#hidden_wrap #wrap').remove();
        function takeScreenshot(){
            var shareContent = document.getElementById('hidden_wrap');//需要截图的包裹的(原生的)DOM 对象
            // var shareContent = document.getElementsByClassName('page-1')[0];
            var width = shareContent.offsetWidth; //获取dom 宽度
            var height = shareContent.offsetHeight; //获取dom 高度
            console.log('分享元素',$('#hidden_wrap #wrap').height());
            
            console.log('分享元素宽度',width);
            console.log('分享元素高度',height);
            var canvas = document.createElement("canvas"); //创建一个canvas节点

            var scale = 1; //定义任意放大倍数 支持小数
            canvas.width = width * scale; //定义canvas 宽度 * 缩放
            canvas.height = height * scale; //定义canvas高度 *缩放
            canvas.getContext("2d").scale(scale,scale); //获取context,设置scale

            // var rect = shareContent.getBoundingClientRect();//获取元素相对于视察的偏移量
            // canvas.getContext("2d").translate(-rect.left,-rect.top);//设置context位置,值为相对于视窗的偏移量负值,让图片复位
            var opts = {
                scale:scale, // 添加的scale 参数
                canvas:canvas, //自定义 canvas
                logging: true, //日志开关
                width:width, //dom 原始宽度
                height:height, //dom 原始高度
                allowTaint:true,
                logging:true,
                backgroundColor: 'transparent',
            };
            html2canvas(shareContent, opts).then(function (canvas) {
                IMAGE_URL = canvas.toDataURL("image/png");
                $('.copyImage').attr('src',IMAGE_URL);
                // $('#hidden_wrap').css('overflow','hidden');
            })
        }

        function 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 })
        }

        function downloadBase64(dataUrl, filename) {
            var imageFile, href
            // const downloadLink = document.createElement('a')
            var downloadLink = document.getElementById('dl-hidden')
            try {
                var blob = dataURLtoBlob(dataUrl)
                    var href = window.URL.createObjectURL(blob)
                    downloadLink.download = filename
                    downloadLink.href = href
                    downloadLink.click()
            } catch (err) {
            } finally {
                if (href) {
                    window.URL.revokeObjectURL(href)
                }
                // downloadLink.remove()
            }
        }

                // $(".letter-title").text(new Date().toLocaleString());
                $('#saveImg').on('click',function(){
                    // takeScreenshot();
                    $('#capture').show();
                    $('.log').show();
                    $(this).text('长按上图保存图片');
                })
                // var curStyle=0;
                // $("#change-style").click(function(e){
                //         takeScreenshot();
                //         if(curStyle==0){
                //                 $(".letter-content").attr("style","opacity:0.8;");
                //                 $(".letter-bg").attr("style","border-radius:50px;");
                //                 $("#change-style").text("普通");
                //                 curStyle=1;
                //         }else{
                //                 $(".letter-content").attr("style","opacity:1;");
                //                 $(".letter-bg").attr("style","border-radius:0;");
                //                 $("#change-style").text("圆角透明");
                //                 curStyle=0;
                //         }
                // })
                // $("#save-local").click(function(e){
                //         downloadBase64(IMAGE_URL, '合成图.png')
                // })
    }

    </script>
</body>

</html>
阅读 928
评论
    2 个回答
    • 98

    html2Canvas只能截取浏览器的可视区域.
    可以将截取区域页面用Canvas实现. 或者clone一份要截取的dom 放到可视区域里 然后再截取.

      截取代码参考自:https://wendychengc.github.io...
      可视区域解决方案参考自:https://www.2cto.com/kf/20161...

      关于截取只截取到可视区域的解决方案:
      根据上述可视区域解决方案,将要截取的dom元素复制一个放在一个z-index层级最小的<div id="hidden_wrap"></div>中,在onload之后就可以clone过去,我之前在点击按钮截取的时候克隆元素会出现#hidden_wrap的高度并非其最终高度,导致只截取了可视区域。
      错误写法:

        window.onload = function(){
              var IMAGE_URL;
              function takeScreenshot(){
                  $('#wrap').clone().appendTo($('#hidden_wrap'));
                  ...
                  ...
      

      正确写法:

       window.onload = function(){
              var IMAGE_URL;
              $('#wrap').clone().appendTo($('#hidden_wrap'));
              function takeScreenshot(){
                  ...
                  ...

      完整代码(已解决截取区域问题,未解决模糊问题):

      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
          <meta name="baidu-site-verification" content="J0n5tbab1c" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
          <meta name="apple-mobile-web-app-capable" content="yes">
          <meta name="apple-mobile-web-app-status-bar-style" content="black">
          <meta name="Copyright" content="Tencent">
          <meta name="format-detection" content="telephone=no">
          <title>合成图片并保存</title>
          <!-- <link rel="stylesheet" href="../css/index.css">
          <script src="../js/adaptive.js"></script> -->
          <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              html,body{
                  height: 100%;
                  position: relative;
              }
              #wrap{
                  height: 100%;
                  background: seashell;
                  text-align: center;
                  padding-top: 20px;
                  position: fixed;
                  overflow-y: scroll;
                  overflow-x: hidden;
              }
              #capture{
                  width: 80%;
                  height: 70%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%,-50%);
                  border-radius: 15px;
                  border: 5px solid #ffffff;
                  display: none;
                  z-index: 999;
                  overflow:scroll;
              }
      
              #capture img{
                  width: 100%;
              }
              h3,p{
                  margin-top: 8px;
              }
      
              #saveImg{
                  appearance: none;
                  position: absolute;
                  bottom: 50px;
                  z-index: 888;
                  width: 150px;
                  height: 30px;
                  line-height: 30px;
                  border-radius: 30px;
                  left: 50%;
                  transform: translateX(-50%);
                  background: orange;
                  color: #ffffff;
              }
      
              #wrap img{
                  width: 80%;
                  text-align: center;
              }
              .log{
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 33;
                  background: rgba(0, 0, 0, .8);
                  display: none;
              }
      
              #hidden_wrap{
                  position: absolute;
                  z-index: -10;
                  overflow: scroll;
      
              }
              #hidden_wrap #wrap{
                  position: relative;
                  overflow: auto;
              }
      
              #capture .close{
                  display: inline-block;
                  position: absolute;
                  border: 1px solid #ffff;
                  color: #ffffff;
                  border-radius: 50%;
                  width: 25px;
                  height: 25px;
                  top: -30px;
                  right: -5px;
              }
          </style>
      </head>
      
      <body>
          <div class="log">
                  </div>
          <div id="wrap">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./a.jpg" alt="">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./b.png" alt="">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./c.png" alt="">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./a.jpg" alt="">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./a.jpg" alt="">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./a.jpg" alt="">
               <!-- 合成并保存 -->   
          </div>
          <button  id="saveImg">合成并保存</button>
          <div id="hidden_wrap"></div>
      
         
      
      
          <div id="capture">
              <span class="close">X</span>
              <img src="" alt="" class="copyImage">
          </div>
          <!-- <script src="js/jquery-3.2.1.min.js"></script>
        <script src="./html2canvas.min.js"></script> -->
      
        <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
          <!-- <a id="dl-hidden" style="display:none;" download="合成图.png" href=""></a> -->
          <script>
              // 加载即克隆,克隆完截图赋值,移除克隆元素,点击展示图片
              window.onload = function(){
              var IMAGE_URL;
              $('#wrap').clone().appendTo($('#hidden_wrap'));
              takeScreenshot();
              $('#hidden_wrap #wrap').remove();
              function takeScreenshot(){
                  var shareContent = document.getElementById('hidden_wrap');//需要截图的包裹的(原生的)DOM 对象
                  // var shareContent = document.getElementsByClassName('page-1')[0];
                  var width = shareContent.offsetWidth; //获取dom 宽度
                  var height = shareContent.offsetHeight; //获取dom 高度
                  console.log('分享元素',$('#hidden_wrap #wrap').height());
                  
                  console.log('分享元素宽度',width);
                  console.log('分享元素高度',height);
                  var canvas = document.createElement("canvas"); //创建一个canvas节点
      
                  var scale = 1; //定义任意放大倍数 支持小数
                  canvas.width = width * scale; //定义canvas 宽度 * 缩放
                  canvas.height = height * scale; //定义canvas高度 *缩放
                  canvas.getContext("2d").scale(scale,scale); //获取context,设置scale
      
                  // var rect = shareContent.getBoundingClientRect();//获取元素相对于视察的偏移量
                  // canvas.getContext("2d").translate(-rect.left,-rect.top);//设置context位置,值为相对于视窗的偏移量负值,让图片复位
                  var opts = {
                      scale:scale, // 添加的scale 参数
                      canvas:canvas, //自定义 canvas
                      logging: true, //日志开关
                      width:width, //dom 原始宽度
                      height:height, //dom 原始高度
                      allowTaint:true,
                      logging:true,
                      backgroundColor: 'transparent',
                  };
                  html2canvas(shareContent, opts).then(function (canvas) {
                      IMAGE_URL = canvas.toDataURL("image/png");
                      $('.copyImage').attr('src',IMAGE_URL);
                      // $('#hidden_wrap').css('overflow','hidden');
                  })
              }
      
              function 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 })
              }
      
              function downloadBase64(dataUrl, filename) {
                  var imageFile, href
                  // const downloadLink = document.createElement('a')
                  var downloadLink = document.getElementById('dl-hidden')
                  try {
                      var blob = dataURLtoBlob(dataUrl)
                          var href = window.URL.createObjectURL(blob)
                          downloadLink.download = filename
                          downloadLink.href = href
                          downloadLink.click()
                  } catch (err) {
                  } finally {
                      if (href) {
                          window.URL.revokeObjectURL(href)
                      }
                      // downloadLink.remove()
                  }
              }
      
                      // $(".letter-title").text(new Date().toLocaleString());
                      $('#saveImg').on('click',function(){
                          // takeScreenshot();
                          $('#capture').show();
                          $('.log').show();
                          $(this).text('长按上图保存图片');
                      })
                      // var curStyle=0;
                      // $("#change-style").click(function(e){
                      //         takeScreenshot();
                      //         if(curStyle==0){
                      //                 $(".letter-content").attr("style","opacity:0.8;");
                      //                 $(".letter-bg").attr("style","border-radius:50px;");
                      //                 $("#change-style").text("普通");
                      //                 curStyle=1;
                      //         }else{
                      //                 $(".letter-content").attr("style","opacity:1;");
                      //                 $(".letter-bg").attr("style","border-radius:0;");
                      //                 $("#change-style").text("圆角透明");
                      //                 curStyle=0;
                      //         }
                      // })
                      // $("#save-local").click(function(e){
                      //         downloadBase64(IMAGE_URL, '合成图.png')
                      // })
          }
      
          </script>
      </body>
      
      </html>

      完整方案:

      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
          <meta name="baidu-site-verification" content="J0n5tbab1c" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
          <meta name="apple-mobile-web-app-capable" content="yes">
          <meta name="apple-mobile-web-app-status-bar-style" content="black">
          <meta name="Copyright" content="Tencent">
          <meta name="format-detection" content="telephone=no">
          <title>合成图片并保存</title>
          <!-- <link rel="stylesheet" href="../css/index.css">
          <script src="../js/adaptive.js"></script> -->
          <style>
              * {
                  margin: 0;
                  padding: 0;
              }
      
              html,
              body {
                  height: 100%;
                  position: relative;
              }
      
              #wrap {
                  height: 100%;
                  background: seashell;
                  text-align: center;
                  padding-top: 20px;
                  position: fixed;
                  overflow-y: scroll;
                  overflow-x: hidden;
              }
      
              h3,
              p {
                  margin-top: 8px;
              }
      
              #saveImg {
                  appearance: none;
                  position: absolute;
                  bottom: 50px;
                  z-index: 888;
                  width: 150px;
                  height: 30px;
                  line-height: 30px;
                  border-radius: 30px;
                  left: 50%;
                  transform: translateX(-50%);
                  background: orange;
                  color: #ffffff;
              }
      
              #wrap img {
                  width: 80%;
                  text-align: center;
              }
      
              .log {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 33;
                  background: rgba(0, 0, 0, .8);
                  display: none;
              }
      
              #capture {
                  width: 80%;
                  height: 70%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  border-radius: 15px;
                  border: 5px solid #ffffff;
                  /* display: none; */
                  z-index: 999;
                  overflow: scroll;
                  font-size: 0;
              }
      
              #capture img {
                  width: 100%;
              }
      
              .close {
                  display: inline-block;
                  position: absolute;
                  border: 1px solid #ffff;
                  color: #ffffff;
                  border-radius: 50%;
                  width: 25px;
                  height: 25px;
                  top: 9%;
                  right: 9%;
                  text-align: center;
                  line-height: 25px;
              }
      
              #hidden_wrap {
                  position: absolute;
                  z-index: -10;
                  overflow: scroll;
      
              }
      
              #hidden_wrap #wrap {
                  position: relative;
                  overflow: auto;
              }
              .load::before,.load::after{
                  content: '';
              }
              .load, .load::before,.load::after{
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%,-50%);
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background: #ffffff;
                  animation: rotateCircle  1s ease-in-out infinite;
                  /* transition: all 1s ease-in-out 2s; */
              }
              .load::before{
                  margin-left: -15px;
                  animation-delay: 0.5s;
              }
              .load::after{
                  margin-left: 15px;
                  animation-delay: 1.5s;
      
              }
              .load{
                  animation-delay: 1s;
              }
             
              
              @keyframes rotateCircle{
                  0%{
                      /* transform: rotate(0); */
                      background: rgba(255, 255, 255, .6);
                  }
                 100%{
                      /* transform: rotate(360deg); */
                      background: rgba(255, 255, 255);
                  }
              }
          </style>
      </head>
      
      <body>
      
          <div id="wrap">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./a.jpg" alt="">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./b.png" alt="">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./c.png" alt="">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./a.jpg" alt="">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./a.jpg" alt="">
              <h4>家乡的茶园开满花</h4>
              <p>夜夜想起妈妈的话 闪闪的泪光鲁冰花</p>
              <img src="./a.jpg" alt="">
              <!-- 合成并保存 -->
          </div>
          <button id="saveImg">生成图片</button>
          <div id="hidden_wrap"></div>
      
      
      
          <div class="log">
              <div id="capture">
                  <span class="load"></span>
                  <img src="" alt="" class="copyImage">
              </div>
              <span class="close">X</span>
      
          </div>
      
          <!-- <script src="js/jquery-3.2.1.min.js"></script>
        <script src="./html2canvas.min.js"></script> -->
      
          <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
          <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
          <!-- <a id="dl-hidden" style="display:none;" download="合成图.png" href=""></a> -->
          <script>
              // 加载即克隆,克隆完截图赋值,移除克隆元素,点击展示图片
              window.onload = function () {
                  var IMAGE_URL;
                  // $('#wrap').clone().appendTo($('#hidden_wrap'));
                  // takeScreenshot();
                  // $('#hidden_wrap #wrap').remove();
      
                  function takeScreenshot() {
                      var shareContent = document.getElementById('hidden_wrap'); //需要截图的包裹的(原生的)DOM 对象
                      // var shareContent = document.getElementsByClassName('page-1')[0];
                      var width = shareContent.offsetWidth; //获取dom 宽度
                      var height = shareContent.offsetHeight; //获取dom 高度
                      console.log('分享元素', $('#hidden_wrap #wrap').height());
      
                      console.log('分享元素宽度', width);
                      console.log('分享元素高度', height);
                      var canvas = document.createElement("canvas"); //创建一个canvas节点
      
                      var scale = 2; //定义任意放大倍数 支持小数
                      canvas.width = width * scale; //定义canvas 宽度 * 缩放
                      canvas.height = height * scale; //定义canvas高度 *缩放
                      var context = canvas.getContext("2d");
                      // context.scale(scale,scale); //获取context,设置scale
      
                      var opts = {
                          // dpi: window.devicePixelRatio*2,
                          scale: scale, // 添加的scale 参数
                          canvas: canvas, //自定义 canvas
                          logging: true, //日志开关
                          width: width, //dom 原始宽度
                          height: height, //dom 原始高度
                          backgroundColor: 'transparent',
                      };
                      html2canvas(shareContent, opts).then(function (canvas) {
                          IMAGE_URL = canvas.toDataURL("image/png");
                          $('.copyImage').attr('src', IMAGE_URL);
                          // $('#hidden_wrap').css('overflow','hidden');
                      })
                  }
      
                  function 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
                      })
                  }
      
                  function downloadBase64(dataUrl, filename) {
                      var imageFile, href
                      // const downloadLink = document.createElement('a')
                      var downloadLink = document.getElementById('dl-hidden')
                      try {
                          var blob = dataURLtoBlob(dataUrl)
                          var href = window.URL.createObjectURL(blob)
                          downloadLink.download = filename
                          downloadLink.href = href
                          downloadLink.click()
                      } catch (err) {} finally {
                          if (href) {
                              window.URL.revokeObjectURL(href)
                          }
                          // downloadLink.remove()
                      }
                  }
      
                  // $(".letter-title").text(new Date().toLocaleString());
                  $('#saveImg').on('click', function () {
                      $('#capture img').attr('src','');
                      $('.load').show();
                      $('.log').show();
                      $('#wrap').clone().appendTo($('#hidden_wrap'));
                      let time = setInterval(() => {
                          if (!$('#hidden_wrap wrap').is('hidden')) {
                              clearInterval(time);
                              takeScreenshot();
                              $('#hidden_wrap #wrap').remove();
                          }
                      }, 800);
                  });
      
                  $('#capture img').on('load',function(){
                      $('.load').hide();
                       $('#saveImg').text('长按上图保存图片');
                      console.log('生成图加载成功');
                  })
      
                  $('.close').on('touchend', function () {
                      $('.log').hide();
                      $('#saveImg').text('生成图片');
      
                  })
                  // var curStyle=0;
                  // $("#change-style").click(function(e){
                  //         takeScreenshot();
                  //         if(curStyle==0){
                  //                 $(".letter-content").attr("style","opacity:0.8;");
                  //                 $(".letter-bg").attr("style","border-radius:50px;");
                  //                 $("#change-style").text("普通");
                  //                 curStyle=1;
                  //         }else{
                  //                 $(".letter-content").attr("style","opacity:1;");
                  //                 $(".letter-bg").attr("style","border-radius:0;");
                  //                 $("#change-style").text("圆角透明");
                  //                 curStyle=0;
                  //         }
                  // })
                  // $("#save-local").click(function(e){
                  //         downloadBase64(IMAGE_URL, '合成图.png')
                  // })
              }
          </script>
      </body>
      
      </html>
        撰写回答

        登录后参与交流、获取后续更新提醒

        相似问题
        推荐文章