画布(HTML转图片)
js:
<script src="../dist/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../dist/html2canvas.js"></script>
html:
<body style="margin:0px;">
<div id="content" style="float: left;width: 600px;height: 300px;">
<h1>HTML网页内容</h1>
<div>
测试测试<strong>测试测试</strong>
测试测试
<div>
<img src="hacker.jpg" alt="" style="width: 100px;height: 150px;"></div>
</div>
</div>
<canvas style="float: left;display: none;"></canvas>
<div id="pngHolder" style="float: left;"></div>
<button onclick="HtmlToCanvas()">HtmlToCanvas</button>
<button onclick="CanvasToImage()">CanvasToImage</button>
<button onclick="DownloadImage()">DownloadImage</button>
</body>
</html>
HTML网页内容转canvas
var canvas = document.querySelector("canvas");
//HTML网页内容转canvas
function HtmlToCanvas(){
canvas.width =document.querySelector("#content").clientWidth;
canvas.height = document.querySelector("#content").clientHeight;
html2canvas(document.querySelector("#content"), {
canvas: canvas
}).then(function(canvas) {
console.log('Drew on the existing canvas');
});
}
canvas内容转图片
//canvas内容转图片
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");//转成base64码
return image;
}
function CanvasToImage(){
document.getElementById("pngHolder").appendChild(convertCanvasToImage(canvas));//转成base64码
}
保存图片到本地
//保存图片
function _fixType(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
function DownloadImage(){
var type = 'png';
var data = canvas.toDataURL(type);//转成base64码
data = data.replace(_fixType(type),'image/octet-stream');
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
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);
};
导出图片
需要引入html2canvas.js:
解决跨域问题找到getPseudoElementClasses修改如下:
function getPseudoElementClasses(){
...
for (var k = 0, l = rules.length; k < l; k++) {
//sheets[i].href===null排除跨域的css样式
if(findPsuedoEls.test(rules[k].selectorText)&&sheets[i].href===null) {
classes.push(rules[k].selectorText);
}
}
...
}
$(document).ready(function($) {
$("#pngexport").click(function(event) {
html2canvas(document.querySelector("#customers"), {
canvas: canvas,
useCORS: true,
allowTaint: true,
onrendered: function(canvas) {
/*var context = canvas.getContext("2d");
//然后将画布缩放,将图像放大两倍画到画布上
context.scale(200,200);
var screenshot;
screenshot = context.canvas.toDataURL( "image/png" );*/
var dataURL = canvas.toDataURL("image/png");
window.open(dataURL);
/*resolve(dataURL);*/
}
});
});
});