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 全量逻辑备份. ...
随机推荐
- springMVC+freemarker实现自定义标签
在开发过程中,有些需要引用到重复的页面,或者动态的数据 修改数据库是可以实现,但是太麻烦了. freemarker自定义标签在开发中用途很广,就说个入门实例吧 基于springmvc. 首先需要导入对 ...
- Codeforces Round #436 (Div. 2) E. Fire(dp 记录路径)
E. Fire time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...
- TCP/IP——链路层简记
在TCP/IP协议族中链路层的主要目的有三个: 1,为IP模块发送和接受IP数据报. 2,为ARP模块发送ARP请求和接受ARP应答. 3,为RARP模块发送RARP请求和接受RARP应答. 链路层包 ...
- NetCore在Centos7上部署和Nginx集群部署访问
NetCore在Linux上部署 工具:WMWare虚拟机,Wmware12,CentOS7ISO镜像,VS2017 1.安装虚拟机,过程略,网上一搜一大把 2.用VS2017建一个NetCore的W ...
- 【UOJ #105】【APIO2014】Beads and wires
http://uoj.ac/problem/105 好神的dp啊. 确定一个点为根之后,蓝线只能是竖着的,不能横跨兄弟. 枚举每个点为根进行树形dp是\(O(n^2)\)的,\(f(x,0/1)\)表 ...
- http://www.tangible-engineering.com/tangible_t4editor.html
T4 Template Tutorials http://www.tangible-engineering.com/tangible_t4editor.html
- Druid 配置_StatFilter
Druid内置提供一个StatFilter,用于统计监控信息. 1. 别名配置 StatFilter的别名是stat,这个别名映射配置信息保存在druid-xxx.jar!/META-INF/drui ...
- hdu4445 CRAZY TANK 2012金华赛区现场赛D题
简单推下物理公式 对角度枚举 物理公式不会推啊智商捉急啊.... 到现在没想通为什么用下面这个公式就可以包括角度大于90的情况啊... #include<iostream> #inclu ...
- fmri资源站点
1. MRI analysis tutorials:http://www.mccauslandcenter.sc.edu/CRNL/wp-content/tools/tutorial/index.h ...
- combogrid 摘要
可装载组合框 - ComboBox 继承自$.fn.combo.defaults,通过$.fn.combobox.defaults覆盖默认值 combobox显示的是一个可以编辑的文本框和一个下拉列表 ...