使用Node完成图片下载

2020-02-23

前几天，有个前端同事遇到这样一个问题，有个图片的URL，使用<img src='ImageURL'></img>的方式加载图片可以正常显示，但是在浏览器直接访问图片地址，页面会返回一片乱码，他预期的效果是浏览器直接跳到浏下载，这样他就可以在前端写个循环，把他想下载的所有图片下载下来。

我第一直觉，这事在后端做啊，用Node做还不是分分钟，但是我还是随手搜了一下，前端下载图片的方法，大概找到以下两种:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image download</title>
</head>
<script>
    //下载图片地址和图片名
    var downloadIamge = function (imgsrc, name) {
        var image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            let a = document.createElement("a"); // 生成一个a元素
            let event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
    }
    var saveImg = function (Url) {
        var blob = new Blob([''], { type: 'application/octet-stream' });
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = Url;
        a.download = Url.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0];
        var e = document.createEvent('MouseEvents');
        e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        a.dispatchEvent(e);
        URL.revokeObjectURL(url);
    }
    // downloadIamge('http://caibaojian.com/wp-content/themes/blue/images/github1.png', 'aa.png')
    saveImg('http://caibaojian.com/wp-content/themes/blue/images/github1.png')
</script>

<body>

</body>

</html>

不管是直接访上面的html页面，还是把页面放到web服务器上访问，两种方法都没有试验成功，第一种方法始终报跨域错误，第二种方法浏览器中打开了页面但是没有自动下载。

那还是用Node试试吧，Node的思路很简单

发送http请求，在 data 回调中缓存请求返回的数据；
在http的 end 事件回调里面把缓存的数据保存成文件；

直接上代码

var http = require("http");
var fs = require("fs");
// var request = require('request');
var url =
  "http://caibaojian.com/wp-content/themes/blue/images/github1.png";
var filename = "aa.png";
http
  .get(url, resp => {
    let data = "";
    // A chunk of data has been recieved.
    resp.on("data", chunk => {
      data += chunk;
    });

    // The whole response has been received. Print out the result.
    resp.on("end", () => {
      // let buff = Buffer.from(data)
      // console.log(buff);
      fs.writeFileSync(filename, data, function(err) {
        if (err) {
          return console.error(err);
        }
      });
    });
  })
  .on("error", err => {
    console.log("Error: " + err.message);
  });

一阵惊喜，运行目录出现了aa.png文件，双击打开

这现象有点像是编码问题，Google了一下，确实，需要设置一下请求数据返回的格式和文件存储的格式为二进制，解决办法如下：

 // 设置http请求返回数据的格式为二进制
resp.setEncoding('binary');

// 设置写文件类型为二进制
fs.writeFileSync(filename, data, 'binary',function(err) {})

完整代码如下：

var http = require("http");
var fs = require("fs");
// var request = require('request');
var url =
  "http://caibaojian.com/wp-content/themes/blue/images/github1.png";
var filename = "aa.png";
http
  .get(url, resp => {
    let data = "";
    // A chunk of data has been recieved.
    // 设置http请求返回数据的格式为二进制
    resp.setEncoding('binary');
    resp.on("data", chunk => {
      data += chunk;
    });

    // The whole response has been received. Print out the result.
    resp.on("end", () => {
      // 设置写文件类型为二进制
      fs.writeFileSync(filename, data, 'binary',function(err) {
        if (err) {
          return console.error(err);
        }
      });
    });
  })
  .on("error", err => {
    console.log("Error: " + err.message);
  });

总结

程序员不要眼高手低，遇到问题要动手试一下，在试的过程中你会遇到意想不到的新问题，不断的解决问题才会有提高；
在寻求解决办法的时候你会收获更好的解决办法，比如图片下载其实可以用几行代码就可以实现
1
2
3
var fs = require("fs");
var request = require('request');
request(url).pipe(fs.createWriteStream(filename));

展开全文 >>

使用Hexo搭建博客系统心得

2020-02-12

域名备案完成已经有一段时间了，还记得当时申请这个域名的初衷是搭建一个博客系统，记录自己的学习和生活。我非常清楚的知道，自己是一个容易放弃的人，我害怕每次“动手”只不过是放弃次数+1。这一次我又一次战战兢兢的开始了，不知道能坚持多久，走着看吧。
第一篇就把我花了一下午时间搭建的这个博客系统的过程做个记录和总结吧。

搭建原理

从原理图我们可以看出，一篇文章从生成->编写->发布->浏览器访问的整个过程，文章的生成和打包发布由hexo完成，hexo最终会将名为“xxx.md”的一篇文章编译成包括Html、JavaScript、Css的静态文件，通过“hexo-deployer-git”插件，将静态页面推送到云主机上的仓库中，仓库配置了post-update钩子，将仓库checkout到发布目录，使用Nginx提供博客页面的访问服务。

搭建步骤

本地电脑需要安装node、git、hexo，云主机需要安装git、nginx
云主机创建git库，接收hexo发布的静态页面推送
1
2
mkdir ~/repo.git && cd ~/repo.git
git init --bare
配置post-update钩子，当有新推送，会将仓库checkout到web发布目录
1
git --work-tree=/var/www --git-dir=~/repo.git checkout -f

修改nginx.conf文件，并启动Nginx服务

server {
     listen       80 default_server;
     listen       [::]:80 default_server;
     server_name  supercoder.net;
     // 修改root为真实的发布目录
     root         /var/www;
     # Load configuration files for the default server block.
     include /etc/nginx/default.d/*.conf;
     charset     utf-8;
     location / {
     }

     error_page 404 /404.html;
         location = /40x.html {
     }

     error_page 500 502 503 504 /50x.html;
         location = /50x.html {
     }
 }

1 2	// 启动服务 nginx

使用hexo命令创建博客系统并安装相关依赖，hexo-deployer-git需要额外安装
1
2
3
4
hexo init <folder>
cd <folder>
npm install
npm install hexo-deployer-git

修改_config.yml文件，完成远程推送相关配置

deploy:
type: git
//把IP修改主机的真实IP
repo: root@11.22.33.44:~/repo.git

新建文章，打包发布

//新建一篇文章
hexo new "新文章"
//编辑 新文章.md 完成文章编写
...
//打包并部署
hexo g -d

总结

hexo-deployer-git插件向云终端推送使用ssh协议，如果想达到不使用密码直接完成推送的效果，需要生成一个秘钥并将此秘钥与云主机绑定，本地电脑便可使用该秘钥直接访问云主机而不需要输入密码；秘钥的生成与绑定一般在云主机的管理页面上就可以完成，你只需要把秘钥下载到本地并放置到指定目录即可；
如果选择hexo的ftp插件完成推送动作，可以直接将静态页面推送到云主机上的发布目录，而不需要git仓库作为中转；
可以直接将hexo部署到云主机上，配合博客后台管理插件，例如hexo-admin，通过浏览器来完成文章的管理。

展开全文 >>