HTML5中canvas转图片实现截图DEMO

首先   做一个  要截图的容器，也就是包页面的div,

<div id = 'shareContent'>

</div>

<div id='img'></div> 

再容器中正常写入内容，如果页面中有图片元素的情况下，图片内容的‘opacity’需要设置为 ‘1’，不可为‘0’，否则会绘制不出来。

页面内容转为canvas需要引入插件 html2canvas.js 和 canvas2image.js

下面贴出代码：

function setCanvas(){
var main = {
init: function() {
main.setListener();
},


//获取像素密度
getPixelRatio: function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return(window.devicePixelRatio || 1) / backingStore;
},
//绘制dom 元素，生成截图canvas
html2Canvas: function() {
var shareContent = $("#shareContent"); // 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
var width = shareContent.width(); // 获取(原生）dom 宽度
var height = shareContent.height(); // 获取(原生）dom 高


var canvas = document.createElement('canvas'); //创建canvas 对象
var context = canvas.getContext('2d');
var scaleBy = main.getPixelRatio(context); //获取像素密度的方法 (也可以采用自定义缩放比例)
canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
canvas.height = (height) * scaleBy; // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
context.scale(scaleBy, scaleBy);


var opts = {
allowTaint: true, //允许加载跨域的图片
tainttest: true, //检测每张图片都已经加载完成
scale: scaleBy, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: true, //日志开关，发布的时候记得改成false
width: width, //dom 原始宽度
height: height //dom 原始高度
};
html2canvas(shareContent, opts).then(function(canvas) {
//canvas转img
//$("body").append(canvas);
var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
$("#img").append($(img));
$("#img").show();
});
}
};


setTimeout(function() {
main.html2Canvas();
}, 500)


}


//注意最后html转canvas会出现部分图片消失的情况，将图片路径转为base64位即可

最后通过 append将转换后的img元素插入到 ‘img’标签中,实现图片转换。