html2canvas生成画布（图文组合）图片长按保存_建站方案_「九州科技」值得信赖的互联网服务商

武汉网站制作中特别是h5页面经常会用到生成带有二维码、微信头像、昵称等参数的海报，这些数据需要在背景图的基础上合成，html2canvas是我们经常使用的方式。

但在使用过程中会遇到图片跨域的问题：一个解决方法就是先将远程图片保存到本地，然后再调用本地地址。


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      background: #f2f2f2;
    }
    #box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    #cBox {
      width: 80%;
      height: 60%;
      border: 1px solid #c00;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
    .img {
      max-width: 100%;
    }
    .img1 {
      height: 20%;
    }
    .img2 {
      height: 30%;
    }
    .img3 {
      height: 20%;
    }
    p {
      padding: 10px;
    }
    button {
      background-color: #ccc;
      padding: 10px 20px;
      outline: 0;
      border-radius: 6px;
      margin-top: 50px;
      color: #c00;
      font-size: 17px;
    }
    #saveImg {
      position: absolute;
      border: 1px solid #00f;
      width:80%;
      height: 60%;
      margin-top: -50px;
      opacity: 0;
    }
 
  </style>
</head>
<body>
  <div id="box">
    <div id="cBox">
      <img class="img img1" src="../imgs/20.png" alt="">
      <img class="img img2" src="../imgs/bq_60.png" alt="">
      <p>测试div保存图片功能</p>
      <img class="img img3" src="../imgs/btn_again.png" alt="">
    </div>
    <button id="btn">长按保存图片</button>
    <img id="saveImg" alt="">
  </div>
  <script type="text/javascript">
    var box = document.getElementById("box");
    var el = document.getElementById("cBox");
    var saveImg = document.getElementById("saveImg");
    var canvas = document.createElement("canvas");
    var scale = window.devicePixelRatio;
    var ctx=canvas.getContext("2d")
    var rect = el.getBoundingClientRect();  //获取元素相对于视察的偏移量
    var w = el.offsetWidth;
    var h = el.offsetHeight;
    canvas.width = w * scale;
    canvas.height = h * scale;
    canvas.style.width = w ;
    canvas.style.height = h ;
    ctx.scale(scale, scale);
    ctx.translate(-rect.left,-rect.top);    //设置context位置，值为相对于视窗的偏移量负值，让图片复位
    html2canvas(el, {
      scale: scale,
      canvas: canvas,
      width: w,
      height: h,
      logging: false,
      background: "#f2f2f2",
      useCORS: true
    }).then(function (canvas) {
      var dataUrl = canvas.toDataURL("jpeg");
      saveImg.src=dataUrl;
    });
  </script>
</body>
</html>

上一篇：网站优化中SEO修改应防止呈现敏感词与极限词

下一篇：利用canvas实现生成二维码海报，图片跨域和清晰度问题如何解决？

html2canvas生成画布（图文组合）图片长按保存

首页

关于

服务

案例

资讯

联系