84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
我在做一个第三方的知乎日报,但是图片获取不到?有纯前端的实现么?
光阴似箭催人老,日月如移越少年。
js正则表达式。
获取不到是指?
按理来说,只要你是通过 API 去获取的话,图片的地址一定是能获取到的(因为我也写过一个网页版的知乎日报(前端有点渣,写得有点烂,迟点可能要下线了。。),到现在依然能正常工作)。但是,如果你是在网页上直接引用 API 里提供的图片地址的话,那么恭喜你,403 Forbidden,知乎那边开启了防盗链功能。
403 Forbidden
这样,我们就用不了了吗?不!当你在浏览器新的标签/窗口直接访问图片地址的话,你是能看到图片的。知乎的防盗链原理是检查 refer 是否为空或者是否为知乎的网站。
那么我们可以用 JS 来把图片放在一个 iframe 里,再把 iframe 的边框设置为 0,具体代码如下:
var count = 0; window.img_array = new Array(); // create a img frame function create_img_iframe(url) { var frameid = 'frameimg' + Math.random(); window.img = '<img id="img" src=\''+url+'?'+Math.random()+'\' /><script>window.onload = function() { parent.document.getElementById(\''+frameid+'\').height = document.getElementById(\'img\').height+\'px\'; }<'+'/script>'; window.img_array[count] = window.img; ifr = document.createElement('iframe'); ifr.src = "javascript:parent.img_array[" + count + "];"; ifr.frameBorder="0"; ifr.scrolling="no"; ifr.width="100%"; ifr.id = frameid; count++; return ifr; } // hotlink, param id is the img parent id function hotlink_under_id(id) { var p = document.getElementById(id); imgs = p.getElementsByTagName('img'); while (imgs.length > 0) { src = imgs[0].src; ifr = create_img_iframe(src); imgs[0].parentNode.replaceChild(ifr, imgs[0]); } }
上面那些代码不是我原创,我是基于网上的一个大神修改的貌似(不记得有没有修改过了。。反正到时很认真地去看过这一段代码的原理),具体出处忘了,囧
上面这种方法其实也不是特别完美,因为这样弄之后图片底部会被切掉一些些(在 iframe 中的位置造成部分被隐藏)。个人感觉更好的解决方案应该是:用自己的服务器把图片缓存起来,然后把 API 中的图片地址进行替换
用自己的服务器把图片缓存起来,然后把 API 中的图片地址进行替换
不管你用哪种方法,一定要注意版权问题啊!
如果本地快速写写,不想用代理,可以试试下面两个chrome插件:
1.https://chrome.google.com/web...
2.https://chrome.google.com/web...
第一个解决跨域问题,第二个解决图片防盗链(403),可以更改请求的referer。
js正则表达式。
获取不到是指?
按理来说,只要你是通过 API 去获取的话,图片的地址一定是能获取到的(因为我也写过一个网页版的知乎日报(前端有点渣,写得有点烂,迟点可能要下线了。。),到现在依然能正常工作)。
但是,如果你是在网页上直接引用 API 里提供的图片地址的话,那么恭喜你,
403 Forbidden
,知乎那边开启了防盗链功能。这样,我们就用不了了吗?不!当你在浏览器新的标签/窗口直接访问图片地址的话,你是能看到图片的。知乎的防盗链原理是检查 refer 是否为空或者是否为知乎的网站。
那么我们可以用 JS 来把图片放在一个 iframe 里,再把 iframe 的边框设置为 0,具体代码如下:
上面那些代码不是我原创,我是基于网上的一个大神修改的貌似(不记得有没有修改过了。。反正到时很认真地去看过这一段代码的原理),具体出处忘了,囧
上面这种方法其实也不是特别完美,因为这样弄之后图片底部会被切掉一些些(在 iframe 中的位置造成部分被隐藏)。个人感觉更好的解决方案应该是:
用自己的服务器把图片缓存起来,然后把 API 中的图片地址进行替换
不管你用哪种方法,一定要注意版权问题啊!
如果本地快速写写,不想用代理,可以试试下面两个chrome插件:
1.https://chrome.google.com/web...
2.https://chrome.google.com/web...
第一个解决跨域问题,第二个解决图片防盗链(403),可以更改请求的referer。