html2canvas.js----html网页指定div保存为图片canvas

不念不忘少年蓝@ 2022-12-17 00:29 240阅读 0赞

## 1、使用到的插件:html2canvas.js ##

[html2canvas官方网站][html2canvas]

## 2、使用： ##

html2canvas(document.getElementById("saveWrapX"),{ 
          scale:1,
          allowTaint:true,//允许跨域图像渲染画布
          proxy:''//代理网址，用于加载跨域图片
        }).then(function(canvas) { 
          console.log('保存div为图片的base64',canvas.toDataURL())
          $('#saveWrapX').append(canvas)
        });

## 3、完整例子（点击图片可生成红色圆圈，可拖动可删除，点击生成图片按钮，即可在body追加canvas标签）： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>html网页指定div保存为图片canvas</title>
      <style>
        .container{ 
          width: 500px;
          margin: 0 auto;
        }
        #saveWrapX{ 
          overflow: hidden;
        }
        .circleTips{ 
          width: 50px;
          height: 50px;
          border-radius: 100%;
          border: 5px solid red;
        }
        .actionDel{ 
          background-color: #454a4a;
          position: absolute;
          display: none;
          width: 40px;
          cursor: default;
          text-align: center;
          font-size: 12px;
          color: white;
          padding: 5px;
        }
        </style>
    </head>
    <body>
    <div class="container">
      <button onclick=" saveImg()">生成图片</button>
      <div id="saveWrapX" style="position: relative">
        <img src="./imges/testImg1.PNG" draggable="false" style="width: 100%;vertical-align: middle" alt="图片">
      </div>
    </div>
    
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
    <script src="./js/html2canvas.js"></script>
    <script>
      function saveImg(){ 
        html2canvas(document.getElementById("saveWrapX"),{ 
          scale:1,
          allowTaint:true,//允许跨域图像渲染画布
          proxy:''//代理网址，用于加载跨域图片
        }).then(function(canvas) { 
          $('body').append(canvas)
          console.log('div保存图片的base64',canvas.toDataURL())
        });
      }
      function move() { 
        let _move=false;//移动标记
        let _x,_y;//鼠标离控件左上角的相对位置
        let _this
        $(".circleTips").on('mousedown',function(e){ 
          e.stopPropagation();
          _this=$(this)
          _move=true;
          _x=e.pageX-parseInt(_this.css("left"));
          _y=e.pageY-parseInt(_this.css("top"));
        });
        $('#saveWrapX').on('mousemove',function(e){ 
          e.stopPropagation();
          if(_move){ 
            let x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
            let y=e.pageY-_y;
            _this.css({ top:y,left:x});//控件新位置
          }
        }).on('mouseup',function(e){ 
          e.stopPropagation();
          _move=false;
        });
      }
      function isShowDelButton() { 
        $(".circleTips").on("contextmenu", function(){ //阻止鼠标右击默认事件
          return false;
        })
        $(".circleTips").on('mousedown',function(e) { 
          e.stopPropagation();
          let top=e.offsetY
          let left=e.offsetX
          //右键为3，左键为1
          if (3 == e.which) { 
            $(this).find('.actionDel').css({ 
              display: "block",
              top:top,
              left:left
            });
          }else if (1 == e.which) { 
            $(this).find('.actionDel').css({ 
              display: "none"
            });
          }
        })
      }
      function delCircle() { 
        $('.actionDel').on('mousedown',function (e) { 
          e.stopPropagation();
          $(this).parent('.circleTips').remove();
        })
      }
      let offsetX,offsetY;
      $('#saveWrapX').on('mousemove',function (e) { 
        e.stopPropagation();
        let X=$('#saveWrapX').offset().left
        let Y=$('#saveWrapX').offset().top
        offsetX=e.pageX-X
        offsetY=e.pageY-Y
      })
      $('#saveWrapX').on('mousedown',function (e) { 
        e.stopPropagation();
        let creatDom='<div class="circleTips" style="position: absolute;cursor: move;top: '+(offsetY-30)+'px;left: '+(offsetX-30)+'px">' +
            '<span class="actionDel" style="">删除</span>' +
            '</div>'
        $(this).append(creatDom)
        move();
        isShowDelButton();
        delCircle();
      })
    
    </script>
    </body>
    </html>

## 4、效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70_pic_center]

[html2canvas]: http://html2canvas.hertzen.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4b39af1bfaea42d585819691a7f86887.png