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

正在加载···

AI摘要

HunYuan-Lite

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

1、引入几个JS库

：jquery 版本还没试过我用的是1.9.1 （不贴链接了，这个要找很容易）
：dom-to-image.js （点击下载下载下来解压开在src目录里面）
：FileSaver.js （点击下载下载下来解压开在src目录里面）

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

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

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、效果图：

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

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

5.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文件即可

新建一个txt
把下面代码写入到文件里
文件和后缀名改成 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>