🏠 Home 

Tieba Imagizer

贴吧图化 - Gerald倾情打造


Install this script?
  1. // ==UserScript==
  2. // @name Tieba Imagizer
  3. // @namespace http://gera2ld.blog.163.com/
  4. // @author Gerald <gera2ld@163.com>
  5. // @icon http://s.gravatar.com/avatar/a0ad718d86d21262ccd6ff271ece08a3?s=80
  6. // @version 1.2.7.1
  7. // @description 贴吧图化 - Gerald倾情打造
  8. // @homepageURL http://geraldl.net/userjs/TiebaImagizer
  9. // @include http://tieba.baidu.com/*
  10. // @exclude http://tieba.baidu.com/tb/*
  11. // @require https://greasyfork.org/scripts/144/code.user.js
  12. // @grant none
  13. // ==/UserScript==
  14. var loadingURL='http://tieba.baidu.com/tb/static-ihome/img/loading2.gif';
  15. // 初始化颜色选择面板
  16. function initColorPanel() {
  17. if(utils.colorInput) return;
  18. // Check support for input[type=color]
  19. var i=document.createElement('input');
  20. i.setAttribute('type','color');
  21. if(i.type=='color')
  22. return utils.colorInput=function(id,key,def,func){
  23. return utils.bindProp($('<input type=color id='+id+' class="ge_rsep colorbox">'),'value',key,def,func,['change','keyup']);
  24. };
  25. utils.addStyle('\
  26. #colors{display:none;position:absolute;background:white;border:2px ridge;padding:10px;cursor:default;}\
  27. #colors .colors{width:261px;cursor:pointer;margin:2px;border-collapse:separate;border-spacing:1px;background:black;}\
  28. #colors .colors td{display:table-cell !important;width:12px;height:12px;border:none;emptycells:show;}\
  29. .colorbox{width:12px;height:12px;border:1px solid;display:inline-block;position:relative;top:3px;}\
  30. ');
  31. var cp=$('<div id=colors>').click(function(e){e.stopPropagation();}),r,c,t;
  32. r=function(e){
  33. var d=$(e.target).attr('data');
  34. if(d) {
  35. if(e.type=='mouseover') {
  36. if(c) c.css('outline','none');
  37. c=$(e.target).css('outline','1px outset yellow');
  38. $('#ge_vcolor').val(d);
  39. } else cp.owner.setColor(d);
  40. }
  41. };
  42. t=$('<table class=colors>').appendTo(cp).mouseover(r).click(r);
  43. var k=['00','33','66','99','cc','ff'],p=['#ffffff','#ff0000','#00ff00','#0000ff','#ffff00','#00ffff','#ff00ff'];
  44. for(var i=0;i<12;i++) {
  45. r=$('<tr>').appendTo(t);
  46. if(i<6) c='#'+k[i]+k[i]+k[i]; else c=p[i-6];
  47. $('<td>').appendTo(r).css({background:c}).attr('data',c);
  48. if(!i) $('<td rowspan=12 style="background:white;">').appendTo(r);
  49. for(var j=0;j<18;j++) {
  50. c='#'+k[Math.floor(i/6)*3+Math.floor(j/6)]+k[j%6]+k[i%6];
  51. $('<td>').appendTo(r).css({background:c}).attr('data',c);
  52. }
  53. }
  54. t=$('<form>').appendTo(cp);
  55. $('<span id=ge_scolor class="ge_rsep colorbox">').appendTo(t);
  56. r=function(){$('#ge_scolor').css('background',this.value);};
  57. $('<input type=text id=ge_vcolor style="width:60px" class=ge_rsep>').appendTo(t).change(r).keyup(r);
  58. r=function(e){e.preventDefault();cp.owner.setColor($('#ge_scolor').css('background-color'));};
  59. $('<span class=ge_sbtn>OK</span>').appendTo(t).click(r);t.submit(r);
  60. c=null;
  61. utils.colorInput=function(id,key,def,func){
  62. var o=$('<span id='+id+' class=colorbox>'),c=utils.getObj(key,def);
  63. o.css({border:'1px outset white',cursor:'pointer',background:c}).attr('data',c).click(function(e){
  64. if(cp.owner!=o) {
  65. cp.owner=o;cp.appendTo(o).css({top:'auto',bottom:'auto'}).show();
  66. if(cp.offset().top+cp.height()>pageYOffset+innerHeight) cp.css('bottom','14px');
  67. else cp.css('top','14px');
  68. $('#ge_scolor').css('background',e=o.attr('data'));
  69. $('#ge_vcolor').val(e);
  70. } else {cp.owner=null;cp.hide();}
  71. });
  72. o.setColor=function(v){
  73. v=v.replace(/rgb\((\d+),\s?(\d+),\s?(\d+)\)/i,function(v,g1,g2,g3){
  74. v=[g1,g2,g3];for(g1 in v) {v[g1]=parseInt(v[g1]).toString(16);if(v[g1].length<2) v[g1]='0'+v[g1];}
  75. return '#'+v.join('');
  76. });
  77. o.attr('data',v).css('background',v);
  78. utils.setObj(key,v);
  79. cp.owner=null;cp.hide();func();
  80. };
  81. o[0].val=function(){return o.attr('data');};
  82. return o[0];
  83. };
  84. }
  85. function dataURL2Blob(dataURL) {
  86. var data=dataURL.match(/^data:(.*?);base64,(.*)$/),
  87. raw=atob(data[2]),
  88. buf=new ArrayBuffer(raw.length),
  89. intarr=new Uint8Array(buf),i;
  90. for(i=0;i<raw.length;i++) intarr[i]=raw.charCodeAt(i);
  91. return new Blob([buf], {type:data[1]});
  92. }
  93. function initImagizer(editor){
  94. var st=utils.addStyle(),content=null,ebody=editor.$body,
  95. op=utils.addRPopup(utils.addSButton('图 化')).panel;
  96. function getStyle() {
  97. var s={},t=[];
  98. if($('#w2iitalic').prop('checked')) t.push('italic');
  99. if($('#w2ibold').prop('checked')) t.push('bold');
  100. t.push($('#w2isize').val()+'px');
  101. if(f.val()) t.push(f.val());
  102. s.font=t.join(' ');
  103. s.color=cf.val();
  104. s.background=$('#w2iabgclr').prop('checked')?cb.val():'inherit';
  105. return s;
  106. }
  107. function undo(){
  108. if(!content) return;
  109. ebody.html(content);content=null;
  110. bUndo.addClass('ge_disabled');
  111. }
  112. utils.uploadImage=function(dataURL,node) {
  113. function error(){
  114. alert('图片上传发生错误!');
  115. undo();
  116. }
  117. $.get('/dc/common/imgtbs',function(r) {
  118. var data=new FormData();
  119. data.append('tbs',r.data.tbs);
  120. data.append('file',dataURL2Blob(dataURL));
  121. $.ajax({
  122. type:'POST',
  123. url:'http://upload.tieba.baidu.com/upload/pic',
  124. contentType:false,
  125. processData:false,
  126. data:data,
  127. dataType:'json',
  128. xhrFields:{
  129. withCredentials:true,
  130. },
  131. success:function(c){
  132. if(c.error_code) error(); else {
  133. var e='http://imgsrc.baidu.com/forum/pic/item/'+c.info.pic_id_encode+'.jpg';
  134. $(node).replaceWith('<img class="BDE_Image" src="'+e+'" pic_type="0" onload="EditorUI.resizeImage(this,560)">');
  135. }
  136. },
  137. error:error,
  138. });
  139. },'json');
  140. };
  141. var u=$('<div class=ge_sbtn style="margin:0 0 2px;">开始图化</div>').appendTo(op).click(word2Image);
  142. // Extracted from ueditor.js
  143. function extractContents(H) {
  144. function remove(i){i.parentNode.removeChild(i);}
  145. function findParents(i){
  146. var a=[i];
  147. while(i.parentNode!==editor.body&&(i=i.parentNode)) a.unshift(i);
  148. return a;
  149. }
  150. var F = H.startContainer, E = H.endContainer, N = H.startOffset, G = H.endOffset, T = H.document, B = T.createDocumentFragment(), I, K;
  151. if (F.nodeType == 1) {
  152. F = F.childNodes[N] || (I = F.appendChild(T.createTextNode("")))
  153. }
  154. if (E.nodeType == 1) {
  155. E = E.childNodes[G] || (K = E.appendChild(T.createTextNode("")))
  156. }
  157. if (F === E && F.nodeType == 3) {
  158. B.appendChild(T.createTextNode(F.substringData(N, G - N)));
  159. F.deleteData(N, G - N);
  160. H.collapse(true)
  161. return B
  162. }
  163. var J, P, R = B, Q = findParents(F), C = findParents(E);
  164. for (var O = 0; Q[O] == C[O]; ) {
  165. O++
  166. }
  167. for (var M = O, S; S = Q[M]; M++) {
  168. J = S.nextSibling;
  169. if (S == F) {
  170. if (!I) {
  171. if (H.startContainer.nodeType == 3) {
  172. R.appendChild(T.createTextNode(F.nodeValue.slice(N)));
  173. } else {
  174. R.appendChild(F)
  175. }
  176. }
  177. } else {
  178. P = S.cloneNode(false);
  179. R.appendChild(P)
  180. }
  181. while (J) {
  182. if (J === E || J === C[M]) {
  183. break
  184. }
  185. S = J.nextSibling;
  186. R.appendChild(J);
  187. J = S
  188. }
  189. R = P
  190. }
  191. R = B;
  192. if (!Q[O]) {
  193. R.appendChild(Q[O - 1].cloneNode(false));
  194. R = R.firstChild
  195. }
  196. for (var M = O, D; D = C[M]; M++) {
  197. J = D.previousSibling;
  198. if (D == E) {
  199. if (!K && H.endContainer.nodeType == 3) {
  200. R.appendChild(T.createTextNode(E.substringData(0, G)));
  201. E.deleteData(0, G)
  202. }
  203. } else {
  204. P = D.cloneNode(false);
  205. R.appendChild(P)
  206. }
  207. if (M != O || !Q[O]) {
  208. while (J) {
  209. if (J === F) {
  210. break
  211. }
  212. D = J.previousSibling;
  213. R.insertBefore(J, R.firstChild);
  214. J = D
  215. }
  216. }
  217. R = P
  218. }
  219. H.setStartBefore(!C[O] ? C[O - 1] : !Q[O] ? Q[O - 1] : C[O]).collapse(true);
  220. I && remove(I);
  221. K && remove(K);
  222. return B
  223. }
  224. function innerText(o) {
  225. return $('<div>').append(o.childNodes||o.html()).html(function(i,h){return h.replace(/<br>(<\/p>)?|<\/p>/gi,'\n');}).text().replace(/\s+$/,'');
  226. }
  227. function word2Image(){
  228. content=ebody.html();
  229. bUndo.removeClass('ge_disabled');
  230. var fz=parseInt($('#w2isize').val()),loading=$('<img title="双击撤销">').attr('src',loadingURL),
  231. r=editor.selection.getRange(),s=null;
  232. if(!r.collapsed) s=innerText(extractContents(r));
  233. if(s&&/\S/.test(s)) {
  234. r.insertNode(loading[0]);
  235. } else {
  236. s=innerText(ebody);
  237. if(!/\S/.test(s)) return;
  238. ebody.html(loading);
  239. }
  240. var lines=s.split('\n'),w=0,c=document.createElement('canvas'),d=c.getContext('2d'),lh=Math.round(1.5*fz),data=[];
  241. s=getStyle();
  242. d.font=s.font;
  243. lines.forEach(function(line){
  244. line=line.replace(/\s+$/,'');
  245. do {
  246. for(var l=0,j=0;j<line.length;j++) {
  247. l+=d.measureText(line[j]).width;
  248. if(l>560) break; else if(w<l) w=l;
  249. }
  250. data.push(line.substr(0,j));
  251. line=line.substr(j);
  252. } while(line);
  253. });
  254. c.height=lh*data.length;
  255. c.width=w;
  256. if($('#w2ishadow').prop('checked')) {
  257. d.shadowColor='gray';
  258. d.shadowBlur=d.shadowOffsetY=d.shadowOffsetX=Math.ceil(fz/25);
  259. }
  260. if($('#w2iabgclr').prop('checked')) {
  261. d.fillStyle=s.background;
  262. d.fillRect(0,0,w,c.height);
  263. }
  264. d.font=s.font;
  265. d.fillStyle=d.strokeStyle=s.color;
  266. e=$('#w2istroke').prop('checked')?d.strokeText:d.fillText;
  267. i=0;data.forEach(function(j){e.call(d,j,0,fz+lh*(i++));});
  268. utils.uploadImage(c.toDataURL(),loading);
  269. }
  270. function checkFont(e) {
  271. e=getStyle();var i,s='';
  272. for(i in e) e[i]+=' !important';
  273. if($('#w2ipreview').prop('checked')) st.html('#ueditor_replace{font:'+e.font+';color:'+e.color+';background:'+e.background+'}');
  274. else st.html('');
  275. for(i in e) s+=i+':'+e[i]+';';
  276. f.css('cssText',s);
  277. }
  278. utils.addStyle('#w2iface{max-width:800px;max-height:400px;}');
  279. var ff=utils.list('w2ifaces','w2ifaceid',null,['微软雅黑']).load();
  280. var f=$('<select id=w2iface>').appendTo($('<label>字体:</label>').appendTo(op)).change(function(e){ff.load(f.prop('selectedIndex'));checkFont();});
  281. ff.list.forEach(function(i){$('<option>'+i+'</option>').appendTo(f);});f.prop('selectedIndex',ff.last);
  282. $('<span class=ge_sbtn>+</span>').appendTo(op).click(function(e){
  283. if(e=prompt('请输入字体名称:')) {
  284. ff.load(ff.push(e));
  285. $('<option>').text(e).appendTo(f);
  286. f.val(e);checkFont();
  287. }
  288. });
  289. $('<span class=ge_sbtn>-</span>').appendTo(op).click(function(e){
  290. e=f.prop('selectedIndex');
  291. f.children(':eq('+e+')').remove();
  292. ff.pop(e);ff.load(f.prop('selectedIndex'));checkFont();
  293. });
  294. initColorPanel();
  295. var cf,cb;
  296. utils.bindProp($('<input type=checkbox id=w2ipreview>').appendTo(op),'checked','w2ipreview',false,checkFont);
  297. $('<label for=w2ipreview>预览</label><br><label for=w2icolor>颜色:</label>').appendTo(op);
  298. $(cf=utils.colorInput('w2icolor','w2icolor','#2222ff',checkFont)).appendTo(op).addClass('ge_rsep');
  299. $('<label for=w2isize>大小:</label>').appendTo(op);
  300. utils.bindProp($('<input type=number id=w2isize min=9 class=ge_rsep style="height:18px;width:40px;">').appendTo(op),'value','w2isize',22,checkFont);
  301. utils.bindProp($('<input type=checkbox id=w2iabgclr>').appendTo(op),'checked','w2iabgclr',false,checkFont);
  302. $('<label for=w2iabgclr>背景色:</label>').appendTo(op);
  303. $(cb=utils.colorInput('w2ibgclr','w2ibgclr','#efe4b0',checkFont)).appendTo(op);
  304. $('<br>').appendTo(op);
  305. utils.bindProp($('<input type=checkbox id=w2ibold>').appendTo(op),'checked','w2ibold',false,checkFont);
  306. $('<label for=w2ibold class=ge_rsep>加粗</label>').appendTo(op);
  307. utils.bindProp($('<input type=checkbox id=w2iitalic>').appendTo(op),'checked','w2iitalic',false,checkFont);
  308. $('<label for=w2iitalic class=ge_rsep>倾斜</label>').appendTo(op);
  309. utils.bindProp($('<input type=checkbox id=w2ishadow>').appendTo(op),'checked','w2ishadow',false,checkFont);
  310. $('<label for=w2ishadow class=ge_rsep>阴影</label>').appendTo(op);
  311. utils.bindProp($('<input type=checkbox id=w2istroke>').appendTo(op),'checked','w2istroke',false,checkFont);
  312. $('<label for=w2istroke class=ge_rsep>镂空</label>').appendTo(op);
  313. var bUndo=$('<span class="ge_sbtn ge_disabled" title="回到最后一次图化前的状态">撤销图化</span>').appendTo(op).click(undo);
  314. f.prop('selectedIndex',ff.last);checkFont();
  315. }
  316. if(unsafeWindow.PosterContext&&unsafeWindow.PosterContext.isPostAllowed()) utils.wait(unsafeWindow,'test_editor',initImagizer);