htmlcanvas2实现将网页生成图片，自定义保存图片的名称

首先熟悉htmlcanvas2的使用方法，看看github的使用说明

https://github.com/niklasvh/html2canvas

        html2canvas(document.body).then(function(canvas) {            document.body.appendChild(canvas);        });

这是我要截取的网页的html效果图

使用htmlcanvas2需要注意一下几个坑（这都是我一个一个踩过的）：

1 如果你截取的网页中有图片和文字，在本地测试时生成图片时，网页中的图片截取出来竟然是空白？

（心里在想：什么狗屁插件根本不管用 图片都截取不了）

原因：程序必须放在服务器下运行，不然的话网页中的图片是出不来的

2 把程序放在服务器上运行了，发现图片还是出不来，有图片的地方还是一片空白？生成的图片效果是这样的

为什么一个二维码图片可以出来，另一个二维码图片没有出来？这就要从二维码身上找原因了

我的二维码的生成用到了这个插件jquery.qrcode-logo.js，调用方法如下：

$("#code").qrcode({ render : "canvas",text: pay_url,width:312,height:312,src: 'http://css.zzebz.com/images/kkbl.jpg'});

发现两个二维码的调用区别是多了一个  src: 'http://css.zzebz.com/css//images/kkbl.jpg' 就是二维码中间的logo小图片，这个依然是图片的跨域问题，所以我们一定要避免截取的网页中的图片跨域问题！把这个路径换成本地路径 src: '__STATIC__/images/kkbl.jpg'；

这里还会存在一个问题，在jquery.qrcode-logo的二维码没有生成之前htmlcanvas已经开始生成图片了，这样生成的图片中的二维码是空白，

所以htmlcanvas2的执行要延迟1s。现在生成图片之后是可以手动 右键鼠标 将图片另存为 保存图片的。这样截图就OK了，代码如下：

setTimeout(function(){html2canvas($("#view"), {onrendered: function(canvas) {$("#qrbox").append(canvas);}});},1000);

如果我想在保存图片的时候可以自定义图片的名称该如何做？我从网上搜到一段代码如下：

var type = 'png';var imgData = canvas.toDataURL(type);var _fixType = function(type) {type = type.toLowerCase().replace(/jpg/i, 'jpeg');var r = type.match(/png|jpeg|bmp|gif/)[0];return 'image/' + r;};imgData = imgData.replace(_fixType(type),'image/octet-stream');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 = shopname + '.' + type;saveFile(imgData,filename);

html2canvas2生成的图片是一个大的canvas,只有获取到了这个canvas才可以自定义保存图片的名称，

这里的关键在于如何获取到这个canvas,这个canvas上并没有id 什么都没有

首先想到的通过id="qrbox"获取里边的子元素

var can = document.getElementById("qrcode").getElementsByTagName("canvas")[0];console.log(can);结果：<canvas width="120" height="120"></canvas>

得到的canvas是这样的 宽高是120的canvas，这个canvas竟然不是那张大图片的canvas，而是右下角jquery.qrcode-logo生成的那张二维码？这里非常的怪异！

尝试着获取#qrcode的第一个子元素第二个子元素，全部是undefined，通过qrbox中的子元素来获取这个大的canvas失败了！！

所以我就想到如何为htmlcanvas2生成的这个大的canvas增加一个id，这样就要修改htmlcanvas2源码了

源码三千多行，其实我的内心是崩溃的，多半这个id是不好加上的

我在想既然htmlcanvas2绘制出了这个大的canvas,那我就去找源码中绘制canvas的代码createElement("canvas")，绘制的时候就手动增加id，就这样一个一个的打出来试试

第一处：var croppedCanvas = document.createElement("canvas");croppedCanvas.setAttribute("id","myCanvas");console.log(croppedCanvas);第二处：this.canvas = this.options.canvas || this.document.createElement("canvas");this.canvas.setAttribute("id","myCanvas");console.log(this.canvas);第三处：var ctx, canvas = document.createElement('canvas');canvas.setAttribute("id","myCanvas");canvas.setAttribute("id","myCanvas");console.log(canvas);canvas.width = size.width;canvas.height = size.height; ...................就不一一列出了

令我惊喜的是，终于得到了我想要的id,现在就可以用id来找到这个canvas了,结合我的项目修改之后自定义保存图片名称的完整代码如下：

var shopname = "糖猫猫的店铺";var c = document.getElementById("myCanvas");console.log(c);document.getElementById("btnsave").addEventListener("click",function(){if(c==null){alert("获取数据失败，请刷新页面！");return false;}var type = 'png';var imgData = c.toDataURL(type);var _fixType = function(type) {type = type.toLowerCase().replace(/jpg/i, 'jpeg');var r = type.match(/png|jpeg|bmp|gif/)[0];return 'image/' + r;};imgData = imgData.replace(_fixType(type),'image/octet-stream');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 = shopname + '.' + type;saveFile(imgData,filename);});

这是什么编辑器真的不好用，编辑出来的都是什么格式！重新弄了无数次！！！

参考文章：http://blog.csdn.net/qq547276542/article/details/51906741