【JavaScript】------ 实现HTML背景图片文字导出生成图片(html2canvas)

1. html2canvas.min.js 下载地址:

http://www.bootcdn.cn/html2canvas/

2. modernizr-2.8.3.min.js 下载地址：http://www.bvbcode.com/cn/l85mxwts-2868363-downhttp://www.bvbcode.com/cn/l85mxwts-2868363-down

3,jquery.qrcode.js 下载地址： jquery二维码生成插件jquery.qrcode.js

HTML背景图片文字导出生成图片.zip_html图片文字混合排版-互联网文档类资源-CSDN下载1.资源内容：实现HTML（背景图片文字）导出图片并下载，代码简单可以自己修改进行完善自己的需求。html图片文字混合排版更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qq_38366657/12438912

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>html2canvas example</title><style>body,div,span{margin: 0;padding: 0;}#view{width: 900px;height: 621px;background:url(image.jpg);background-size: 100%;margin: 0px auto;}.view-fxdmc{height: 173px;text-align: center;line-height: 305px;font-weight: bold;}.view-aqbm-xm{height: 64px;line-height: 86px;}.view-aqbm-xm span{margin-left: 270px;}#qrcode{margin-top: 37px;width: 297px;height: 299px;margin-left: 89px;}.view-orgname{margin-left: 556px;margin-top: -36px;}</style>
<body><div id="view" ><div class="view-fxdmc"><span>溶剂回收储罐</span></div><div class="view-aqbm-xm"><span>安全部门</span><span>李友冰</span></div><div><div id="qrcode"><!-- <img src="qrcode_for_gh_861c8ff444de_430.jpg" id="qrcode" width="200px" height="200px"> --></div><div class="view-orgname"> 徐州易格科技有限公司</div></div></div><a href="#" class="down"  onclick="takeScreenshot()">下载</a><a href="#" class="image"download="liyoubing" ></a><!-- <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script> --><script src="html2canvas.js"></script><script src="jquery-3.3.1.min.js"></script><script src="modernizr-2.8.3.js"></script><script src="qrcode.min.js"></script></head><script type="text/javascript">//生成图片 下载function takeScreenshot(downloadName) {$("img").css("margin-top","37px");$("img").css("margin-left","89px");html2canvas(document.getElementById('view'), {onrendered: function(canvas) {var url = canvas.toDataURL();//图片地址document.querySelector(".image").setAttribute("download",downloadName);document.querySelector(".image").setAttribute('href', url);$(".image")[0].click();}});}// 设置 qrcode 参数var qrcode = new QRCode('qrcode', {text: '',width: 297,height: 299,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H});//数据var datalist=[{cname:"溶剂储罐",dptname:"安全部门",uname:"李**",erweima:"qrcode_for_gh_861c8ff444de_430.jpg",orgname:"徐州易格科技有限公司"},{cname:"蒸馏反应釜",dptname:"安全部门1",uname:"李*冰1",erweima:"qrcode_for_gh_861c8ff444de_430.jpg",orgname:"徐州易格科技有限公司1"},{cname:"有机废水处理设施",dptname:"安全部门2",uname:"李*冰2",erweima:"qrcode_for_gh_861c8ff444de_430.jpg",orgname:"徐州易格科技有限公司2"}]for(var i=0;i<datalist.length;i++){$(".view-fxdmc").find("span").text(datalist[i]["cname"]);$(".view-aqbm-xm").find("span:nth-of-type(1)").text(datalist[i]["dptname"]);$(".view-aqbm-xm").find("span:nth-of-type(2)").text(datalist[i]["uname"]);$(".view-orgname").text(datalist[i]["orgname"]);var href=datalist[i]["erweima"];qrcode.clear();qrcode.makeCode(href);var downloadName=datalist[i]["cname"];takeScreenshot(downloadName);}$("img").css("margin-left","0px");</script>
</body></html>

2.效果图（根据示例情况自己修改维护）

【JavaScript】------ 实现HTML背景图片文字导出生成图片(html2canvas)相关推荐

bootstrap之背景图片+文字2
一 .效果如下技术要点: 1.背景图片拉伸 background-repeat: no-repeat; background-size: cover; 2.文字居中 text-align: ce ...
js实现登录页面的背景图片的随机展示
####js代码如下: <script type="text/javascript">// 随机展示背景图片 var imgSrcs = [ "${ctx}/ ...
前端合成二维码与背景图片，批量导出ZIP下载
前端合成二维码与背景图片,批量导出ZIP下载背景:需要生成很多的二维码,并且结合背景图片一起生成图片,批量下载到本地,提供给打印厂商进行打印. 方案1:后台合成,后台提供下载. 方案2:前端合成,前 ...
php背景图添加字,怎样给视频后面加背景图视频加背景图片并添加一行广告文字...
有不少广告小视频中,视频画面是一张海报背景图片,图片上显示一个小视频播放,并且在画面上还有显示一行广告字幕.这样的宣传视频制作其实蛮简单的,怎样给视频后面加背景图片的方法倒是挺多,要给视频加背景图片的 ...
在图片上添加文字并生成图片
在图片上添加文字并生成图片开发工具与关键技术:Visual Studio 2015 作者:李德新撰写时间:2019年6月04日在我们的日常生活中,我们经常能看到各样格式的表单,而且有时候我们还要 ...
文字溢出处理，背景图片处理，企业开发经验
2020年2月27日,今天是阴天!一上午学了一点前端理论,打算先把知识汇总一下,然后把昨天写的抓包tcp修改一下. (一) 文字溢出处理单行文本与多行文本的情况,然后我们看一下百度的处理代码. 都是 ...
html 文字在背景图片上,如何让文字作为CSS背景图片显示
在实际开发中,有时候希望文字内容可以作为背景图片显示,一方面是希望利用背景图片的优势,例如可以平铺,另外一方面是常见的替换元素不能使用伪元素创建文字,此时只能寄希望与背景图. 关键如何把文字变成背景图 ...
php将二维码和文字结合到一个背景图片上,合成一张图
将二维码生成到背景图片上,并且文字生成到背景图上,可以无限制扩增 1.生成前的图片生成后的图片 class codeImg {private $date,$img,$main,$width,$ ...
点击文字改变背景图片
点击文字改变背景图片首先看看效果图这个项目的实现的效果主要是应用了JavaScript的点击事件触发了函数,改变了,背景的图片. 主要应用了点击事件onclick点击事件触发了函数. onclic ...

【JavaScript】------ 实现HTML背景图片文字导出生成图片(html2canvas)

【JavaScript】------ 实现HTML背景图片文字导出生成图片(html2canvas)相关推荐

最新文章

热门文章