node 实现图片的裁切与上传

BigNerdCoding 发布于2019-08-19 17:42 / 1179人阅读

摘要：使用了以后，图片上传可以由服务器来完成，保存后的图片地址再传给后台进行保存。图片的上传使用的插件表单上传生成通用识别码代码该游览器暂不支持文件上传代码上传失败文件不要超过上传成功图片的裁切使用的插件图片处理图像裁剪插件

使用了node以后，图片上传可以由node服务器来完成，保存后的图片地址再传给后台进行保存。简单的文件操作切割，压缩什么的也可以交给node服务器完成。

图片的上传 使用的插件

formidable: form 表单上传
uuid: 生成通用识别码

javaScript代码

function fileUpload(input,callback){
   if(typeof(Worker) !== "undefined"){
     var data = new FormData();         
     data.append("file",$(input)[0].files[0]);
     
     $.ajax({
       url : "/fileUpload",
       type : "POST",
       data : data,
       processData: false,
       contentType: false, 
       success : function(ret){
          callback(ret); 
       },
       error : function(ret){
          callback(ret);
       } 
     }) 
   }else{
     alert("该游览器暂不支持文件上传");
     
     return 
   }
}

node代码

app.route("/fileUpload")    
.post(function(req, res, next) {
   var form = new formidable.IncomingForm();
   
   form.parse(req,function(err,fields,files){
        if(err || !files.file){
           res.jsonp({
              succeed : false,
              status : 400,
              errMsg : "上传失败"
           })
           return 
        }
        
        if (files.file.size > 16*1024*1024){
           res.jsonp({
              succeed : false,
              status : 402,
              errMsg : "文件不要超过16Mb"
           })
           return 
        }
        
        var old_path = files.file.path,
            fileReadStream = fs.createReadStream(old_path); 
        
        var name = uuid.v1(),
              tt = name.split("-")[0],
              f1 = tt.slice(0, 2),
              f2 = tt.slice(2, 4),
              f3 = tt.slice(4, 6),
              f4 = tt.slice(6, 8),
              a1 = "/../public/uploads/upFile/" + f1 + "/" + f2 + "/" + f3 + "/" + f4,
              a2 = "/" + files.file.name,
              folder = __dirname + a1,
              new_path = folder + a2,
              visit = "/uploads/upFile/" + f1 + "/" + f2 + "/" + f3 + "/" + f4 + a2;

        mkdirs(folder, function(bbb) {

            var fileWriteStream = fs.createWriteStream(new_path);

            fileReadStream.pipe(fileWriteStream);

            var src = path.normalize(visit),
                reg = //g,
                out = src.replace(reg, "/");

            res.jsonp({
                succeed: true,
                distinctImg: out,
                errMsg: "上传成功"
            })

        })    
              
   })
})

图片的裁切 使用的插件

gm: 图片node处理
jcrop: 图像裁剪jquery插件

海外云主机服务器托管 php图片上传裁切实现图片上传 asp实现上传图片 android 实现上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78776.html

开发H5时背景照片兼容不同手机屏幕处理的最佳实践

摘要：翻页的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在背景图上的处理相当要注意。设置背景图的是生成图片会是这样的效果比例的手机裁切的是靠下的部分，而比例的手机裁切的是靠右的部分。最近在重新做过去常做的翻页H5，关于背景图有些新的经验心得分享。翻页H5的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在...

MonoLog 2019-08-30 15:55 评论0 收藏0
开发H5时背景照片兼容不同手机屏幕处理的最佳实践

摘要：翻页的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在背景图上的处理相当要注意。设置背景图的是生成图片会是这样的效果比例的手机裁切的是靠下的部分，而比例的手机裁切的是靠右的部分。最近在重新做过去常做的翻页H5，关于背景图有些新的经验心得分享。翻页H5的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在...

joyvw 2019-08-02 14:14 评论0 收藏0
手把手教你写vue裁切预览组件

摘要：版本裁切工具，包含预览功能最终效果源码地址第一步先用安装脚手架不会安装的看官网初始化第二步创建文件新建里新建，在配置访问路由具体看源码最终生成的文件结构如下图第三步注册组件引用所有插件导入插件入口文件如果已安装就跳过注册插件全 vue版本裁切工具，包含预览功能最终效果： https://qiuyaofan.github.io/vue-crop-demo/ 源码地址： https:/...

FreeZinG 2019-08-22 17:02 评论0 收藏0
本文教你用了python图片剪裁

　　Python语言的表达照片处理使人们常常所使用的层面,那样我们应该怎么实现图片的裁切呢?接下来本文关键为大家介绍了关于用python图片剪裁的资料,原文中根据案例编码推荐的十分详尽,必须的小伙伴可以借鉴一下　　怎么使用python图片剪裁　　以上如图所示，这也是1张包括了各种象棋棋子的照片。我们应该将在其中每个棋盘都裁切出去，这时可以借助python的PIL库成功。　　一、组装PIL库　　假如...

89542767 2023-01-12 13:45 评论0 收藏0