版权声明:菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/82344490
- -----最近一位朋友的项目有个需求,是用户可以在项目中点击,让html页面生成图片,并且可以导出下载。我就做了一个简单的例子,有同样需求或者感兴趣的同行可以看看
//HtML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>菜鸟老五</title> <link rel="stylesheet" href="css/mui.css" /> <link rel="stylesheet" href="css/mui.min.css" /> <!-- html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来 --> <script src="js/html2canvas.min.js"></script> <!-- 将canvas图片保存成图片 --> <script src="js/canvas2image.js"></script> <script src="js/base64.js"></script> <style> /*清除padding-margin*/ body { margin: 0 auto; padding: 0; } /*主体外层视图*/ #content { width: 100%; height: 100px; position: relative; background-color: #fff; } /*左头像*/ .list_img { position: absolute; width: 60px; height: 60px; top: 25px; left: 15px; border-radius: 50%; } /*左边消息气泡*/ .left_name { color: green; border: 1px solid gray; border-radius: 3px; text-align: center; position: absolute; top: 35px; left: 100px; padding: 5px; } /*底部视图*/ .sumits_view { position: fixed; width: 100%; height: 50px; line-height: 50px; bottom: 0; background-color: #333333; } /*点击下载*/ #Download { position: absolute; width: 50%; height: 50px; border: 0; border-radius: 0; right: 0px; background-color: #2AC845; } /*点击转化*/ #btnSave { position: absolute; left: 0; border: 0; border-radius: 0; width: 50%; display: inline-block; height: 50px; background-color: #007AFF; } </style> </head> <body> <!--标题栏--> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">首页</h1> </header> <!--主体--> <div class="mui-content"> <!--内容--> <div id="content"> <!--左边头像--> <img class="list_img" src="img/list_img.png" /> <!--左边消息--> <span class="left_name">He</span> </div> <!--这里的div[images]指的是转化图片显示位置--> <div id="images"></div> <!--底部--> <div class="sumits_view"> <!--左边button点击--> <button id="btnSave">点击转换成图片</button> <!--右边button点击--> <button id="Download">点击下载</button> </div> </div> </body> <script> /*生成canvas图形*/ // 获取按钮id var btnSave = document.getElementById("btnSave"); // 获取内容id var content = document.getElementById("content"); // 进行canvas生成 btnSave.onclick = function() { html2canvas(content, { onrendered: function(canvas) { //添加属性 canvas.setAttribute('id', 'thecanvas'); //读取属性值 // var value= canvas.getAttribute('id'); document.getElementById('images').appendChild(canvas); } }); } </script> <script> /* * 说明 * html2canvas,目前该插件还在开发中,暂不支持带有图片的div转换。图片会被忽略 * 对一些的默认样式的支持可能不那么尽如人意,建议自己定义样式, * 不支持iframe * 不支持跨域图片 * 不能在浏览器插件中使用 * 部分浏览器上不支持SVG图片 * 不支持Flash * 不支持古代浏览器和IE,如果你想确认是否支持某个浏览器,可以用它访问 http://deerface.sinaapp.com/ 试试 */ var Download = document.getElementById("Download"); Download.onclick = function() { var oCanvas = document.getElementById("thecanvas"); /*自动保存为png*/ // 获取图片资源 var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src'); saveFile(img_data1, 'abc'); /*下面的为原生的保存,不带格式名*/ // 这将会提示用户保存PNG图片 // Canvas2Image.saveAsPNG(oCanvas); } // 保存文件函数 var saveFile = function(data, filename) { var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); }; </script> </html>