贴吧图片拖放和粘贴上传
// ==UserScript==
// @name pasteAndDragImageIntoTiebaEditor
// @author 527836355
// @id pasteAndDragImageIntoTiebaEditor
// @namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
// @include https://tieba.baidu.com/*
// @include http://tieba.baidu.com/*
// @version 3.2
// @description 贴吧图片拖放和粘贴上传
// @grant GM_xmlhttpRequest
// @grant unsafeWindow
// @grant GM_addStyle
// @grant GM_log
// ==/UserScript==
const editorId='ueditor_replace';//发帖框ID
const parentId='tb_rich_poster_container';//父节点监听
var editor=null;//初始化发贴框
var preview=null;//进度预览
if(!unsafeWindow.FlashImageLoader)//flash上传还是必须的
{
var sc=document.createElement('script');
sc.id='flashUpload';
sc.setAttribute('src','http://static.tieba.baidu.com/tb/static-frs/component/sign_shai/flash_image_loader.js');
document.body.appendChild(sc);
};
if(document.getElementById(editorId))//检测是否存在这个元素
{
init();
}
else //不存在则监听节点变动
{
var target=document.getElementById(parentId);
var observer = new MutationObserver(function(mutations)
{
if(document.getElementById(editorId))
{
observer.disconnect();//停止监听
init();
}
})
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);
}
function init()//初始化，添加事件
{
editor=document.getElementById(editorId);
editor.addEventListener('paste',function (e)//添加事件处理
{
var data=e.clipboardData.getData('text/unicode');
if(!data)
e.stopPropagation();//好吧，如果不是图片，我们也不能随便阻止其他事情吧。
setTimeout(function ()
{
pasteImg()
}, 200);//给图片解码留出时间
//
}, true);
//添加拖入拖出时的效果处理
document.body.addEventListener('dragenter',function(e){e.preventDefault();e.stopPropagation();},false);
editor.addEventListener('dragover',function(e){e.preventDefault();e.stopPropagation();editor.style.border='2px dotted red'},false);
editor.addEventListener('drop',function(e){e.preventDefault();e.stopPropagation();editor.style.border='1px solid gray';dragHandle(e);},false);
editor.addEventListener('dragleave',function(e){e.preventDefault();e.stopPropagation();editor.style.border='1px solid gray';},false);
addProgressBar();
}
function addProgressBar()
{
var container=document.querySelector('.old_style_wrapper');
var div=document.createElement('div');
div.id='progressBar';
div.style.cssText='position:absolute;right:20px;top:45px;width:200px;height:280px;';
container.appendChild(div);
preview=div;
}
function dragHandle(evt)//处理拖放
{
var files=evt.dataTransfer.files;
for(i=0;i<files.length;i++)
{
var file=files[i];
var type=file.type;
var name=file.name;
var size=file.size/1024+'';
size=size.substring(0,4);
var reader=new FileReader();
if(type.match('image'))//测试是否是图片文件
{
reader.onload=function(e)
{
var dataURL=e.target.result;//base64编码
//处理数据
new uploader(dataURL,false,null).init();
}
reader.readAsDataURL(file);
}
}
}
function pasteImg()
{
var imgs=document.querySelectorAll('#ueditor_replace img');
for(i=0;i<imgs.length;i++)
{
if(imgs[i].hasAttribute('uploading')||imgs[i].src.indexOf('data:image')!=0)
continue;
imgs[i].setAttribute('uploading','true');
var src=imgs[i].src;
var nwidth=imgs[i].width;
var height=imgs[i].height;
width=nwidth>560?560:nwidth;
height=width/nwidth*height;
imgs[i].src='data:image/gif;base64,R0lGODlhEAAQAOUdAOvr69HR0cHBwby8vOzs7PHx8ff397W1tbOzs+Xl5ebm5vDw8PPz88PDw7e3t+3t7dvb2+7u7vX19eTk5OPj4+rq6tbW1unp6bu7u+fn5+jo6N/f3+/v7/7+/ra2ttXV1f39/fz8/Li4uMXFxfb29vLy8vr6+sLCwtPT0/j4+PT09MDAwL+/v7m5ubS0tM7OzsrKytra2tTU1MfHx+Li4tDQ0M/Pz9nZ2b6+vgAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFMAA5ACwAAAAAEAAQAAAGg8CcMAcICAY5QsEwHBYPCMQhl6guGM5GNOqgVhMPbA6y5Xq/kZwkN3Fsu98EJcdYKCo5i7kKwCorVRd4GAg5GVgAfBpxaRtsZwkaiwpfD0NxkYl8QngARF8AdhmeDwl4pngUCQsVHDl2m2iveDkXcZ6YTgS3kAS0RKWxVQ+/TqydrE1BACH5BAkwADkALAAAAAAQABAAAAZ+wJwwJ1kQIgNBgDMcdh6KRILgQSAOn46TIJVSrdZGSMjpeqtgREAoYWi6BFF6xCAJS6ZyYhEIUwxNQgYkFxwBByh2gU0kKRVHi4sgOQuRTRJtJgwSBJElihwMQioqGmw5gEMLKk2AEkSBq4ElQmNNoYG2OVpDuE6Lrzmfp0NBACH5BAUwADkALAAAAAAQABAAAAaFwJwwJ1kQCDlCwTAcMh6KhDQnVSwYTkJ1un1gc5wtdxsh5iqaLbVKyVEWigq4ugZgTyiA9CK/JHIZWCsICCxpVWV/EzkHhAgth1UPQ4OOLXpScmebFA6ELHAZclBycXIULi8VZXCZawplFG05flWlakIVWravCgSaZ1CuksBDFQsAcsfFQQAh+QQJMAA5ACwAAAAAEAAQAAAGQcCccEgsGo/IpHLJzDGaOcKCCUgkAEuFNaFRbq1dJCxX2WKRCFdMmJiiEQjRp1BJwu8y5R3RWNsRBx9+SSsxgzlBACH5BAkwADkALAAAAAAQABAAAAaJwJwwJ1kQCDlCwTAcMh6KhDQnVSwYTkJ1un1gc5wtdxsh5iqaLbVKyTEWigq4ugZglRXpRX5J5DJYAFIAaVVlfhNrURqFVQ9DYhqCgzkzCGdnVQBwGRU0LQiXCRUAORQJCwAcOTChoYplBXIKLq6vUXRCCQ22olUEcroJB66KD8FNCjUrlxWpTUEAIfkEBTAAOQAsAAAAABAAEAAABobAnDAnWRAIOULBMBwyHoqENCdVLBhOQnW6fWBznC13G8nZchXNllql5Bg2xA1cZQOwShwCMdDkLgk5GVgAUgAie3syVDkTbFIaiIkIJ0NiGnp7HiNonRVVAHEuFjlQFVQVAI0JCzYjrKCPZQWnf1unYkMVWrFbBLVoUIaPD8C6CwCnAMhNQQA7';
new uploader(src,true,imgs[i]).init();
}
}
function uploader(dataURL,isPaste,oldImage)//第一次尝试模板
{
this.dataURL=dataURL;
this.isPaste=isPaste;
this.oldImage=oldImage;
this.progressBar=null;
this.tbs=null;
this.blob=null;
this.init=function() //进条度创建在此
{ var now=this;
var div=document.createElement('DIV');//父节点
div.style.cssText="background:rgba(33,33,33,0.8);width:200px;height;40px;border:1px solid red;border:2px solid gray;border-radius:10px;margin:5px;padding:5px;"
var img=document.createElement('img');
img.src=this.dataURL;
img.style.cssText='height:auto;width:auto;max-width:200px;max-height:40px;';
var bar=document.createElement('progress');
bar.style.cssText='width:180px;height:15px;display:position:absolute;';
div.appendChild(img);
div.appendChild(document.createElement('hr'));
div.appendChild(bar);
preview.appendChild(div);
this.progressBar=bar;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://tieba.baidu.com/dc/common/imgtbs?t=' + new Date().getTime(), false);
xhr.onload = function ()
{
var res=JSON.parse(xhr.responseText);
var tbs = res.data.tbs;
now.upload(tbs);
}
xhr.send();
};
this.upload=function(tbs)
{
//到这步是正常的
var now=this;
var blob=dataUrlToBlob(this.dataURL);
var data=new FormData();
data.append('Filename','333333.png');
data.append('tbs',tbs);
data.append('fid',unsafeWindow.PageData.forum.id);
data.append('file',blob);
//上传模块
GM_xmlhttpRequest({
synchronous:false,
method:'POST',
url:'http://upload.tieba.baidu.com/upload/pic?is_wm=1',
data:data,
onprogress:function(e)//处理进度条
{
if ( !e.lengthComputable )
{
now.progressBar.value=1;
}
else
{
now.progressBar.style.display='';
now.progressBar.value=(e.loaded/e.total);
}
},
onload:function(d)//可以正常运行至此
{
now.onload(d);
}
});
}
this.onload=function(res)//下载完毕处理。
{
var mes=JSON.parse(res.responseText);//{"err_no":0,"err_msg":"","no":0,"error_code":0,"info":{"cur_time":1386817416,"pic_id":"9732578534","fullpic_width":264,"fullpic_height":149,"pic_type":4,"full_datalen":1953,"full_sign0":93043670,"full_sign1":3974064591,"pic_id_encode":"b2aab951f8198618d026c1f048ed2e738ad4e696","pic_desc":"blob","err_no":0,"pic_water":"http:\/\/imgsrc.baidu.com\/tieba\/pic\/item\/cefc1e178a82b901accced47718da9773912ef65.jpg"}}
var fullWidth=mes.info.fullpic_width;//真实宽度
var fullHeight=mes.info.fullpic_height;//真实高度
var picId=mes.info.pic_id_encode;
var picType=mes.info.pic_type;
var picWater=mes.info.pic_water;
var e ='http://imgsrc.baidu.com/forum/pic/item/' + picId + '.png';//图片地址
var cache=new Image();//先下载再响应
cache.setAttribute("pic_type","0");
cache.setAttribute("unselectable","on");
cache.src=e;
var old=this.oldImage;
var bar=this.progressBar;
var nwidth=fullWidth
var height=fullHeight;
width=nwidth>560?560:nwidth;
height=parseInt(width/nwidth*height);
cache.setAttribute('width',width);
cache.setAttribute('height',height);
cache.setAttribute('class','BDE_Image');
if(isPaste)//如果是粘贴的就替换，否则直接插入图片
old.parentNode.replaceChild(cache,old);
else
editor.appendChild(cache);
unsafeWindow.$(bar.parentNode).slideUp('slow');//动画效果
bar.parentNode.removeChild(bar);//移除预览框
}
}
//以下三个函数可把dataURL转换成BLOB对象,研究fawave的收获，哈哈
function binaryToBlob(data)
{
var arr=new Uint8Array(data.length);
for(var i=0,l=data.length;i<l;i++)
{
arr[i]=data.charCodeAt(i);
}
var buffer=arr;
return buildBlob([buffer]);
}
function dataUrlToBlob(dataurl)
{
var datas=dataurl.split(',',2);
var blob=binaryToBlob(atob(datas[1]));
blob.fileType=datas[0].split(';')[0].split(':')[1];
blob.name='xxx.png';
return blob;
};
function buildBlob(parts)
{
blob=new Blob(parts);
return blob;
}