写到这里，基本上就完成了我之前一篇文章中写的，我要做一个自己的图床的小程序了。在最初我要做图床的时候，发现在谷歌扩展程序上一无所知，所以才开始学习的这个，到这一步，至少能勉强能跑通自己的小程序了。
功能整理
- 支持在粘贴板复制图片到页面中
- 复制的图片自动上传到后台资源服务器进行管理
- 可以查看所有上传的图片的列表
至于其他的一些简单的功能，我这里准备后续慢慢完善，先来一个能跑通的。
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
