html2canvas.js截图功能 移动端

html2canvas.js 前端开发截图功能；

此功能中有俩个插件 html2canvas.js bootcdn 上下载

下面有此JS —> Canvas2Image.js

思路 1 让需要截图的dom 进行隐藏 点击截图按钮时 显示截图dom 当截完图 在隐藏 截图dom

     2  让截图dom  top 1500px  或者   30rem  让它在可视范围外   

     3  让截图dom  z-index   =   -10 ; 在所有元素的下面！  （推荐）  

html

这里是需要截图的dom

{{title}}

{{f_text}}

这里是需要截图的dom

截图成功的显示图片的dom

截图生成的图片 赋值给下面的img

---

JS

这里是你要截图的盒子 里面包含了你需要截图的HTML 上面html参考！

var test = document.getElementsByClassName(“swiper-item-fenxiang”)[0];
var width = test.offsetWidth; //获取dom 宽度

var height = test.offsetHeight; //获取dom 高度

var canvas = document.createElement(“canvas”);
这是截图的清晰度 具体详情看html2canvas.js
var scale = 2;
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext(“2d”).scale(scale, scale);
html2canvas(test, {
useCORS: true, 是否尝试使用CORS从服务器加载图像
logging: true, //日志开关，便于查看html2canvas的内部执行流程
canvas: canvas,
width: width,
height: height,
scale:scale,
以上都不是很重要 上面是一些插件的预设；截图清晰度的问题 scale:scale,
onrendered: function(canvas) {

var context = canvas.getContext(‘2d’);
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
// 【重要】关闭抗锯齿

这里开始绘制的一些JS调用 如果PC端截出图来 但是移动端上没有截图成功的话 可以进行convertToImage 里面进行输出关键的一些方法！看是哪一步没有执行！判断是什么问题！ ‘alert（） ’
var img = Canvas2Image.convertToImage(canvas,canvas.width, canvas.height);
图片跨域的话可以尝试一下 下面这个方法 让后台把图片都进行处理 放到同域名下
img.setAttribute(‘crossOrigin’, ‘anonymous’);

_this.srcfx = img.src || canvas.toDataURL(“image/png”);
canvas.toDataURL(“image/png”); 如果页面没有截图成功的话 看一下toDataURL是否进行输出了！
如果没有输出 错误可能有俩个

截图dom 里面有跨域图片
截图dom 里面元素样式重叠有关系 重叠样式不能超过三层 dom包裹不能超过2层 （可以隐藏所有图片 留一个背景进行尝试截图 找一下问题所在）

在页面中创建好一个img 然后进行替换 src 的路径
上面有dom

截图成功后显示的 判断
_this.bool05 = true;
_this.bool06 = false;
}
});
},
Canvas2Image.js 插件
/**

• covert canvas to image
• and save the image file
  */

var Canvas2Image = function () {

// check if support sth.
var $support = function () {
var canvas = document.createElement(‘canvas’),
ctx = canvas.getContext(‘2d’);

return {
canvas: !!ctx,
imageData: !!ctx.getImageData,
dataURL: !!canvas.toDataURL,
btoa: !!window.btoa
};
}();

var downloadMime = ‘image/octet-stream’;

function scaleCanvas (canvas, width, height) {
var w = canvas.width,
h = canvas.height;
if (width == undefined) {
width = w;
}
if (height == undefined) {
height = h;
}

var retCanvas = document.createElement(‘canvas’);
var retCtx = retCanvas.getContext(‘2d’);
retCanvas.width = width;
retCanvas.height = height;
retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
return retCanvas;
}

function getDataURL (canvas, type, width, height) {
canvas = scaleCanvas(canvas, width, height);
return canvas.toDataURL(type);
}

function saveFile (strData) {
document.location.href = strData;
}

function genImage(strData) {
var img = document.createElement(‘img’);
img.src = strData;
return img;
}
function fixType (type) {
type = type.toLowerCase().replace(/jpg/i, ‘jpeg’);
var r = type.match(/png|jpeg|bmp|gif/)[0];
return ‘image/’ + r;
}
function encodeData (data) {
if (!window.btoa) { throw ‘btoa undefined’ }
var str = ‘’;
if (typeof data == ‘string’) {
str = data;
} else {
for (var i = 0; i < data.length; i ++) {
str += String.fromCharCode(data[i]);
}
}

return btoa(str);
}
function getImageData (canvas) {
var w = canvas.width,
h = canvas.height;
return canvas.getContext(‘2d’).getImageData(0, 0, w, h);
}
function makeURI (strData, type) {
return ‘data:’ + type + ‘;base64,’ + strData;
}

/**

• create bitmap image
• 按照规则生成图片响应头和响应体
  */
  var genBitmapImage = function (oData) {

//
// BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx
// BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx
//

var biWidth = oData.width;
var biHeight = oData.height;
var biSizeImage = biWidth * biHeight * 3;
var bfSize = biSizeImage + 54; // total header size = 54 bytes

//
// typedef struct tagBITMAPFILEHEADER {
// WORD bfType;
// DWORD bfSize;
// WORD bfReserved1;
// WORD bfReserved2;
// DWORD bfOffBits;
// } BITMAPFILEHEADER;
//
var BITMAPFILEHEADER = [
// WORD bfType – The file type signature; must be “BM”
0x42, 0x4D,
// DWORD bfSize – The size, in bytes, of the bitmap file
bfSize & 0xff, bfSize >> 8 & 0xff, bfSize >> 16 & 0xff, bfSize >> 24 & 0xff,
// WORD bfReserved1 – Reserved; must be zero
0, 0,
// WORD bfReserved2 – Reserved; must be zero
0, 0,
// DWORD bfOffBits – The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.
54, 0, 0, 0
];

//
// typedef struct tagBITMAPINFOHEADER {
// DWORD biSize;
// LONG biWidth;
// LONG biHeight;
// WORD biPlanes;
// WORD biBitCount;
// DWORD biCompression;
// DWORD biSizeImage;
// LONG biXPelsPerMeter;
// LONG biYPelsPerMeter;
// DWORD biClrUsed;
// DWORD biClrImportant;
// } BITMAPINFOHEADER, *PBITMAPINFOHEADER;
//
var BITMAPINFOHEADER = [
// DWORD biSize – The number of bytes required by the structure
40, 0, 0, 0,
// LONG biWidth – The width of the bitmap, in pixels
biWidth & 0xff, biWidth >> 8 & 0xff, biWidth >> 16 & 0xff, biWidth >> 24 & 0xff,
// LONG biHeight – The height of the bitmap, in pixels
biHeight & 0xff, biHeight >> 8 & 0xff, biHeight >> 16 & 0xff, biHeight >> 24 & 0xff,
// WORD biPlanes – The number of planes for the target device. This value must be set to 1
1, 0,
// WORD biBitCount – The number of bits-per-pixel, 24 bits-per-pixel – the bitmap
// has a maximum of 2^24 colors (16777216, Truecolor)
24, 0,
// DWORD biCompression – The type of compression, BI_RGB (code 0) – uncompressed
0, 0, 0, 0,
// DWORD biSizeImage – The size, in bytes, of the image. This may be set to zero for BI_RGB bitmaps
biSizeImage & 0xff, biSizeImage >> 8 & 0xff, biSizeImage >> 16 & 0xff, biSizeImage >> 24 & 0xff,
// LONG biXPelsPerMeter, unused
0,0,0,0,
// LONG biYPelsPerMeter, unused
0,0,0,0,
// DWORD biClrUsed, the number of color indexes of palette, unused
0,0,0,0,
// DWORD biClrImportant, unused
0,0,0,0
];

var iPadding = (4 - ((biWidth * 3) % 4)) % 4;

var aImgData = oData.data;

var strPixelData = ‘’;
var biWidth4 = biWidth<<2;
var y = biHeight;
var fromCharCode = String.fromCharCode;

do {
var iOffsetY = biWidth4*(y-1);
var strPixelRow = ‘’;
for (var x = 0; x < biWidth; x++) {
var iOffsetX = x<<2;
strPixelRow += fromCharCode(aImgData[iOffsetY+iOffsetX+2]) +
fromCharCode(aImgData[iOffsetY+iOffsetX+1]) +
fromCharCode(aImgData[iOffsetY+iOffsetX]);
}

for (var c = 0; c < iPadding; c++) {
strPixelRow += String.fromCharCode(0);
}

strPixelData += strPixelRow;
} while (–y);

var strEncoded = encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) + encodeData(strPixelData);

return strEncoded;
};

/**

• saveAsImage
• @param canvasElement
• @param {String} image type
• @param {Number} [optional] png width
• @param {Number} [optional] png height
  */
  var saveAsImage = function (canvas, width, height, type) {
  if ($support.canvas && $support.dataURL) {
  if (typeof canvas == “string”) { canvas = document.getElementById(canvas); }
  if (type == undefined) { type = ‘png’; }
  type = fixType(type);
  if (/bmp/.test(type)) {
  var data = getImageData(scaleCanvas(canvas, width, height));
  var strData = genBitmapImage(data);
  saveFile(makeURI(strData, downloadMime));
  } else {
  var strData = getDataURL(canvas, type, width, height);
  saveFile(strData.replace(type, downloadMime));
  }
  }
  };

var getBase64Data = function(canvas, width, height, type){
if ($support.canvas && $support.dataURL) {
if (typeof canvas == “string”) { canvas = document.getElementById(canvas); }
if (type == undefined) { type = ‘png’; }
type = fixType(type);
var strData;
if (/bmp/.test(type)) {
var data = getImageData(scaleCanvas(canvas, width, height));
strData= genBitmapImage(data);
} else {
strData = getDataURL(canvas, type, width, height);
}
var base64;
var dataArray = strData.split(“base64,”);
if(dataArray && dataArray.length > 1){
base64 = dataArray[1];
}
return base64;
}
};

var convertToImage = function (canvas, width, height, type) {
if ($support.canvas && $support.dataURL) {
if (typeof canvas == “string”) { canvas = document.getElementById(canvas); }
if (type == undefined) { type = ‘png’; }
type = fixType(type);

if (/bmp/.test(type)) {
var data = getImageData(scaleCanvas(canvas, width, height));
var strData = genBitmapImage(data);
return genImage(makeURI(strData, ‘image/bmp’));
} else {
var strData = getDataURL(canvas, type, width, height);
return genImage(strData);
}
}
};

return {
getBase64Data:getBase64Data,
saveAsImage: saveAsImage,
saveAsPNG: function (canvas, width, height) {
return saveAsImage(canvas, width, height, ‘png’);
},
saveAsJPEG: function (canvas, width, height) {
return saveAsImage(canvas, width, height, ‘jpeg’);
},
saveAsGIF: function (canvas, width, height) {
return saveAsImage(canvas, width, height, ‘gif’);
},
saveAsBMP: function (canvas, width, height) {
return saveAsImage(canvas, width, height, ‘bmp’);
},

convertToImage: convertToImage,
convertToPNG: function (canvas, width, height) {
return convertToImage(canvas, width, height, ‘png’);
},
convertToJPEG: function (canvas, width, height) {
return convertToImage(canvas, width, height, ‘jpeg’);
},
convertToGIF: function (canvas, width, height) {
return convertToImage(canvas, width, height, ‘gif’);
},
convertToBMP: function (canvas, width, height) {
return convertToImage(canvas, width, height, ‘bmp’);
}
};

}();

Canvas2Image.js 插件