<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html element to canvas and one-click to generate png image (support img image element)</title>
< !-- html2canvas draws the Dom node inside the Canvas-->
<script src="js/html2canvas.min.js"></script>
<!-- 将canvas图片保存成图片 -->
<script src="js/canvas2image.js"></script>
<script src="js/base64.js"></script>
<style>
p{
font-size: 15px;
font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif;
}
#content{
border-radius: 3px;
}
#btnSave,#Download{
position: absolute;
left: 65px;
top: 320px;
width: 78px;
height: 30px;
background-color: #22b4f6;
color: #fff;
text-align: center;
border-radius: 3px;
border: none;
}
#Download{
margin-left: 250px;
}
.tx,.bt{
border: 1px solid #999;
width: 100px;
height: 20px;
border-radius: 3px;
}
.bt{
background-color: #22b4f6;
color: #fff;
text-align: center;
border: none;
}
</style>
</head>
<body>
<div id="content" style="width:188px;height:300px;border:1px solid #22b4f6;float:left;text-align:center;">
<p><img width="50" height="50" src="images/1.jpg" alt="头像"></p> <p>Professional: Front-end + Back-end</p>
<p>Nickname: richer</p>
<p>语言：html、php、mysql</p>
<p>脚本：javascript</p>
<p><input type="text" class="tx" placeholder="微信公众号开发"></p>
<p><input type="button" class="bt" value="网站微站开发"></p>
</div>
<div style="width:60px;height:302px;float:left;text-align:center;line-height:302px;font-size:30px;color:#22b4f6;">==></div>
<div id="images" style="width:190px;height:302px;float:left;text-align:center;line-height:302px">图片预览区</div>
<button id="btnSave">转成图片</button>
<button id="Download">下载图片</button>
<script>
/*Generate canvas graphics*/
// Get button id
var btnSave = document.getElementById("btnSave");
// Get content id
var content = document.getElementById("content");
// Generate canvas
btnSave.onclick = function(){
html2canvas(content , {
onrendered: function(canvas) {
//Add attribute
canvas.setAttribute('id','thecanvas');
//Read attribute value
// var value= canvas.getAttribute('id');
document.getElementById( 'images').innerHTML = '';
document.getElementById('images').appendChild(canvas);
}
});
}
</script>
<script>
/*
* Description
* Cross-domain images are not supported
* Cannot be used in browser plugins
* SVG images are not supported on some browsers
* Flash is not supported
*/
var Download = document.getElementById("Download");
Download.onclick = function(){
var oCanvas = document.getElementById( "thecanvas");
/*Auto save as png*/
// Get image resource
var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
saveFile(img_data1, 'richer.png');
/*The following is the native save, without the format name*/
// This will prompt the user to save the PNG image
// Canvas2Image.saveAsPNG(oCanvas);
}
// Save the file function
var saveFile = function(data, filename){
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);
};
</ script>
</body>
</html>