js将div内所有内容转为canvas,并实现点击下载为png图片

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
  <title>Document</title>
</head>
<style>
  .box{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid lightblue;
    background: lightgoldenrodyellow;
    margin-bottom: 20px;
  }
</style>
<body>
  <div class="box">
    　　<p>这是生成图片的box，内容不限</p>
    　　<img id="ossImg" src="https://devimg.xiezixiansheng.com/users/0/1/photo/20160708035328.jpeg">
  </div>
  <button onclick="getCard()" id="save">输出canvas</button>
  <script>
    var c_width = $('.box').outerWidth();//如果box设置了padding，需要获取outerWidth和outerHeight来赋给canvas；
    var c_height = $('.box').outerHeight();

    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    //以下代码是获取根据屏幕分辨率，来设置canvas的宽高以获得高清图片
    // 屏幕的设备像素比
    var devicePixelRatio = window.devicePixelRatio || 2;

    // 浏览器在渲染canvas之前存储画布信息的像素比
    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio || 1;

    // canvas的实际渲染倍率
    var ratio = devicePixelRatio / backingStoreRatio;

    canvas.width = c_width * ratio;
    canvas.height = c_height * ratio;
    canvas.style.width = c_width + "px";
    canvas.style.height = c_height + "px";

    var transTop = $(document).scrollTop() - $('.box').offset().top;//获取div垂直方向的位置

    context.scale(ratio, ratio);
    context.translate((c_width - $(window).width()) / 2, transTop) //canvas的位置要保证与div位置相同。
    //高清图设置完成
    //解决跨域，将跨域图片路径转为base64格式
    var img = new Image();
    var canvas2 = document.createElement('canvas');
    var ctx = canvas2.getContext('2d');
    img.crossOrigin = 'Anonymous';
    img.src = $('#ossImg').attr('src');
    img.onload = function () {
      canvas2.height = img.height;
      canvas2.width = img.width;
      ctx.drawImage(img, 0, 0);
      var dataURL = canvas2.toDataURL('image/png');
      $('#ossImg').attr('src', dataURL);
      canvas2 = null;
    }

    function getCard() {
      html2canvas($(".box"), {
        allowTaint: true,
        useCORS: true,
        canvas: canvas,
        onrendered: function (canvas) {
          // document.body.appendChild(canvas);//生成和div一样的canvas元素
          var type = 'png';
          var imgData = canvas.toDataURL(type);
          var _fixType = function (type) {
            type = type.toLowerCase().replace(/jpg/i, 'jpeg');
            var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
          };
          imgData = imgData.replace(_fixType(type), 'image/octet-stream');
          var saveFile = function (data, filename) {
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = data;
            save_link.download = filename;
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
          };
          var filename = '大智云校' + '.' + type;
          if (canvas.msToBlob) {//IE9+浏览器
            var blob = canvas.msToBlob();
            window.navigator.msSaveBlob(blob, filename);
          } else {//firefox,chrome
            saveFile(imgData, filename);
          }
        },
        width: c_width,
        height: c_height
      })
    }
  </script>
</body>

</html>
啃火龙果的兔子
原创文章 65 获赞 73 访问量 7745
关注私信
js将div内所有内容转为canvas,并实现点击下载为png图片

猜你喜欢
