html页面点击生成图片并可以下载图片

-----最近一位朋友的项目有个需求，是用户可以在项目中点击，让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图形*/// 获取按钮idvar btnSave = document.getElementById("btnSave");// 获取内容idvar 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>

html页面点击生成图片并可以下载图片相关推荐

点击img，直接下载图片
<a href="xxx.jpg" download="图片.jpg">图片</a> 若该图片是跨域,download属性会失效所以为 ...
HTML+JS实现浏览器前端下载图片
最近做项目需要用到js图片下载,按照原先下载文件的思路,我感觉直接 window.open("下载链接"); 就可以了,但实际操作后,发现这个只会在新窗口打开图片,并不会触发下载, ...
JS下载图片到本地，解决跨域问题
说下需求,点击按钮,实现下载图片到本地的功能,后台返回的url是阿里oss存储图片的地址,一开始只能预览图片,再后来受同源策略影响,依旧不能实现,但是在生成的图片后拼接?time=当前时间戳就可以实现 ...
HTML+JS实现浏览器下载图片（可以下载第三方链接的图片）
如果使用a标签指向一个图片的话,你会发现点击链接时它会直接在浏览器中打开图片并显示: <a href="http://www.baidu.com/img/baidu_jgylogo3. ...
node.js爬虫之下载图片，批量下载图片，控制下载图片并行上限
首先介绍一下爬虫所需要的的包 require("request"); –get post请求页面 require("cheerio") –解析文本对象为DOM对 ...
解决window.location.href 下载文件时，一次点击产生两次下载+页面跳转问题
解决window.location.href 下载文件时,一次点击产生两次下载+页面跳转问题参考文章: (1)解决window.location.href 下载文件时,一次点击产生两次下载+页面跳转 ...
微信上h5页面点击文件下载链接没反应，微信内直接下载app方案
大家在使用微信分享转发链接的时候,都很容易碰到链接在微信中无法打开网页的问题.通常这种情况微信会给个提示 "已停止访问该网址" ,导致这个情况的因素有以下三点. 1.分享链接被多人 ...
ionic 实现应用内(webview中html页面点击) 和应用外 (浏览器html页面点击) 打开本地安装应用...
应用内(webview中html页面点击) : 应用内打开本地安装应用指的是webview里打开应用,需要2个步骤: 1: 需要下载一个cordova插件:com.lampa.startapp ,也可 ...
前端实现点击下载图片
方法一:使用a标签的download属性. <a href="1.jpg" download="1.jpg">下载图片</a> 注意: ...
在前端页面生成二维码并下载（兼容IE）
做项目的过程中遇到一个需求:把每个果树都生成一个对应的二维码,然后点击下载. 大致的思路是:用canvas画出二维码,然后把二维码转换成base64图片,然后点击下载--(这个过程中IE的兼容有点儿折 ...

html页面点击生成图片并可以下载图片

html页面点击生成图片并可以下载图片相关推荐

最新文章

热门文章