HTML内容生成图片（不需要canvas画图）

立即下载用AI写一个

发布时间：2021-11-18

4人 | 浏览：4327次 | 收藏 |

技术：HTML,JS

运行环境：主流浏览器

概述

指定任何一个div内的内容，生成图片。

详细

> 记得把这几点描述好咯：需求（要做什么） + 代码实现过程 + 项目文件结构截图 + 演示效果

### 需求：
#####直接web或者h5页面生成图片。

### 描述：
比如图片X轴翻转、Y轴翻转、文字，使用PHP或html2canva，定义有些局限，只要样式能呈现的，domtoimg都可以画出，相对前端开发者方便使用。

### 代码结构：
![](/contentImages/image/20211111/DaXbJtdD1ikiKn1545C.png)

### 程序实现：
#####1、JS
引入2个js：

```javascript
<script type="text/javascript" src="assets/js/filesaver.js"></script>
<script type="text/javascript" src="assets/js/domtoimage.js"></script>
```
#####2、HTML

```html
<div id="J-imgbox" class="m-content">
	<div class="mirror mirror-top" style="background: url('assets/img/ex.png') left 0 no-repeat;"></div>
	<div class="mirror mirror-left" style="background: url('assets/img/ex.png') 0 0 no-repeat;"></div>
	<div class="mirror mirror-right" style=" background: url('assets/img/ex.png') right 0 no-repeat;"></div>
	<div class="pic" style="background: url('assets/img/ex.png') 0 0 no-repeat;"></div>
	<div class="mirror mirror-bottom" style="background: url('assets/img/ex.png') 0 bottom no-repeat;"></div>
	<p class="txt">文字文字文字文字文字文字文字</p>
</div>
	
<div class="creat-img" onclick="creatImg()">生成图片</div>
```

#####3、点击事件

```javascript

<script type="text/javascript">
	
	function creatImg(){
        domtoimage.toBlob(document.getElementById('J-imgbox')).then(function (blob) {
        	console.log(blob);
              window.saveAs(blob,'demo.png');
          });

}
</script>
```
#####4、CSS

```css
.m-content{ width: 800px; height: 800px; background:#ffecda;position:relative; overflow: hidden;}

/*中间主图*/
.m-content .pic{width: 500px;height:500px; position: absolute; left:150px; top:150px;}

.m-content .mirror{position: absolute;  }
/*上下左右镜像*/
.m-content .mirror-top{width: 500px; height:100px;  left:150px; top:50px; transform: rotateX(180deg); }
.m-content .mirror-left{width: 100px; height:500px;  left:50px; top:150px; transform: rotateY(180deg); }
.m-content .mirror-right{width: 100px; height:500px;  right:50px; top:150px; transform: rotateY(180deg);}
.m-content .mirror-bottom{width: 500px; height: 100px;  left:150px; bottom:50px; transform: rotateX(180deg);}
.m-content .txt{text-align: center; position: absolute; bottom:0px; left: 0; width: 100%; font-size: 20px;}
/*按钮*/
.creat-img{ width: 200px; text-align: center; line-height: 40px; background:#878ecd;color: #ffffff; margin: 10px 0 0 300px; cursor: pointer;}
```

### 运行效果：
![](/contentImages/image/20211111/hRgeJWeGbbjiVQziJoz.gif)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

HTML内容生成图片（不需要canvas画图）

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子