nodejs 实现 裁图并上传图片

2017-06-03 02:51:44

博主最近碰到几个朋友遇到图片上传的问题 周末在家没事干 就写了一个demo

屏幕快照 2017-06-03 10.44.50.png

其实原理很简单 用插件裁完图的数据是base64数据 post 到后台  保存为文件

router.post('/upload', function(req, res){
    //接收前台POST过来的base64
    var imgData = req.body.imgData;
    //过滤data:URL
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    var dataBuffer = new Buffer(base64Data, 'base64');
    var url=path.join('./', 'public')+"/out.png";

    fs.writeFile(url, dataBuffer, function(err) {
        if(err){
            res.send({meta: {code: 1, message: '请求失败'}, data:''});
        }else {
            res.send({meta: {code: 0, message: '通讯成功'}, data: {image: "out.png"}}) ;
        }
    });
});

前端请求代码

$('#btnCrop').on('click', function(){
    var img = cropper.getDataURL();
    $.ajax({
        type: "post",
        url: "/upload/",
        data: {imgData:img},
        success: function (result) {
           var  code=result.meta.code
          if(code==1)
          {
              alert('保存失败')
          }
          else
          {
              $('.cropped').append('<img src="'+result.data.image+'">');
              alert('保存成功')
          }
        }
    });


})


本实例代码 http://git.oschina.net/niefengjun/niefengjundemo

 以后小聂的demo 都会放到这个项目里 大家有问题 可以给我提问哈

你打算打赏多少钱呢?

打赏
(微信扫一扫)