标签：style color java 使用 os io strong 文件
最近在做一个截图的功能,要保存成图片.
其实这个功能挺简单的,用toDataURL()转换,或者直接用使用canvas2image.js, base64.js这两个脚本实现功能,
部分重要代码如下:
//简单的使用JavaScript代码实现下载
var imageDate = document.getElementById("canvas").toDataURL("image/png");
window.location.href = "image/octet-stream" + imageDate;
//使用强大的脚本,搜索下,不难找到这2个脚本
var oCanvas = document.getElementById("canvas");
Canvas2Image.saveAsPNG(oCanvas); // 这将会提示用户保存PNG图片
Canvas2Image.saveAsJPEG(oCanvas); // 这将会提示用户保存JPG图片
Canvas2Image.saveAsBMP(oCanvas); // 这将会提示用户保存BMP图片
// 返回一个包含PNG图片的<img>元素
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);
// 返回一个包含JPG图片的<img>元素
var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true);
// 返回一个包含BMP图片的<img>元素
var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true);
// 这些函数都可以接受高度和宽度的参数
// 可以用来调整图片大小
// 把画布保存成100x100的png格式
Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);
其实如果只是PNG,用原生代码就够了,当然如果你要很多功能的,那2个脚本也够你用了.
不过人生的道路不会这么顺利(每次编程都是这样,太顺利了,就一定有问题),IE报错了,我的项目其实就是基于IE的,每次运行都会爆"脚本错误——错误：传递给系统调用的数据区域太小！".这个错误的原因是在Data URL协议中，图片被转换成base64编码的字符串形式的时候过长,IE就报错了.(个人找不到解决的方法,求大神告知)
无奈之下,只能通过后台node来保存图片,然后返回地址,从而到达下载的效果(node的文件API还是挺好用挺容易的).
直接上代码:
//前端客户端代码
var imageURL = document.getElementById("canvas").toDataURL();
$.post("/saveImage", {image: imageURL}, function (data) {
if (data == "ok") {
alert("成功")
}
})
//node后台代码
app.post(‘/saveImage‘, function (req, res) {
var imgData = req.body.image,
base64Data = imgData.replace(/^data:image\/\w+;base64,/, ""),
dataBuffer = new Buffer(base64Data, ‘base64‘);
fs.writeFile("out.png", dataBuffer, function(err) {
if(err){
res.send(err);
}else{
res.send("ok");
}
});
});
这里唯一一个要注意的地方就是new Buffer接收的base64编码应该去掉"data:",比如我用canvas.toDataURL()得到的是"data:image/png;base64,aaaaaaaaaaaaaaaaaaaaa",
那么new Buffer接收的就应该是"aaaaaaaaaaaaaaaaaaaaa",
base64Data = imgData.replace(/^data:image\/\w+;base64,/, ""),
正是这个用途.其他的也没啥好说的.
最后吐槽下:我是前端工程师呀~~,最近咋变成个全栈工程师了,还好是node,是我喜欢的node.好吧,以后我就变成JavaScript工程师好了.
node与canvas保存(下载)图片,布布扣,bubuko.com
标签：style color java 使用 os io strong 文件
原文地址：http://my.oschina.net/l3ve/blog/300097
