html2canvas.js把html页面元素转成图片下载本地、上传服务器，处理图片模糊失真
1.引入js文件，html2canvas.js会有版本问题，这是我上传在git的版本，下载https://github.com/zhangliqingyun/jarlist/tree/master/html2canvas，头部引入文件
2.页面table元素：
序号
文件名称
发布部门
发布时间
1
2
3
4
备注
下载3.js文件处理（下载到本地），模糊是由于scale的倍数设置必须为2的倍数
$(document).ready(function(){
$("#btn-Convert-Html2Image").on('click', function () {
var width = $('#table').outerWidth(); //截图元素的宽
var height = $('#table').outerHeight(); //截图元素的高
var canvas = document.createElement("canvas"); //创建画板
var context = canvas.getContext("2d");
var scale = 2; //设置为2的整数倍，2/4/6/8才出现不模糊的情况
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
dpi: window.devicePixelRatio * 4,
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
width: width,
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(document.querySelector("#table"), opts).then(canvas => {
var imgageData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", imgageData);
});
});
}); 4.页面截图
下载图片
5.上传到本地服务器，使用ajax把生成的图片base64字符串传递到后台保存
//上传table截图
function uploadPic(){
var width = $('#table').outerWidth(); //截图元素的宽
var height = $('#table').outerHeight(); //截图元素的高
var canvas = document.createElement("canvas"); //创建画板
var context = canvas.getContext("2d");
var scale = 2; //设置为2的整数倍，2/4/6/8才出现不模糊的情况
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
dpi: window.devicePixelRatio * 4,
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
width: width,
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(document.querySelector("#table"), opts).then(canvas => {
var imgageData = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
uploadPicByUrl(imgageData);//通过url上传图片
});
}
//通过url上传图片
function uploadPicByUrl(imgageData){
var orgCode = mini.get("orgCode").getValue();
$.ajax({
url: basePath+"gjHighItem111/savePic",
type: 'post',
data: {"data":imgageData,"picName":"H"+orgCode+"111.png"},
cache: false,
success: function (successData) {
var message = mini.decode(successData);
var msg = message.msg;//获取组织xxID，用于树节点定位
if(message.type == '200'){
showMsg("图片保存成功","success",800,"center","center");
}else{
showMsg("图片保存失败","warning",800,"center","center");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
showMsg("图片保存错误","danger",800,"center","center");
}
});
}6.后台接收代码
controller层：
@RequestMapping(value = "savePic", method = { RequestMethod.POST })
public String savePic(HttpServletRequest request){
String data = request.getParameter("data");
String picName = request.getParameter("picName");
return gjHighItem111Service.savePic(data,picName);
}service层：PicUploadUtils.picPath为服务器路径，Base64字符串转成byte
public String savePic(String data, String picName) {
try {
byte[] bytes = new Base64().decodeBase64(data); //将字符串转换为byte数组
ByteArrayInputStream inputStreamArr = new ByteArrayInputStream(bytes); //要注意向后台传base64字符串时,要去掉 data:image/jpeg;base64, 前缀
InputStream inputStream = new BufferedInputStream(inputStreamArr); //把output流数组转成input流
File dir = new File(PicUploadUtils.picPath);
if (!dir.exists()) {
dir.mkdirs();
}
FileOutputStream fileOutputStream =new FileOutputStream(PicUploadUtils.picPath+picName);
//创建一个缓冲区
byte buffer[] = new byte[1024];
//判断输入流是否已经读完的标识
int len = 0;
while ((len=inputStream.read(buffer))>0)
{
fileOutputStream.write(buffer,0,len);
}
inputStream.close();
fileOutputStream.close();
} catch (Exception e) {
return new Message(Message.ERROR, "添加失败").toJson();
}
return new Message(Message.OK, "添加成功").toJson();
}