巧用CDN图片处理实现图片水印和图片弹窗兼容

投稿   乐趣公园  2018-02-06 07:29:26  184 人阅读  20 条评论
摘要:

使用一种特别的姿势来解锁 CDN 云储存也就是七牛,又拍,OSS 的更多关于图片的玩法,使得文章图片实现缩略图+水印+图片弹窗功能兼容并蓄。

巧用CDN图片处理实现图片水印和图片弹窗兼容 WordPress 第1张

前言

不知道在什么时候,就有人向我提出一个问题:既然缩略图可以直接使用七牛或者又拍的,那么文章的图片水印是不是也可以直接使用 CDN 的水印功能?我看到这个问题之后就开始试验,但是很久就放弃了,主要是因为文章的图片样式会影响 Git 的图片弹窗,因为 Git 的突破弹窗使用的是 fancybox 的方案,我不知道别人的是不是也是不兼容,后来我发现百度好像也有类似问题,所以我也就放弃了,但是前不久又碰到图片样式,但是却被一种很诡异的方式解决了,今天来说下。

解决办法

首先,这篇文章的首图就是开启了水印+缩略图的【本网站水印被我暂时去掉了,所以看不到,右下角的水印是截图工具自带的】,虽然目前我的水印被窝去掉了,但是不会影响看问题,我的图片链接后缀是加的!water.jpg,如果只看显示的图片的话,他的宽度应该只有 750px,但是地阿里之后图片尺寸确实 1920px 的,也就是说之前打开网页加载的是 750px 的图片,是原图的缩略图,如果看图片尺寸的话就更不一样,我想你们肯定明白了,我说的方法是什么了,就是将图片样式名字命名为【water.jpg】当然,你也可以是别的,比如 googlo.png,比如 happy.gif,总之让图片弹窗的插件认为这个本来就是原图。

巧用CDN图片处理实现图片水印和图片弹窗兼容 WordPress 第2张

实测:七牛,又拍,OSS 都支持这种图片样式命名方法

水印代码

其实这篇文章主要是思路,水印代码什么也就无所谓了,这里贴一下,这里是云落使用的水印代码,这里只要是图片都会被添加水印

  1. function git_cdn_water($content) {
  2.        global $post;
  3.        $pattern ="/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
  4.        $replacement = '<img$1src=$2$3.$4!water.jpg$5$6>';//换成自己的图片样式名字
  5.        $content = preg_replace($pattern$replacement$content);
  6.        return $content;
  7. }
  8. add_filter('the_content', 'git_cdn_water');

可选版水印

上面的代码是所有的图片都添加水印,但是有时候我们上传的美美的图片被加上水印好像也不太好看,这里贴出一个可以选择的版本,只是如果图片水印就必须保持图片弹窗,如果不要水印就不要弹窗了。其实就是修改了一下正则匹配而已啦!

  1. function git_cdn_water($content) {
  2.        global $post;
  3.        $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)><img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
  4.        $replacement = '<a$1href=$2$3.$4!water.jpg$5$6><img$7src=$8$9.$10!water.jpg$11$12>';
  5.        $content = preg_replace($pattern$replacement$content);
  6.        return $content;
  7. }
  8. add_filter('the_content', 'git_cdn_water');

后语

经过这个事情,我想起了一句经常听过的话:有时候思路比技术更重要~

历史上的今天:

文章标签: ,   ,   ,   ,  
原文地址:https://gitcafe.net/archives/6203.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 乐趣公园 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
乐趣公园

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 银色月航
    银色月航 @回复

    阿里云貌似做不了水印啊

  2. 智子
    智子 @回复

    搞定了,谢谢分享

  3. 电炖锅的那些事
    电炖锅的那些事 @回复

    暂时还没有用上这些技术,不过还是感谢你的分享。

  4. 券都有
    券都有 @回复

    谢谢分享

  5. 在线看小说
    在线看小说 @回复

    现在缩略图都动态裁切了

  6. 沈唁志
    沈唁志 @回复

    缩略图都禁止了 水印加不加呢 感觉我博客只有题图 没必要加水印

  7. 唯心寒辞
    唯心寒辞 @回复

    学习了,不过现在一般都不加水印了。

  8. 屌炸天
    屌炸天 @回复

    新春佳节到。祝好!祝好!

  9. 品牌馆
    品牌馆 @回复

    谢谢干货分享

  10. 面料
    面料 @回复

    又是一篇干货啊

  11. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    恩, 要试试,这个技术可以有

  12. 80后记忆
    80后记忆 @回复

    还是纯代码的好,又可以省去一个插件了。

  13. 钟水洲博客
    钟水洲博客 @回复

    水印加上也没什么用

  14. 银色月航
    银色月航 @回复

    一般不加水印

  15. 橘子书
    橘子书 @回复

    不懂这个水印是直接加到图里面还是一个div块?

  16. 狂放
    狂放 @回复

    不过这样的水印是不是可以直接在链接里去掉,PS都不要的

  17. 90客栈
    90客栈 @回复

    水印看来都得加加

  18. 明月登楼
    明月登楼 @回复

    这个不错!赞一个!