javascript 导出div为图片PNG,div转svg,svg转canvas
2015-12-08 11:42
615 查看
关于这个功能需求,目前比较多实现是两种方法:
1、将div相关数据传到后台服务器端,通过服务器语言生成图形,发送至前端下载
2、完全通过前端实现,实现几个转换过程,div为图片PNG,首先div转svg,然后svg转canvas,最后 通过浏览器下载。
优点:不依赖于后端,简单方便
弊端:部分浏览器低版本不支持,高版本IE,safri也有不支持的情况
不多说直接上代码:
经测试:高版本的chrome、firefox都支持。
补充:也测试过一些第三方比较有人气的控件
1.https://github.com/gabelerner/canvg
2.https://github.com/exupero/saveSvgAsPng
3.html2canvas
在测试时,只支持chrome 33、firefox 40.3,不支持IE11,safair 5.1
1、将div相关数据传到后台服务器端,通过服务器语言生成图形,发送至前端下载
2、完全通过前端实现,实现几个转换过程,div为图片PNG,首先div转svg,然后svg转canvas,最后 通过浏览器下载。
优点:不依赖于后端,简单方便
弊端:部分浏览器低版本不支持,高版本IE,safri也有不支持的情况
不多说直接上代码:
<!DOCTYPE html> <html><body> <h2>Input Div:</h2> <div id="div"> <p>Just have a <span style='color:white; text-shadow:0 0 2px blue;'>TRY</span></p><p><b>By Dion</b></p> </div> <h2>Output Image:</h2> <script> //1.将div转成svg var divContent = document.getElementById("div").innerHTML; var data = "data:image/svg+xml," + "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" + "<foreignObject width='100%' height='100%'>" + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" + divContent + "</div>" + "</foreignObject>" + "</svg>"; var img = new Image(); img.src = data; document.getElementsByTagName('body')[0].appendChild(img); //2.svg转成canvas var canvas = document.createElement('canvas'); //准备空画布 canvas.width = img.width; canvas.height = img.height; var context = canvas.getContext('2d'); //取得画布的2d绘图上下文 context.drawImage(img, 0, 0); //var a = document.createElement('a'); //a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据 //a.download = "MapByMathArtSys"; //设定下载名称 //a.click(); //点击触发下载 //3. 图片导出为 png 格式 var type = 'png'; var imgData = canvas.toDataURL(type); /** * 获取mimeType * @param {String} type the old mime-type * @return the new mime-type */ var _fixType = function (type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r; }; // 加工image data,替换mime type imgData = imgData.replace(_fixType(type), 'image/octet-stream'); /** * 在本地进行文件保存 * @param {String} data 要保存到本地的图片数据 * @param {String} filename 文件名 */ 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); }; // 下载后的图片名 var filename = 'baidufe_' + (new Date()).getTime() + '.' + type; // download saveFile(imgData, filename); </script> </body></html>
经测试:高版本的chrome、firefox都支持。
补充:也测试过一些第三方比较有人气的控件
1.https://github.com/gabelerner/canvg
2.https://github.com/exupero/saveSvgAsPng
3.html2canvas
在测试时,只支持chrome 33、firefox 40.3,不支持IE11,safair 5.1
相关文章推荐
- svg转图片下载
- 自定义jstl fn函数fns
- javascript中window.event事件用法详解
- js+ajax实现获取文件大小的方法
- 转:JavaScript理解
- 自定义jstl函数标签
- jsp页面放在web-inf和webroot下的优缺点
- IE 和Firefox的js兼容性总结
- jstl标签库fn函数使用
- js获取当前页面的url
- js处理new Date()获取的时间
- 使用JAVASCRIPT实现静态物体、静态方法和静态属性
- Json对象与Json字符串互转(4种转换方式)
- JS 实现 Tab标签切换功能
- js实时上传文件显示缩略图
- 阿赫亚web安全JSON
- javascript将base64编码的图片数据转换为file并提交
- js随意拖动图片
- JS刷新当前页面的几种方法总结
- js 循环 for in