最近在做一个截图的功能,要保存成图片.

其实这个功能挺简单的,用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工程师好了.