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

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

BUG集散地

2018-09-10 09:25 阅读 37 喜欢 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


如果对你有用的话,请赏给作者一个馒头吧 ...或帮点下页面底部的广告,感谢!!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
ubuntu 配置nginx反向代理,这里简单记录下,后续再复习..
之前做了一段时间的上传相关的断点续传和秒传功能,这里整理下大体思路
在程序中,会有需要后台一直运行的场景。这一节我们来做一个监控某网站的运行状态,如果没有运行,则改变当前的图标。
前一阵子做了个图床,可以粘贴上传,查看服务器上的文件... 但是自己的服务器总是有问题..空间还小,就怕哪天没钱续费了。同事昨天想要一个七牛的图床,在网上找了下,只找到了 qiniu upload files插件,自己使用了下,挺好用,但是没有复制粘贴
需求:可能会有在页面加载的时候想执行某个js,例如统计页面的DOM等等。
本来是想做一个图床,然后在chrome扩展中添加上,但是发现chrome的扩展有点毫无头绪,只能从头练习,从头学了。
上一张中已经完成了比较简易的3D全景浏览,但是...这是写死在xml中的,对于我们实际的项目,这种情况是不可能适应的。所以,来了解下如何动态加载xml已经设置对应的热点。
接下来,我们综合上面的配置,再加一个选项页面配置,做一个天气预报的小栗子。