h5页面转png图片_H5页面转成图片并下载到本地

html元素转canvas并一键生成png图片(支持img图片元素)

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;

}

昵称：richer

专业：前端 + 后端

语言：html、php、mysql

脚本：javascript

==>

图片预览区

转成图片

下载图片

/*生成canvas图形*/

// 获取按钮id

var btnSave = document.getElementById("btnSave");

// 获取内容id

var content = document.getElementById("content");

// 进行canvas生成

btnSave.onclick = function(){

html2canvas(content, {

onrendered: function(canvas) {

//添加属性

canvas.setAttribute('id','thecanvas');

//读取属性值

// var value= canvas.getAttribute('id');

document.getElementById('images').innerHTML = '';

document.getElementById('images').appendChild(canvas);

}

});

}

/*

* 说明

* 不支持跨域图片

* 不能在浏览器插件中使用

* 部分浏览器上不支持SVG图片

* 不支持Flash

*/

var Download = document.getElementById("Download");

Download.onclick = function(){

var oCanvas = document.getElementById("thecanvas");

/*自动保存为png*/

// 获取图片资源

var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');

saveFile(img_data1, 'richer.png');

/*下面的为原生的保存，不带格式名*/

// 这将会提示用户保存PNG图片

// Canvas2Image.saveAsPNG(oCanvas);

}

// 保存文件函数

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);

};

本文来源于网络：查看 >https://www.cnblogs.com/acmyun/p/8989405.html