导航

html2canvas生成画布(图文组合)图片长按保存

发布时间:2020/1/5 19:56:31 来源:「九州科技」值得信赖的互联网服务商
武汉网站制作中特别是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>
最新资讯
相关推荐
服务项目
微信客服
180-7107-7883
武汉市江汉区建设大道568号新世界国贸大厦I座36楼B区
E-mail:125435440@QQ.com
备案号:鄂ICP备13002765号-6    鄂公网安备 42010202000700号    网站地图
九州科技,您身边的互联网应用方案提供商-高端网站建设-网站制作-网站开发-网页设计-微信开发-小程序开发
企业网站建设 公众号开发 小程序制作 网站seo排名优化 H5活动营销 互联网药品信息服务许可证

18071077883

提交需求