chrome系列-扩展程序开发学习-做一个自己的图床

月光魔力鸭

2018-09-10 09:25 阅读 391 喜欢 0 chrome系列图床

写到这里，基本上就完成了我之前一篇文章中写的，我要做一个自己的图床的小程序了。在最初我要做图床的时候，发现在谷歌扩展程序上一无所知，所以才开始学习的这个，到这一步，至少能勉强能跑通自己的小程序了。

功能整理

支持在粘贴板复制图片到页面中
复制的图片自动上传到后台资源服务器进行管理
可以查看所有上传的图片的列表

至于其他的一些简单的功能，我这里准备后续慢慢完善，先来一个能跑通的。

manifest.json

{
    "manifest_version":2,
    "name":"easypic",
    "version":"1.0",
    "description":"easypic-简单易用的图床",
    "icons":{
        "16":"img/icon16.png"
    },
    "browser_action":{
        "icon":{
            "16":"img/icon16.png"
        },
        "default_title":"简单易用的图床",
        "default_popup":"popup.html"
    },
    "permissions":[
        "http://localhost:3000/*"
    ]
}

根据上面可以看到，页面有popup.html ，后台是本地跑的一个nodejs 的 资源服务器.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EasyPic-图床管理</title>
    <link rel="stylesheet" type="text/css" href="plugins/byy/css/default/byy.css">
    <style>
        html,body{
            width:700px;
            height:500px;
        }
        #paste{
            width:100%;
            height:100%;
            min-height:300px;
            margin:10px;
        }
        #paste:focus,#paste:active{
            border:1px solid #ddd;
        }
        .empty{
            text-align:center;
            vertical-align:middle;
        }
        .pic-block{
            width:20%;
            float:left;
            padding:5px;
            box-sizing:border-box;
            border:1px solid #f2f2f2;
        }
        .pic-block img{
            max-width:100%;
            max-height:100px;
            cursor : pointer;
        }
        .pic-page{position:absolute;bottom:0px;}
        .pic-wrap{text-align:center;height:100px;line-height:100px;}
        .pic-info{
            padding:5px 0px 2px 0px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="byy-tab byy-tab-brief" style="">
            <ul class="byy-tab-title">
                <li class="byy-tab-this">上传图片</li>
                <li class="">图床管理</li>
            </ul>
            <div class="byy-tab-content" style="">
                <div class="byy-tab-item show">
                    <div id="paste" class="empty" contenteditable="false" >
                        请在此区域粘贴图片
                    </div>
                </div>
                <div class="byy-tab-item">
                    <div class="pic-list byy-clear">
                        
                    </div>
                    <div class="pic-page">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 
    1. 监听粘贴
    3. 拖动
    3. 获得图片数据上传到服务器，并返回地址。
    -->
</body>
</html>
<script type="text/javascript" src="plugins/byy/byy.js"></script>
<script type="text/javascript" src="lib/main.js"></script>

前台的框架使用了 byy框架，地址http://www.byyui.com （打个小广告）.

接下来主要是：监听复制事件，获得图片，上传到后台，然后返回地址。

main.js

function EasyPic (){
    var host = 'http://localhost:3000';
    var opts = {
        paste : 'paste',
        host : host,
        upload : host+'/upload',
        load : host+'/list'
    };
    this.opts = opts;


}
//根据图片获得base64
EasyPic.prototype.getImageUrl = function(item,cb){
    var thiz = this;
    var reader = new FileReader();
    reader.onload = function(e){
        //this.result 可以得到图片的base64
        var urldata = this.result;
        cb(urldata);
    }
    reader.readAsDataURL(item);
}
//展示图片
EasyPic.prototype.showPic = function( path ){
    var opts = this.opts;
    path = opts.host + path;
    $('#'+opts.paste).html('<div style="text-align:center;"><img src="'+path+'" style="max-height:200px;display:inline-block;max-width:100%;width:auto;" /></div><div><p></p><a href="target="_blank" href="'+path+'">'+path+'</a><p><span class="byy-btn" data-href="'+path+'" byy-filter="copy">复制地址</span></p></div>');
}
//将base64图片保存
EasyPic.prototype.savePic = function( imageString,cb ){
    var opts = this.opts;
    var ldx = byy.win.load(1);
    $.ajax({
        url : opts.upload,
        type : 'POST',
        data : {img : imageString},
        success : function(res){
            byy.win.close(ldx);
            cb(res);
        },
        error : function(){
            byy.win.close(ldx);
            byy.win.msg('服务君感冒了..请尽快联系 chrunlee@foxmail.com ');
            cb(null);
        }
    });
}
EasyPic.prototype.loadPicList = function( pageparams ){
    var thiz = this,opts = thiz.opts;
    pageparams = pageparams || {
        curr : 1,
        pagesize : 10
    };
    $.ajax({
        url : opts.load,
        type : 'GET',
        data : {
            curr : pageparams.curr,
            pagesize : pageparams.pagesize
        },
        success : function( res ){
            var obj = byy.json(res);
            //渲染图片
            var rows = obj.rows;
            if(rows && rows.length > 0){
                var str = '';
                rows.forEach(function( item ){
                    var href = opts.host + item;
                    str += '<div class="pic-block"><div class="pic-wrap"><img src="'+href+'" /></div><div class="pic-info text-center"><span class="byy-btn small" data-href="'+href+'" byy-filter="copy">复制</span></div></div>';
                });
                $('.pic-list').html(str);
            }
            byy.page({
                selector : '.pic-page',
                total : obj.total,
                curr : obj.curr,
                always : true,
                pagesize : obj.pagesize,
                callback : function( param ){
                    thiz.loadPicList(param);
                }
            });
        },
        error : function(){
            $('.pic-list').html('获取图片列表失败');
        }
    });
}
//事件绑定
EasyPic.prototype.bind = function(){
    var thiz = this;
    var opts = thiz.opts,
        $paste = $(opts.paste);
    //paste 绑定事件
    document.getElementById(opts.paste).addEventListener('paste',function(event){
        if(event.clipboardData.items[0].type.indexOf('image') > -1){
            var file = event.clipboardData.items[0].getAsFile();
            thiz.getImageUrl(file,function(string){
                thiz.savePic(string,function(path){
                    if(path){
                        thiz.showPic(path);
                    }
                });
            });
        }else{
            byy.win.msg('粘贴板中没有内容或不是图片');
            return false;
        }
        return false;
    });
    //点击复制
    $('body').on('click','[byy-filter="copy"]',function(ev){
        var href = $(this).data('href');
        var div = document.createElement('input');
        div.value = href;
        div.id = 'copytarget';
        $('body').append($(div));
        div.focus();
        div.select();
        document.execCommand('copy', false, null);
        div.remove();
        // ev.clipboardData.setData("Text", href);
        byy.win.msg('复制成功');
    });
}

EasyPic.prototype.start = function(){
    console.log('start');
    this.bind();
    this.loadPicList();
}

byy.require(['jquery','win','page'],function(){
    var pic = new EasyPic();
    pic.start();
});

代码我就不详细解释了，都是比较简单的逻辑。

顺带写下nodejs 的路由 index.js

var express = require('express');
var router = express.Router();
var path = require('path');
var fs = require('fs');
function guid(prefix){
    var counter = 0;
    return (function( prefix ) {
        var guid = (+new Date()).toString( 32 ),i = 0;
        for ( ; i < 5; i++ ) {
            guid += Math.floor( Math.random() * 65535 ).toString( 32 );
        }
        return (prefix || 'byy_') + guid + (counter++).toString( 32 );
    })( prefix )
}
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
//图片上传
router.post('/upload', function(req, res,next){
    var imgData = req.body.img;
    //过滤data:URL
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    var dataBuffer = new Buffer(base64Data, 'base64');
    var nowDir = path.dirname(__dirname);
    var imgname = guid();
    imgname = imgname + '.png';
    var folder = path.join(nowDir,'public','pic',imgname)
    if(!fs.existsSync(path.dirname(folder))){
        fs.mkdirSync(path.dirname(folder));
    }
    var imgpath = '/pic/'+imgname;
    fs.writeFile(folder, dataBuffer, function(err) {
        if(err){
          next(err);
        }else{
          res.end(imgpath);
        }
    });
});

//获得路径下的所有图片信息分页展示
router.get('/list',function( req, res, next){
    var dest = path.join(path.dirname(__dirname),'public','pic');
    //获得文件信息
    var page = req.query.curr || 1,pagesize = req.query.pagesize || 10;
    fs.readdir(dest,function(err,files){
        if(err){
            next(err);
        }else{
            var total = files.length;
            var arr = files.splice( (page-1)*pagesize,pagesize);
            if(arr){
                arr = arr.map(function(t){
                    return '/pic/'+t;
                });
            }
            var rs = {
                total : total,
                curr : page,
                pagesize : pagesize,
                rows : arr
            };
            var str = JSON.stringify(rs);
            res.end(str);
        }
    })
});

module.exports = router;

效果图

后续会继续完善这个小东东，或许会做一些其他的小程序。关于chrome的扩展学习，暂时就写到这里，以后也可能会继续写一部分。目前我使用的学习资料是一本PDF(没钱买实体书啊).[CHROME扩展及应用开发] 地址:https://download.csdn.net/download/chrunlee/10278321

转载请注明出处: https://chrunlee.cn/article/chrome-learn-6.html

感谢支持!

赞赏支持

喜欢

评论信息 (请文明评论)

暂无评论，快来快来写想法...

chrome系列-扩展程序开发学习-做一个自己的图床

功能整理

manifest.json

效果图

评论信息 (请文明评论)

推荐