☰

pasteAndDragImageIntoTiebaEditor

贴吧图片拖放和粘贴上传

目前为 2017-02-16 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name      pasteAndDragImageIntoTiebaEditor
  3. // @author    527836355
  4. // @id     pasteAndDragImageIntoTiebaEditor
  5. // @namespace   http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
  6. // @include     https://tieba.baidu.com/*
  7. // @version     3.1
  8. // @description     贴吧图片拖放和粘贴上传
  9. // @grant GM_xmlhttpRequest
  10. // @grant unsafeWindow
  11. // @grant GM_addStyle
  12. // @grant GM_log
  13. // ==/UserScript==
  14. const editorId='ueditor_replace';//发帖框ID
  15. const parentId='tb_rich_poster_container';//父节点监听
  16. var editor=null;//初始化发贴框
  17. var preview=null;//进度预览
  18. if(!unsafeWindow.FlashImageLoader)//flash上传还是必须的
  19. 				{
  20. 					var sc=document.createElement('script');
  21. 					sc.id='flashUpload';
  22. 					sc.setAttribute('src','http://static.tieba.baidu.com/tb/static-frs/component/sign_shai/flash_image_loader.js');
  23. 					document.body.appendChild(sc);
  24. 				};
  25. if(document.getElementById(editorId))//检测是否存在这个元素
  26. 	{
  27. 		init();
  28. 	
  29. 	}
  30. else  //不存在则监听节点变动
  31. 	{
  32. 		var target=document.getElementById(parentId);
  33. 		var observer = new MutationObserver(function(mutations) 
  34. 											{
  35. 												if(document.getElementById(editorId))
  36. 													{
  37. 													observer.disconnect();//停止监听
  38. 													init();
  39. 													
  40. 													}
  41. 																			
  42. 											})
  43. 		var config = { attributes: true, childList: true, characterData: true };
  44. 			observer.observe(target, config);	
  45. 	}
  46.  
  47. function init()//初始化，添加事件
  48. 			{
  49. 				editor=document.getElementById(editorId);
  50.  
  51. 				
  52. 				editor.addEventListener('paste',function (e)//添加事件处理
  53. 					{
  54. 						var data=e.clipboardData.getData('text/unicode');
  55. 						if(!data)
  56. 						e.stopPropagation();//好吧，如果不是图片，我们也不能随便阻止其他事情吧。
  57. 						setTimeout(function ()
  58. 									{
  59. 									pasteImg()
  60. 									}, 200);//给图片解码留出时间
  61. 						// 
  62. 					}, true);
  63. 				//添加拖入拖出时的效果处理
  64. 				document.body.addEventListener('dragenter',function(e){e.preventDefault();e.stopPropagation();},false);
  65. 				editor.addEventListener('dragover',function(e){e.preventDefault();e.stopPropagation();editor.style.border='2px dotted red'},false);
  66. 				editor.addEventListener('drop',function(e){e.preventDefault();e.stopPropagation();editor.style.border='1px solid gray';dragHandle(e);},false);
  67. 				editor.addEventListener('dragleave',function(e){e.preventDefault();e.stopPropagation();editor.style.border='1px solid gray';},false);
  68. 				addProgressBar();
  69. 			}
  70. function addProgressBar()
  71. 			{
  72. 			var container=document.querySelector('.old_style_wrapper');
  73. 			var div=document.createElement('div');
  74. 			div.id='progressBar';
  75. 			div.style.cssText='position:absolute;right:20px;top:45px;width:200px;height:280px;';
  76. 			container.appendChild(div);
  77. 			preview=div;
  78. 			}
  79. function dragHandle(evt)//处理拖放
  80. 		{
  81. 			var files=evt.dataTransfer.files;
  82. 			for(i=0;i<files.length;i++)
  83. 			{	
  84. 				var file=files[i];
  85. 				var type=file.type;
  86. 				var name=file.name;
  87. 				var size=file.size/1024+'';
  88. 				size=size.substring(0,4);
  89. 				var reader=new FileReader();
  90. 				if(type.match('image'))//测试是否是图片文件
  91. 				{
  92. 				reader.onload=function(e)
  93. 								{
  94. 							var dataURL=e.target.result;//base64编码
  95. 							//处理数据
  96. 							new uploader(dataURL,false,null).init();
  97. 								}
  98. 				reader.readAsDataURL(file);	
  99. 				}			
  100. 			}
  101. 		}
  102. function pasteImg()
  103. 			{
  104. 			var imgs=document.querySelectorAll('#ueditor_replace img');	
  105. 			for(i=0;i<imgs.length;i++)
  106. 				{	
  107. 				if(imgs[i].hasAttribute('uploading')||imgs[i].src.indexOf('data:image')!=0)
  108. 				continue;
  109. 				imgs[i].setAttribute('uploading','true');
  110. 				var src=imgs[i].src;
  111. 				var nwidth=imgs[i].width;
  112. 				var height=imgs[i].height;
  113. 				width=nwidth>560?560:nwidth;
  114. 				height=width/nwidth*height;
  115. 				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';
  116. 				new uploader(src,true,imgs[i]).init();
  117. 				}
  118. 			
  119. 			
  120. 			}
  121. function uploader(dataURL,isPaste,oldImage)//第一次尝试模板
  122. 			{
  123. 				this.dataURL=dataURL;
  124. 				this.isPaste=isPaste;
  125. 				this.oldImage=oldImage;
  126. 				this.progressBar=null;
  127. 				this.tbs=null;
  128. 				this.blob=null;
  129. 				this.init=function()	//进条度创建在此
  130. 							{	var now=this;
  131. 								var div=document.createElement('DIV');//父节点
  132. 								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;"
  133. 								var img=document.createElement('img');
  134. 								img.src=this.dataURL;
  135. 								img.style.cssText='height:auto;width:auto;max-width:200px;max-height:40px;';
  136. 								var bar=document.createElement('progress');
  137. 								bar.style.cssText='width:180px;height:15px;display:position:absolute;';
  138.  								div.appendChild(img);
  139. 								div.appendChild(document.createElement('hr'));
  140. 								div.appendChild(bar);
  141. 								preview.appendChild(div);
  142. 								this.progressBar=bar;
  143. 								var xhr = new XMLHttpRequest();
  144. 								xhr.open('GET', 'http://tieba.baidu.com/dc/common/imgtbs?t=' + new Date().getTime(), false);
  145. 								xhr.onload = function () 
  146. 											{
  147. 												var res=JSON.parse(xhr.responseText);
  148. 												var tbs = res.data.tbs;
  149. 												now.upload(tbs);
  150. 											}
  151. 								xhr.send();
  152. 							};
  153. 				this.upload=function(tbs)
  154. 							{
  155. 							//到这步是正常的
  156. 							var now=this;
  157. 							var blob=dataUrlToBlob(this.dataURL);
  158. 							var data=new FormData();
  159. 							data.append('Filename','333333.png');
  160. 							data.append('tbs',tbs);
  161. 							data.append('fid',unsafeWindow.PageData.forum.id);
  162. 							data.append('file',blob);
  163. 							//上传模块
  164. 							GM_xmlhttpRequest({
  165. 												synchronous:false,
  166. 												method:'POST',
  167. 												url:'http://upload.tieba.baidu.com/upload/pic?is_wm=1',
  168. 												data:data,
  169. 												onprogress:function(e)//处理进度条
  170. 																{
  171. 													
  172. 															    if ( !e.lengthComputable )
  173. 																	{ 
  174. 																	now.progressBar.value=1;																
  175. 																	}
  176. 																else
  177. 																	{
  178. 																		now.progressBar.style.display='';
  179. 																		now.progressBar.value=(e.loaded/e.total);
  180. 																	}
  181.  
  182. 																},
  183. 												onload:function(d)//可以正常运行至此
  184. 															{
  185. 															now.onload(d);
  186. 															}		
  187. 												});
  188. 							}
  189. 				this.onload=function(res)//下载完毕处理。
  190. 							{
  191. 						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"}}
  192. 						var fullWidth=mes.info.fullpic_width;//真实宽度
  193. 						var fullHeight=mes.info.fullpic_height;//真实高度
  194. 						var picId=mes.info.pic_id_encode;
  195. 						var picType=mes.info.pic_type;
  196. 						var picWater=mes.info.pic_water;
  197. 						var e ='http://imgsrc.baidu.com/forum/pic/item/' + picId + '.png';//图片地址
  198. 						var cache=new Image();//先下载再响应
  199.                                                 cache.setAttribute("pic_type","0");
  200.                                                 cache.setAttribute("unselectable","on");
  201. 						cache.src=e;
  202. 						var old=this.oldImage;
  203. 						var bar=this.progressBar;
  204. 							var nwidth=fullWidth
  205. 											var height=fullHeight;
  206. 											width=nwidth>560?560:nwidth;
  207. 											height=parseInt(width/nwidth*height);
  208. 											cache.setAttribute('width',width);
  209. 											cache.setAttribute('height',height);
  210. 											cache.setAttribute('class','BDE_Image');
  211. 											if(isPaste)//如果是粘贴的就替换，否则直接插入图片
  212. 											old.parentNode.replaceChild(cache,old);
  213. 											else
  214. 											editor.appendChild(cache);
  215. 											unsafeWindow.$(bar.parentNode).slideUp('slow');//动画效果
  216. 											bar.parentNode.removeChild(bar);//移除预览框
  217. 											
  218. 										
  219.  
  220. 							}
  221. 			}
  222. 	
  223. //以下三个函数可把dataURL转换成BLOB对象,研究fawave的收获，哈哈
  224. function binaryToBlob(data)
  225. 	{
  226. 		var arr=new Uint8Array(data.length);
  227. 		for(var i=0,l=data.length;i<l;i++)
  228. 		{
  229. 		arr[i]=data.charCodeAt(i);
  230. 		}
  231. 		var buffer=arr;
  232. 		return buildBlob([buffer]);
  233. 	}
  234. function dataUrlToBlob(dataurl)
  235. {
  236. var datas=dataurl.split(',',2);
  237. var blob=binaryToBlob(atob(datas[1]));
  238. blob.fileType=datas[0].split(';')[0].split(':')[1];
  239. blob.name='xxx.png';
  240. return blob;
  241. };
  242.  
  243. function buildBlob(parts)
  244. {
  245. blob=new Blob(parts);
  246. return blob;
  247. }