当前位置:首页 > 博客人生 > 技术分享

文章摘要:本片文章主要讲了使用js将页面里指定的div标签内容生成图片,并下载到本地的方法及源码,希望对你有所帮助哦,建议先收藏......

Asp.Net 通过dom-to-image.js将HTML中标签div内的内容转化为图片保存到本地

发布时间:2022-12-14 作者:小沈子 分类: html 生成img

最近在开发一个手机商城结算系统,需要用到推广分享海报页面,代理生成自己的分享页面保存到本地,也分享给大家:

1、引入几个JS库

①:jquery 版本还没试过我用的是1.9.1 (不贴链接了,这个要找很容易)

②:dom-to-image.js (点击下载 下载下来解压开在src目录里面)

③:FileSaver.js (点击下载 下载下来解压开在src目录里面)

2、新建HTML引入第一步中的几个库

微信图片_20221214210820.png

3、生成图片

3.1、生成png图片

<script>
var jd= document.getElementById('标签ID');
domtoimage.toPng(jd)
    .then(function (url) {<!-- -->
        var img = new Image();
        img.src = url;
        document.body.appendChild(img);
    })
    .catch(function (e) {<!-- -->
        console.log('生成图片出错', e);
    });
</script>

3.2、生成下载图片

//保存图片
$("#btnToImg").click(function () {<!-- -->
 domtoimage.toBlob(document.getElementById('chartdiv'))
 .then(function (blob) {<!-- -->
 window.saveAs(blob, 'ImgName.jpg');
 });
});

3.3、生成jpeg图片

domtoimage.toJpeg(document.getElementById('chartdiv'), {<!-- --> quality: 0.95 })
     .then(function (dataUrl) {<!-- -->
     var link = document.createElement('a');
     link.download = 'Imgname.jpeg';
     link.href = dataUrl;
     link.click();
    });

使用的额时候只要调方法就可以了    

直接贴上Demo源码:

<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/dom-to-image.js"></script>
<script src="js/FileSaver.js"></script>
</head>
<body>
<div class="col-100" id="savePoster">
  <img src="../images/rec-bg.jpg" class="img">
  <img src="../upload/202212090409407676.png" class="usertouxiang" id="usertouxiang" alt="头像">
  <div class="box">
  <div id="divCode" class="ew">
  <img src="WeixinPay/MakeQRCode.aspx?data=473_375_473" alt="">
  <a href="regist.html?id=473&amp;marketId=375&amp;organizeId=473"></a>
  </div>
  <div class="text">
  <p id="name">vinnie(1XXXXXXX554)</p>
  <p onclick="savePic(this)" style="color: #fff;background: red;margin: 0.5rem 3rem;padding: 5px 0px;border-radius: 5px;">保存该二维码</p>
  </div>
 </div>
</div>
</body>
<script type="text/javascript">
//获取当前时间格式化
function formatDate(date) {
  var year = date.getFullYear()
  var month = this.format(date.getMonth() + 1)
  var da = this.format(date.getDate())
  var h = this.format(date.getHours())
  var m = this.format(date.getMinutes())
  var s = this.format(date.getSeconds())
  return year + month + da + h + m + s;
  //return year + '-' + month + '-' + da
}
function format(val) {
  return Number(val) < 10 ? '0' + val : '' + val
  }
//保存到相册
function savePic(obj) {
  $(obj).remove();
  // 下载png图片
  domtoimage.toBlob(document.getElementById('savePoster'))
  .then(function (blob) {
  window.saveAs(blob, 'share' + formatDate(new Date()) + '.png');
  window.location.reload();
  });
}
</script>

4、效果图:

微信图片_20221214205434.pngshare20221214205346.png

5、domtoimage----将指定页面生成图片

15.1、下载jquery.min.js、dom-to-image.js、FileSaver.js

FileSaver.js文件百度网盘地址:
        链接:https://pan.baidu.com/s/1W_g2azndSt7yNqQbJGpnbQ
        提取码:iklw
dom-to-image.js文件百度网盘地址:
        链接:https://pan.baidu.com/s/1sCwDb065585DfF9GmF6zEA
        提取码:2up2

6、跨域问题

如果页面中有图片引入,那么就需要考虑跨域问题,我使用的是iis,只需要在根目录添加web.config文件即可

1.新建一个txt

2.把下面代码写入到文件里

3.文件和后缀名改成 web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="AuthToken, Content-Type, Accept, X-Requested-With" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

解决nginx跨域问题:http://www.veichao.net/contents/jishushare1308.html



上一篇: 解决nginx跨域问题


下一篇: 未能写入输出文件 “c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\6ee8fd15\5fc973dd\App_Web_default.aspx.cdcab7d2.e1voeq0d.dll”--“拒绝访问

赞助打赏

  • 支付宝扫码
  • 微信扫码