/*picBase是base64图片带头部的完整编码*/
function putb64(picBase){
/*picUrl用来存储返回来的url*/
var picUrl;
/*把头部的data:image/png;base64,去掉。(注意:base64后面的逗号也去掉)*/
picBase=picBase.substring(22);
/*通过base64编码字符流计算文件流大小函数*/
function fileSize(str)
{
var fileSize;
if(str.indexOf('=')>0)
{
var indexOf=str.indexOf('=');
str=str.substring(0,indexOf);//把末尾的’=‘号去掉
}
fileSize=parseInt(str.length-(str.length/8)*2);
return fileSize;
}
/*把字符串转换成json*/
function strToJson(str)
{
var json = eval('(' + str + ')');
return json;
}
var url = "http://up.qiniu.com/putb64/"+fileSize(picBase);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.readyState==4){
var keyText=xhr.responseText;
/*返回的key是字符串,需要装换成json*/
keyText=strToJson(keyText);
/* http://ojvh6i96g.bkt.clouddn.com/是我的七牛云空间网址,keyText.key 是返回的图片文件名*/
picUrl="http://ojvh6i96g.bkt.clouddn.com/"+keyText.key;
alert(picUrl);
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken 这里填写你的token(注意前面的UpToken后面有空格)");
xhr.send(picBase);
}
function putb64(){
var pic = "填写你的base64后的字符串";
var url = "http://upload.qiniu.com/putb64/20264"; //非华东空间需要根据注意事项 1 修改上传域名
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken 填写你从服务端获取的上传token");
xhr.send(pic);
}
上传base64编码图片到七牛云 开发文档
拖曳图片
HTML5学习之FileReader接口
DataURL与File,Blob,canvas对象之间的互相转换的Javascript
canvas转换为dataURL (从canvas获取dataURL)
File对象转换为dataURL、Blob对象转换为dataURL
File对象也是一个Blob对象,二者的处理相同。
dataURL转换为Blob对象
dataURL图片数据绘制到canvas
先构造Image对象,src为dataURL,图片onload之后绘制到canvas
File,Blob的图片文件数据绘制到canvas
还是先转换成一个url,然后构造Image对象,src为dataURL,图片onload之后绘制到canvas
利用上面的 readBlobAsDataURL 函数,由File,Blob对象得到dataURL格式的url,再参考 dataURL图片数据绘制到canvas
不同的方法用于构造不同类型的url (分别是 dataURL, objectURL(blobURL), filesystemURL)。这里不一一介绍,仅以dataURL为例。
filesystemURL不是指本地文件URL的形式(file:///….), 而是格式类似于 filesystem:http://... 的一种URL,支持沙盒文件系统的浏览器支持(目前仅Chrome)支持。
Canvas转换为Blob对象并使用Ajax发送
转换为Blob对象后,可以使用Ajax上传图像文件。
先从canvas获取dataurl, 再将dataurl转换为Blob对象
PHP后端跨域HEADER头
js实现拖拽上传图片的实现思路
拖拽主要用到两个事件 dragover drop
预览,主要是文件转换为base64,或者blob,或者canvas
file -> base64
file -> blob
上传 需要用到FormData模拟表单数据 或直接form上传
不做处理直接ajax上传
如果图片上传前要修改,如对图片进行裁剪,旋转等操作(前端),一般是转化为canvas处理。
随后根据后台可能把canvas转成base64字符串上传或转成blob对象上传,
https://segmentfault.com/q/1010000002885157
HTML5 本地裁剪图片并上传至服务器
你真的会使用XMLHttpRequest吗?
先创建一个空的FormData对象,然后使用append()方法向该对象里添加字段,如下:
注: 字段"userfile"和"webmasterfile"的值都包含了一个文件.通过 FormData.append()方法赋给字段"accountnum"的数字被自动转换为字符(字段的值可以是一个Blob对象,一个File对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).
在该例子中,我们创建了一个名为oMyForm的FormData对象,该对象中包含了名为"username", "accountnum", "userfile" 以及 "webmasterfile"的字段名,然后使用XMLHttpRequest的send()方法把这些数据发送了出去."webmasterfile"字段的值不是一个字符串,还是一个Blob对象.
关于一个事件触发多个响应函数:
这个函数写得很巧妙。利用匿名函数
javascript在网页中实现读取剪贴板粘贴截图功能
这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图、旺旺截图或者其它截图软件,需要的朋友可以参考下
见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下。
可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好。
输入框的结构代码:
为输入框绑定粘贴事件:
粘贴事件的 Event 接口对象提供了一个 clipboardData 接口,该接口就保存了系统剪贴板中的数据,如上面所说,目前只有高版本的 Chrome 浏览器能直接访问系统剪贴板的数据。这就给截屏后保存到剪贴板中的图片于网页直接进行交互提供了一个入口。
这里所说的截屏,就是 QQ 提供的截屏或者系统自带的 PrtScn 键的截屏功能,或者其他第三方软件提供的截屏功能。
从剪贴板中取到了图片数据,就可以用 FileReader 对其进行读取了。
很短的代码就实现了,可以使用以下。
七牛上传同名文件错误?提示防范处理机制?