node與canvas保存(下載)圖片

最近在作一個截圖的功能,要保存成圖片.

其實這個功能挺簡單的,用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工程師好了.