html页面、canvas导出图片

背景：项目现场提出将一个html做的图形页面导出为一张图片的需求，在网上搜了一下，发现都不是很全面，所以综合了很多大神的帖子，自己再次封装，以适用项目需求。

所需js库：html2canvas.js(https://github.com/niklasvh/html2canvas)； Export2Image.js(自己封装)，其中new Export2Image(htmlDom,[opts]).export()是执行导出命令。opts = {400,height:400,type:"png",fname:"downloadName"}为可选参数。

注意：在使用过程中，发现一个问题，dom背景图片千万不能设置background-size:contain/conver，否则背景图片导不出来。

代码：

  1 /**
  2  * Created by tengri on 2016-5-9.
  3  */
  4 
  5 /**
  6  * 导出类
  7  * @param content  要导出的内容
  8  * @constructor
  9  */
 10 function Export2Image(content,opts){
 11     this.exportObj = typeof(content) == "string" ? document.getElementById(content) : content;
 12     if(!this.exportObj) throw new Error("导出内容对象只能传递ID和DOM对象");
 13     this.opts = opts || {};
 14     if(this.exportObj.nodeName !="CANVAS"){
 15         this.exportType = "html2Image";
 16         this.canvas = document.createElement("canvas");
 17         this.canvas.style.display = "none";
 18         //如果没有设置宽度和高度，实际是多大就导出多大
 19         this.canvas.width = this.opts.width || this.exportObj.scrollWidth + 10;
 20         this.canvas.height = this.opts.height || this.exportObj.scrollHeight + 10;
 21     }else{
 22         this.exportType = "canvas2Image";
 23         this.canvas = this.exportObj;
 24     }
 25     if(this.opts.width && this.opts.height){
 26         this.actualWidth = this.opts.width;
 27         this.actualHeight = this.opts.height;
 28     }
 29     this.type =  this.opts.type || "png";
 30     this.fileName = (this.opts.name || new Date().getTime()) + "." + this.type;
 31     this.init();
 32     return this;
 33 }
 34 
 35 /**
 36  * 初始化
 37  */
 38 Export2Image.prototype.init = function(){
 39     this._fixType();
 40 }
 41 
 42 Export2Image.prototype._encodeData = function(data){
 43     if(!window.btoa) throw "btoa undefined";
 44     var strDtata = "";
 45     if(typeof(data) !="string"){
 46         for(var i = 0 ; i < data.length;i++){
 47             strDtata +=String.fromCharCode(data[i]);
 48         }
 49     }else{
 50         strDtata = data;
 51     }
 52     return window.btoa(strDtata);
 53 };
 54 
 55 /**
 56  * 根据配置生成固定大小图片
 57  * @param width
 58  * @param height
 59  */
 60 Export2Image.prototype._scaleCanvas = function(width,height){
 61     var w = this.canvas.width;
 62     var h = this.canvas.height;
 63     width = width || w;
 64     height = height  || h;
 65 
 66     var newCanvas = document.createElement("canvas");
 67     newCanvas.width = width;
 68     newCanvas.height = height;
 69     var ctx = newCanvas.getContext("2d");
 70     ctx.drawImage(this.canvas,0,0,w,h,0,0,width,height);
 71     this.canvas = newCanvas;
 72 };
 73 
 74 /**
 75  * 获取canvas的Dataurl
 76  */
 77 Export2Image.prototype._getDataURL = function(){
 78     return this.canvas.toDataURL(this.type);
 79 };
 80 /**
 81  * 获取导出图片类型
 82  * @private
 83  */
 84 Export2Image.prototype._fixType = function(){
 85     var type = this.type.toLocaleLowerCase().replace(/jpg/i,"jpeg");
 86     var res = type.match(/png|jpeg|bmp|gif/)[0];
 87     this.type = "image/" + res;
 88 };
 89 
 90 /**
 91  * 获取数据
 92  */
 93 Export2Image.prototype.getData = function(){
 94     if(this.actualWidth && this.actualHeight){
 95         this._scaleCanvas(this.actualWidth,this.actualHeight);
 96     }
 97     var strData = "";
 98     if (/bmp/.test(this.type)) {
 99         var data = this._getImageData();
100         strData = this._getBitmapImage(data);
101     } else {
102         strData = this._getDataURL();
103     }
104     return strData;
105 }
106 
107 /**
108  * 普通图片获取
109  * @private
110  */
111 Export2Image.prototype._getImageData = function(){
112     var w = this.canvas.width, h = this.canvas.height;
113     return this.canvas.getContext('2d').getImageData(0, 0, w, h);
114 };
115 
116 /**
117  * 位图获取
118  * @private
119  */
120 Export2Image.prototype._getBitmapImage = function(oData){
121     var aHeader = [];
122 
123     var iWidth = oData.width;
124     var iHeight = oData.height;
125 
126     aHeader.push(0x42); // magic 1
127     aHeader.push(0x4D);
128 
129     var iFileSize = iWidth*iHeight*3 + 54; // total header size = 54 bytes
130     aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
131     aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
132     aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
133     aHeader.push(iFileSize % 256);
134 
135     aHeader.push(0); // reserved
136     aHeader.push(0);
137     aHeader.push(0); // reserved
138     aHeader.push(0);
139 
140     aHeader.push(54); // dataoffset
141     aHeader.push(0);
142     aHeader.push(0);
143     aHeader.push(0);
144 
145     var aInfoHeader = [];
146     aInfoHeader.push(40); // info header size
147     aInfoHeader.push(0);
148     aInfoHeader.push(0);
149     aInfoHeader.push(0);
150 
151     var iImageWidth = iWidth;
152     aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
153     aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
154     aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
155     aInfoHeader.push(iImageWidth % 256);
156 
157     var iImageHeight = iHeight;
158     aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
159     aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
160     aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
161     aInfoHeader.push(iImageHeight % 256);
162 
163     aInfoHeader.push(1); // num of planes
164     aInfoHeader.push(0);
165 
166     aInfoHeader.push(24); // num of bits per pixel
167     aInfoHeader.push(0);
168 
169     aInfoHeader.push(0); // compression = none
170     aInfoHeader.push(0);
171     aInfoHeader.push(0);
172     aInfoHeader.push(0);
173 
174     var iDataSize = iWidth*iHeight*3;
175     aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
176     aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
177     aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
178     aInfoHeader.push(iDataSize % 256);
179 
180     for (var i=0;i<16;i++) {
181         aInfoHeader.push(0);    // these bytes not used
182     }
183 
184     var iPadding = (4 - ((iWidth * 3) % 4)) % 4;
185 
186     var aImgData = oData.data;
187 
188     var strPixelData = "";
189     var y = iHeight;
190     do {
191         var iOffsetY = iWidth*(y-1)*4;
192         var strPixelRow = "";
193         for (var x=0;x<iWidth;x++) {
194             var iOffsetX = 4*x;
195 
196             strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX+2]);
197             strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX+1]);
198             strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX]);
199         }
200         for (var c=0;c<iPadding;c++) {
201             strPixelRow += String.fromCharCode(0);
202         }
203         strPixelData += strPixelRow;
204     } while (--y);
205 
206     var strEncoded = this._encodeData(aHeader.concat(aInfoHeader)) + this._encodeData(strPixelData);
207 
208     return  this._makeDataURI(strEncoded);
209 };
210 
211 Export2Image.prototype._makeDataURI = function(strData){
212     return "data:" + this.type + ";base64," + strData;
213 }
214 
215 /**
216  * 保存
217  * @param data
218  * @param fileName
219  * @private
220  */
221 Export2Image.prototype._saveFile = function(data,fileName){
222     try{
223         //TODO:IE浏览器
224          new ActiveXObject("Microsoft.XMLHTTP");
225         var oImg = document.createElement("img");
226         oImg.src = data;
227         oImg.onload = function(){
228             myWindow=window.open('','_blank','width=800,height=600');
229             myWindow.document.write("<img src='"+data+"'>")
230             myWindow.focus()
231         }
232     }catch(e){
233          var saveLink = document.createElementNS("http://www.w3.org/1999/xhtml","a");
234         saveLink.href = data;
235         saveLink.download = fileName;
236         var event = document.createEvent("MouseEvents");
237         event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
238         saveLink.dispatchEvent(event);
239     }
240 
241 };
242 
243 Export2Image.prototype.exportPic = function(){
244     if(this.exportType == "html2Image"){
245         if(typeof(html2canvas) !="function"){
246             alert("需要引入html2canvas.js库文件");
247             return;
248         }
249         var that = this;
250         html2canvas(this.exportObj, {
251             onrendered: function(canvas) {
252                 that.canvas = canvas;
253                 var data = that.getData();
254                 var imgData = data.replace(that.type,'image/octet-stream');
255                 that._saveFile(imgData,that.fileName);
256             }
257         });
258     }else{
259         var data = this.getData();
260         var imgData = data.replace(this.type,'image/octet-stream');
261         this._saveFile(imgData,this.fileName);
262     }
263 
264 };

 1 <html>
 2 <meta http-equiv="X-UA-Compatible" content="chrome=1">
 3 <meta charset="utf-8">
 4 <head>
 5     <title>dom页面导出为图片</title>
 6     <style type="text/css">
 7         #wrap{
 8             width:400px;
 9             height:300px;
10             line-height:300px;
11             font-family: "Courier New", Courier, monospace;
12             font-size: 18px;
13             text-align: center;
14             border:  1px solid #ccc;
15             background-image: url("img/a.jpg");
16             overflow: auto;
17         }
18 
19     </style>
20 </head>
21 <body>
22     <div id="wrap">这是DOM元素，相当于项目中的图形所在的div
23     </div>
24     <input type="button" value="html导出图片" onclick="htmlExportHandler();"/><br><hr/>
25     <canvas id="myCanvas" width="600" height="400" style="background:yellowgreen"></canvas>
26     <input type="button" value="canvas导出图片" onclick="canvasExportHandler();"/><br><hr/>
27 
28 </body>
29 </html>
30 <script type="text/javascript" src="js/html5.js"></script>
31 <script type="text/javascript" src="js/html2canvas.js"></script>
32 <script type="text/javascript" src="js/Export2Image.js"></script>
33 <script>
34 
35 
36     window.onload = function() {
37         var canvas = document.getElementById("myCanvas");
38         var ctx=canvas.getContext('2d');
39         ctx.fillStyle='#FF0000';
40         ctx.fillRect(10,10,200,100);
41 
42     };
43 
44     function htmlExportHandler(){
45         var oContent = document.getElementById("wrap");
46         new Export2Image(oContent,{type:"bmp",name:"html导出文件"}).export();
47     }
48 
49     function canvasExportHandler(){
50         new Export2Image("myCanvas").export();
51     }
52 
53 </script>