欢迎进入沈川超个人博客网站！沈川超个人博客为广大编程爱好者、程序员分享专业的编程知识，建议收藏一起学习。
当前位置：首页 > 博客人生 > 技术分享

文章摘要：本片文章主要讲了使用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”--“拒绝访问

点击排行

标签云