微信公众号图片排版太累了,来个一次性搞定的方法.

发表于 讨论求助 2020-11-13 08:25:53


在说这个视频前,先说说浏览器的控制台,它可是一个很强大的功能,按下F12就可以弹出控制台。(在百度经验的界面下打开的控制台,里面还有一份百度招聘的邀请函)

这个控制台的信息是什么出来的呢?很简单,使用console.log()即可。我们先保存一个收藏夹,把网址部分改写成:javascript:(function(){console.log('第一次运行,SUCCESS')})()

然后在单击这个书签。在下方的控制台下就会出现“第一次运行,SUCCESS”的字样。当然百度网页的这个效果不是靠我这方法的来实现的,但是都是用相同的语言Javascript写的。只是它的javascitp位置是在页面的中,我的在书签中。

还有一种的方法是直接在控制台的下方输入console.log("第一次运行,SUCCESS")按回车结束。

可见收藏夹和控制台都是可以运行Javascript的。其中能运行Javascipt的收藏夹我们把它叫做bookmarklet。Bookmarklet的语法结构是javascript:(function(){……})(),和控制台可以通用。我们了解了两者的特点,那么就可以用它们做事情了,控制台用于测试代码,bookmarlet用于代码打包。在做下面的事情之前,我们先下载一个离线的编辑器“ckeditor”。把它放到解压之后本地目录下。找到“index.html”,路径是" ckeditor\samples\index.html"。以浏览器打开它。

我们做个测试,找一篇图文的word,直接复制word文章内容到这个编辑器,在这个编辑器中将会保留图片。

接着我们运行如下的代码:

javascript: (function(window, document, c) {

         var framD = document.getElementsByTagName('iframe')[0].contentDocument;

         var img = framD.getElementsByTagName('img');

         var ar = [];

         for (var i in img) {

                   ar.push(img[i].src)

         }

         c = document.createElement('div'), c.id = 'excel', c.setAttribute('style', 'position:absolute;top:0;left:0;background:yellow;opacity:0.8');

         c.innerHTML = " <table><tr><td>" + ar.join('</td></tr><tr><td>') + " </td></tr></table>";

         with(open().document) {

                   write(c.outerHTML);

                   close()

         }

})(window, document)

最后会在这个页面的右边新建一个“about:blank”页面,内容里面是file:///*之类的文字列。这个是本地的图片的路径。上述的代码实际上是把图片的路径提取了出来。

不仅如此用同样的方法还可以提取网页图片的地址,复制任意一篇的公众号或者网页的文章到编辑器,再运行代码。

Word里面的图之所以不能复制到微信公众号之中是因为,word里面的图片是本地的路径,而公众号里的图是网址。要想把word里的图复制到微信公众号就需要把图片的路径替换成网址。我们复制图片网址。

接着切回复制word内容的界面中,运行如下代码,输入框中输入图片的全部网址,可以把图片替换:

javascript: void((function() {

         str = prompt("请黏贴图片url");

         var framD = document.getElementsByTagName('iframe')[0].contentDocument;

         var arr = str.split(" ");

         var img = framD.getElementsByTagName('img');

         var img_len = img.length;

         for (var i = 0; i < img_len; i++) {

                   img[i].src = arr[i];

                   img[i].removeAttribute('width');

                   img[i].removeAttribute('height');

                   img[i].removeAttribute('data-cke-saved-src');

                   img[i].removeAttribute('style')

         }

})())

看效果,之后就可以把这篇内容复制到微信公众号上了。这只是冰山一角,如果你会JS还可以写出更强大的功能。包括网页抓取,数据分析。


发表
26906人 签到看排名