Node.js学习第九天笔记之切图功能

1 切图

• 图像的裁切功能
  • 前提条件：下载安装GraphicsMagick
  • 模块：第三方模块gm模块；
  • 步骤：
    1. 引入模块；引入gm模块；var gm = require('gm');
    2. 使用gm()；
       • gm括号中为需要裁切的图片的地址，
       • resize()为裁切后的宽高，里面设置"!"，则为强制，按照设置大小生成文件，否则，等比例生成文件；
       • crop()为裁切的尺寸，分别为宽，高，左边距，上边距；
       • write("path",function(err){}):指的是生成文件放置的地址和名称，匿名函数中设置裁切成功后的操作；
       • 代码：

        var gm = require('gm');
        gm("./img/meinv.jpg")
            .crop(240,100,720,415)
            .resize(200, 200,"!")//强制变为200*200的文件；
            .write("./img/meinv2.jpg",function (err) {
                if(err){
                    res.send({"bok":false,"msg":err});
                }else{
                    res.send({"bok":true,"msg":"截图成功"})
                }
            })
       

2 扒网站，实现截图效果

• 前端开发仓库
  • 网站地址：前端开发仓库
  • 在网站上扒下截图的文件；jQuery Jcrop 图像裁剪
• node.js实现切图；
  • 思路：
    • 发送get请求"/index"，渲染页面；
    • 给按钮添加点击事件，在事件触发后，通过ajax发送get请求，将数据传到服务器；
    • 获取原代码中的截图元素，获取其宽高和定位left,top值；作为切图的数值；
    • 服务器拿到数据，通过gm模块进行裁切原图；然后保存；
    • 裁切成功后，响应给页面，通过ajax中success拿到数据，弹出提示，刷新页面；
  • 注意：
    • 必须在点击事件中，获取元素，拿到数据；不能再点击事件外拿，否则，拿到的数据均为0；
    • 如果图片在页面中被缩放，需要拿到比例，传给服务器，因为，服务器是在原图上裁切的；
  • 知识点：
    • 如果一个元素设置定位，在jQuery中通过$("xx").position().left和$("xx").position().top来获取left和top值；
  • 代码：
    • ejs中自己写的script代码：
    • 服务器代码：

     const express=require("express");
     const fs=require("fs");
     const gm=require("gm");
     const app=express();
     app.listen(8080);
     
     //设置ejs模板引擎
     app.set("view engine","ejs");
     //设置静态资源目录
     app.use(express.static("./public"));//此静态资源是为了引入css和js等；
     //设置静态资源目录
     app.use(express.static("./img"));//此静态资源是为了引入图片；
     
     //发送请求渲染页面；
     app.get("/index",function (req, res) {
         res.render("index");
     });
     //ajax发送请求，截图
     app.get("/jietu",function (req, res) {
         //获取到参数值
         var {w,h,l,t}=req.query;
         //切图
         gm("./img/meinv.jpg")
             .crop(w,h,l,t)
             .write("./img/meinv2.jpg",function (err) {
                 if(err){
                     res.send({"bok":false,"msg":err});
                 }else{
                     res.send({"bok":true,"msg":"截图成功"})
                 }
             })
     });
    

3 封装后的裁图文件

• 封装后的文件
  • 文件存储github地址：cutImg
  • 服务器cutapp.js

   //1.express三步创建服务器基本构架
   const express=require("express");
   const app=express();
   app.listen(3333,function () {
       console.log("3333 server is running");
   });
   //2.引入node系统模块
   const path=require("path");
   const fs=require("fs");
   //3.引入第三方模块
   const formidable=require("formidable");
   const sd=require("silly-datetime");
   const gm=require("gm");
   
   //4.设置ejs模板引擎
   app.set("view engine","ejs");
   
   //5.设置静态资源目录
   //1）加载ejs文件中的css,js等静态资源
   app.use("/public",express.static("./public"));
   //2）加载uploads文件夹中上传的图片
   app.use("/uploads",express.static("./uploads"));
   //3）加载avatar文件夹上的裁切后的图片
   app.use("/avatar",express.static("./avatar"));
   
   //6.设置路由
   //1）加载上传文件目录
   app.get('/tofile',function (req, res, next) {
       res.render('tofile',{});
   });
   //2）提交上传文件数据
   app.post('/todata',function (req, res, next) {
       //新建form对象
       var form=new formidable.IncomingForm();
       //设置文件上传路径
       form.uploadDir="./uploads/";
       //解析上传的文件参数
       form.parse(req,function (err, fields, files) {
           if(err){
               console.log('formidble错误');
               return;
           }
           var oldPath=files.myfile.path;
           var originName=files.myfile.name;
           var originNameObj=path.parse(originName);
           var newName="gms"+sd.format(new Date(),"YYYYMMDD_HHmmss")+originNameObj.ext;
           var newPath=form.uploadDir+newName;
           //更换上传的文件路径和名字
           fs.rename(oldPath,newPath,function (err) {
               if(err){
                   console.log('图片重命名失败');
                   return;
               }
               res.send({'bok':true,'msg':'上传图片成功！！！','imgsrc':newName});
           });
       })
   });
   //3）渲染裁切图页面
   app.get('/showcutimg',function (req, res, next) {
       var cutimgSrc=req.query.cursrc;
       res.render('mycut',{
           imgsrc:cutimgSrc
       })
   });
   //4）裁切图片
   app.get('/cutimg',function (req, res, next) {
       var curobj=req.query;
       gm("./uploads/"+curobj.imgsrc)
           .crop(curobj.w,curobj.h,curobj.x,curobj.y)
           .resize(curobj.xsize,curobj.ysize,"!")
           .write("./avatar/"+curobj.imgsrc,function (err) {
               if(err){
                   res.send({"bok":false,"msg":err});
               }else{
                   res.send({"bok":true,"msg":"截图成功"})
               }
           });
   });
  

  • 上传页面tofile.ejs

   
   
   
       
       
       
       
       
   
       
       
   
       
       
       
   
   
   
  
       
  
           
  
               
  
                   
  请上传图像
                   上传文件
                   
                   
  
                       
                            Check me out
                       
                   
                   上传
               
           
       
   
   
   
   
   
   
   
   
   
  

  • 裁切页面cutimg.ejs

   
   
   
       
       
       
       
       
       
       
       
       
       
       
       
   
   
   
  
       
  
           
  
               
  
                   
                   
  
                       
  
                           
                       
                   
                   
  
                       提交截图
                   
                   
  
               
           
       
   
   
   
   
  

  • 项目介绍

   1.项目介绍：完成图片上传到裁切的功能；
   2.项目依赖
     express gm ejs formidable silly-datetime
   3.项目运行
     1）下载node，运行cutapp.js服务器
     2）网页地址：http://localhost:3333/tofile  加载上传文件页面
   4.目录分析
     uploads: 图片上传后的地址
     avatar: 图片裁切后，保存的地址
  

4 知识点

• gm的一些命令
  • 显示图像文件详细信息：gm identify a.jpg;
  • 格式转换：gm convert a.jpg a.png;
  • 注意：必须在图片的目录下；运行命令；