html页面、canvas导出图片

/**
* Created by tengri on 2016-5-9.
*/ /**
* 导出类
* @param content 要导出的内容
* @constructor
*/
function Export2Image(content,opts){
this.exportObj = typeof(content) == "string" ? document.getElementById(content) : content;
if(!this.exportObj) throw new Error("导出内容对象只能传递ID和DOM对象");
this.opts = opts || {};
if(this.exportObj.nodeName !="CANVAS"){
this.exportType = "html2Image";
this.canvas = document.createElement("canvas");
this.canvas.style.display = "none";
//如果没有设置宽度和高度，实际是多大就导出多大
this.canvas.width = this.opts.width || this.exportObj.scrollWidth + 10;
this.canvas.height = this.opts.height || this.exportObj.scrollHeight + 10;
}else{
this.exportType = "canvas2Image";
this.canvas = this.exportObj;
}
if(this.opts.width && this.opts.height){
this.actualWidth = this.opts.width;
this.actualHeight = this.opts.height;
}
this.type = this.opts.type || "png";
this.fileName = (this.opts.name || new Date().getTime()) + "." + this.type;
this.init();
return this;
} /**
* 初始化
*/
Export2Image.prototype.init = function(){
this._fixType();
} Export2Image.prototype._encodeData = function(data){
if(!window.btoa) throw "btoa undefined";
var strDtata = "";
if(typeof(data) !="string"){
for(var i = 0 ; i < data.length;i++){
strDtata +=String.fromCharCode(data[i]);
}
}else{
strDtata = data;
}
return window.btoa(strDtata);
}; /**
* 根据配置生成固定大小图片
* @param width
* @param height
*/
Export2Image.prototype._scaleCanvas = function(width,height){
var w = this.canvas.width;
var h = this.canvas.height;
width = width || w;
height = height || h; var newCanvas = document.createElement("canvas");
newCanvas.width = width;
newCanvas.height = height;
var ctx = newCanvas.getContext("2d");
ctx.drawImage(this.canvas,0,0,w,h,0,0,width,height);
this.canvas = newCanvas;
}; /**
* 获取canvas的Dataurl
*/
Export2Image.prototype._getDataURL = function(){
return this.canvas.toDataURL(this.type);
};
/**
* 获取导出图片类型
* @private
*/
Export2Image.prototype._fixType = function(){
var type = this.type.toLocaleLowerCase().replace(/jpg/i,"jpeg");
var res = type.match(/png|jpeg|bmp|gif/)[0];
this.type = "image/" + res;
}; /**
* 获取数据
*/
Export2Image.prototype.getData = function(){
if(this.actualWidth && this.actualHeight){
this._scaleCanvas(this.actualWidth,this.actualHeight);
}
var strData = "";
if (/bmp/.test(this.type)) {
var data = this._getImageData();
strData = this._getBitmapImage(data);
} else {
strData = this._getDataURL();
}
return strData;
} /**
* 普通图片获取
* @private
*/
Export2Image.prototype._getImageData = function(){
var w = this.canvas.width, h = this.canvas.height;
return this.canvas.getContext('2d').getImageData(0, 0, w, h);
}; /**
* 位图获取
* @private
*/
Export2Image.prototype._getBitmapImage = function(oData){
var aHeader = []; var iWidth = oData.width;
var iHeight = oData.height; aHeader.push(0x42); // magic 1
aHeader.push(0x4D); var iFileSize = iWidth*iHeight*3 + 54; // total header size = 54 bytes
aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
aHeader.push(iFileSize % 256); aHeader.push(0); // reserved
aHeader.push(0);
aHeader.push(0); // reserved
aHeader.push(0); aHeader.push(54); // dataoffset
aHeader.push(0);
aHeader.push(0);
aHeader.push(0); var aInfoHeader = [];
aInfoHeader.push(40); // info header size
aInfoHeader.push(0);
aInfoHeader.push(0);
aInfoHeader.push(0); var iImageWidth = iWidth;
aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
aInfoHeader.push(iImageWidth % 256); var iImageHeight = iHeight;
aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
aInfoHeader.push(iImageHeight % 256); aInfoHeader.push(1); // num of planes
aInfoHeader.push(0); aInfoHeader.push(24); // num of bits per pixel
aInfoHeader.push(0); aInfoHeader.push(0); // compression = none
aInfoHeader.push(0);
aInfoHeader.push(0);
aInfoHeader.push(0); var iDataSize = iWidth*iHeight*3;
aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
aInfoHeader.push(iDataSize % 256); for (var i=0;i<16;i++) {
aInfoHeader.push(0); // these bytes not used
} var iPadding = (4 - ((iWidth * 3) % 4)) % 4; var aImgData = oData.data; var strPixelData = "";
var y = iHeight;
do {
var iOffsetY = iWidth*(y-1)*4;
var strPixelRow = "";
for (var x=0;x<iWidth;x++) {
var iOffsetX = 4*x; strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX+2]);
strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX+1]);
strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX]);
}
for (var c=0;c<iPadding;c++) {
strPixelRow += String.fromCharCode(0);
}
strPixelData += strPixelRow;
} while (--y); var strEncoded = this._encodeData(aHeader.concat(aInfoHeader)) + this._encodeData(strPixelData); return this._makeDataURI(strEncoded);
}; Export2Image.prototype._makeDataURI = function(strData){
return "data:" + this.type + ";base64," + strData;
} /**
* 保存
* @param data
* @param fileName
* @private
*/
Export2Image.prototype._saveFile = function(data,fileName){
try{
//TODO:IE浏览器
new ActiveXObject("Microsoft.XMLHTTP");
var oImg = document.createElement("img");
oImg.src = data;
oImg.onload = function(){
myWindow=window.open('','_blank','width=800,height=600');
myWindow.document.write("<img src='"+data+"'>")
myWindow.focus()
}
}catch(e){
var saveLink = document.createElementNS("http://www.w3.org/1999/xhtml","a");
saveLink.href = data;
saveLink.download = fileName;
var event = document.createEvent("MouseEvents");
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
saveLink.dispatchEvent(event);
} }; Export2Image.prototype.exportPic = function(){
if(this.exportType == "html2Image"){
if(typeof(html2canvas) !="function"){
alert("需要引入html2canvas.js库文件");
return;
}
var that = this;
html2canvas(this.exportObj, {
onrendered: function(canvas) {
that.canvas = canvas;
var data = that.getData();
var imgData = data.replace(that.type,'image/octet-stream');
that._saveFile(imgData,that.fileName);
}
});
}else{
var data = this.getData();
var imgData = data.replace(this.type,'image/octet-stream');
this._saveFile(imgData,this.fileName);
} };

<html>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<head>
<title>dom页面导出为图片</title>
<style type="text/css">
#wrap{
width:400px;
height:300px;
line-height:300px;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
text-align: center;
border: 1px solid #ccc;
background-image: url("img/a.jpg");
overflow: auto;
} </style>
</head>
<body>
<div id="wrap">这是DOM元素，相当于项目中的图形所在的div
</div>
<input type="button" value="html导出图片" onclick="htmlExportHandler();"/><br><hr/>
<canvas id="myCanvas" width="600" height="400" style="background:yellowgreen"></canvas>
<input type="button" value="canvas导出图片" onclick="canvasExportHandler();"/><br><hr/> </body>
</html>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/Export2Image.js"></script>
<script> window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(10,10,200,100); }; function htmlExportHandler(){
var oContent = document.getElementById("wrap");
new Export2Image(oContent,{type:"bmp",name:"html导出文件"}).export();
} function canvasExportHandler(){
new Export2Image("myCanvas").export();
} </script>