Chrome插件-把网页图片上传到七牛空间一
功能:图片上右键,点击上传图片到七牛,把图片上传的指定空间并返回图片URL。
Chrome插件本质就是js代码,但是里面有一些限制,比如事件绑定等和普通js的绑定是有区别的,主要是为了安全性考虑。
做的比较粗糙,但是已经可以满足我得基本需要了。
七牛的上传需要accessToken,左右要存储使用人的开发者秘钥,这里使用HTML5的本地存储都存在了本地,所以这个控件最好只在自己的电脑上使用,之后可以考虑把秘钥加密存储,最好的办法还是存在服务器上,用一个连接来获取token。
下面使用图片来说明一下整体的流程
点击插件图标,填写信息并保存
在网页图片上面右键
弹出新窗口,在新窗口上面点击上传
整体流程就是这样,算出达到了初步的目的,目前遇到的问题是:上传成功几个之后,会上传失败,服务器返回401,还不确定原因在哪里
开发Chrome需要先建立一个文件夹:ImageToQiniu,然后再里面建立一个json文件:Mainfest.json
这里填写的插件的配置信息,版本,权限等一系列参数。
{
"name": "上传图片到七牛",
"version": "1.2",
"manifest_version": 2,
"description": "上传图片到七牛",
"background" : { "scripts":["background.js"]},
"icons": {
"16": "img/qiniu.png",
"48": "img/qiniu.png",
"128": "img/qiniu.png"
},
"browser_action": {
"default_icon": "img/qiniu.png",
"default_title": "上传图片到七牛",
"default_popup": "popup.html"
},
"optional_permissions": [],
"permissions": [
"contextMenus",
"tabs",
"http://*/*",
"https://*/*"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
browser.action
这个是浏览器动作,设置之后会在浏览器的插件栏里生成一个图标。点击之后会显示popup.html页面
所以还需要建立一个popup.html的页面:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html,body{width:400px;height: 200px;margin: 0 0;padding: 20px;font-size: 14px;}
input[type=text]{width: 220px; height: 30px; line-height: 20px; padding: 5px 3px;border: 1px solid #333;}
</style>
</head>
<body>
<table>
<tr>
<td>Access:</td>
<td><input type="password" id="txtAc" value=""/></td>
</tr>
<tr>
<td>Secret Key</td>
<td><input type="password" id="txtSk" value=""/></td>
</tr>
<tr>
<td>BuckeName</td>
<td><input type="text" id="txtBucke" value=""/></td>
</tr>
<tr>
<td>图片URL前缀</td>
<td><input type="text" id="txtPrefix" value=""/></td>
</tr>
<tr align="center">
<td colspan="2">
<button type="button" style="width:100px; padding:10px 5px;" id="btnSave">保存</button>
</td>
</tr>
</table>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
这里引用了popup.js文件,如何把js代码直接写到网页里面的话会有一个权限问题,无法运行,只能外联出去。
建立一个popup.js文件,第一步的配置就已经完成。
在Chrome的菜单里面找到扩展程序 -> 点击“加载正在开发的程序” ,然后选择ImageToQiniu文件夹,就可以把刚才开发的程序加载进浏览器。
如图:
Chrome插件-把网页图片上传到七牛空间一的更多相关文章
- 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
- 使用PHP把图片上传到七牛
先从官网下载SDK,然后新建一个文件,里面包括上传,下载,删除 <?php header("Content-Type:text/html; charset=utf8"); r ...
- 一百三十五:CMS系统之UEditoe编辑器集成以及配置将图片上传到七牛
富文本编辑框,选择UEditor 下载地址:http://ueditor.baidu.com/website/download.html 使用说明:http://fex.baidu.com/uedit ...
- laravel上传到七牛图片插件
1.首先引入两个插件 2.在https://developer.qiniu.com/kodo/sdk/1241/php找到安装命令 在终端运行composer require qiniu/php-sd ...
- easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁,只能看到自己的图片)
需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=" ...
- easyui+webuploader+ckeditor实现插件式多图片上传
需求:在ckeditor编辑器上实现多图片上传并要求另外单独选择ckeditor上传的图片作为封面 页面效果说明: 动态效果图: 第一步:页面布局 <html xmlns="http: ...
- 前端手势控制图片插件书写四(图片上传及Ios图片方向问题)
1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...
- KindEditor图片上传到七牛云
自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEdito ...
- 定时备份 MySQL 并上传到七牛
多数应用场景下,我们需要对重要数据进行备份.并放置到一个安全的地方,以备不时之需. 常见的 MySQL 数据备份方式有,直接打包复制对应的数据库或表文件(物理备份).mysqldump 全量逻辑备份. ...
随机推荐
- PIPESTATUS(bash) + pipefail(ksh)
I have two processes foo and bar, connected with a pipe: $ foo | bar bar always exits 0; I'm interes ...
- 通过因特网连接Beaglebone Black
通过因特网连接Beaglebone Black 通过网络连接,可以使你方便地从各种地方以及各种不同的电脑访问到Beaglebone Black.这种连接Beaglebone Black方式通常使用5V ...
- FastReport.Net使用:[16]图片控件使用
FastReport中,图片(Picture)控件的用法? 支持的图片格式 1.BMP, PNG, JPG, GIF, TIFF, ICO, EMF, WMF 支持的数据源 支持图片,数据列,文件名, ...
- luoguP3830 [SHOI2012]随机树 期望概率 + 动态规划 + 结论
题意非常的复杂,考虑转化一下: 每次选择一个叶节点,删除本叶节点(深度为$dep$)的同时,加入两个深度为$dep + 1$的叶节点,重复$n$轮 首先考虑第$1$问,(你看我这种人相信数据绝对是最大 ...
- python3-开发进阶 django-rest framework 中的 版本操作(看源码解说)
今天我们来说一说rest framework 中的 版本 操作的详解 首先我们先回顾一下 rest framework的流程: 请求进来走view ,然后view调用视图的dispath函数 为了演示 ...
- bzoj 2693
收获: 1.积性函数的积也是积性函数,基本的积性函数:常数函数,正比例函数,欧拉函数,Mobius函数,积性函数一般都知道表达式,所以一般都可以在线性筛时搞定. 2.遇到整除求和时,这个东西就已经是最 ...
- BZOJ 4517: [Sdoi2016]排列计数 错排公式
4517: [Sdoi2016]排列计数 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4517 Description 求有多少种长度为 ...
- Unity ScriptObject创建Asset文件
创建ScriptObject可以创建带序列化的资源,只保存数据不用绑定在游戏对象上.创建出来的本子资源可以通过资源加载到游戏里使用.这里介绍一下使用Resources加载. 创建好的asset文件也可 ...
- python 用gensim进行文本相似度分析
http://blog.csdn.net/chencheng126/article/details/50070021 参考于这个博主的博文. 原理 1.文本相似度计算的需求始于搜索引擎. 搜索引擎需要 ...
- Ubuntu14.04和Tiny6410挂载NFS服务!
我是以root身份登录Ubuntu的: 在Ubuntu上执行 #apt-get install nfs-kernel-server //安装NFS服务 在Ubuntu上执行 #mkdir ...