5ucms论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1477|回复: 0

[插件/开发] 在wordpress文章页 增加 一键下载所有图片的功能

[复制链接]

670

主题

785

帖子

8228

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
8228
发表于 2022-7-18 15:03:42 | 显示全部楼层 |阅读模式
1、构建按钮
  1. <?php
  2. global $current_user;
  3. $loggedin = preg_match("/wordpress_logged_in/", $cookie);
  4. if($loggedin){ ?>
  5.     <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="window.location.href='/login'" >下载图集</button>
  6. <?php }else{
  7.     if( $current_user->roles[0] == 'VIP' ){ ?>
  8.         <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="download()">下载图集</button>
  9.     <?php } else { ?>
  10.         <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="window.location.href='/membership-checkout'" >下载图集</button>
  11.     <?php }
  12. }?>
复制代码



2、功能JS代码
  1. function download(){
  2.     var imgList = document.querySelectorAll(".entry-content img"); //获取所有需要下载的图片的img标签
  3.     for(var i = 0; i < imgList.length; i++){
  4.         var imgsrc = imgList[i].getAttribute("data-src"); //由于有lazyload,图片的真是地址是data-src而不是src如果没有lazyload,可以用imgList[i].src获取图片地址
  5.         if(imgsrc.search("banner") == -1){
  6.             var name = <?php echo get_the_ID(); ?> + "-" + i; //通过post id构造图片名
  7.             downloadIamge(imgsrc, name);
  8.         }
  9.     }
  10. }
  11. function downloadIamge(imgsrc, name){
  12.     let image = new Image();
  13.     image.setAttribute("crossOrigin", "anonymous");
  14.     image.onload = function() {
  15.         let canvas = document.createElement("canvas");
  16.         canvas.width = image.width;
  17.         canvas.height = image.height;
  18.         let context = canvas.getContext("2d");
  19.         context.drawImage(image, 0, 0, image.width, image.height);
  20.         let url = canvas.toDataURL("image/png");
  21.         let a = document.createElement("a");
  22.         let event = new MouseEvent("click");
  23.         a.download = name || "photo";
  24.         a.href = url;
  25.         a.dispatchEvent(event);
  26.     }
  27.     image.src = imgsrc;
  28. }
复制代码


3、如果使用CDN注意设置允许跨域

完整代码
  1. //一键下载
  2. function yzm_download() {
  3.     global $current_user;
  4.     $loggedin = preg_match("/wordpress_logged_in/", $cookie);
  5.     if($loggedin){ ?>
  6.         <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="window.location.href='https://ningmengjiang.cn/login'" >下载图集</button>
  7.     <?php }else{
  8.         if( $current_user->roles[0] == 'VIP' ){ ?>
  9.             <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="download()">下载图集</button>
  10.         <?php } else { ?>
  11.             <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="window.location.href='https://ningmengjiang.cn/membership-checkout'" >下载图集</button>
  12.         <?php }
  13.     }?>
  14.     <script>
  15.         function download(){
  16.             var imgList = document.querySelectorAll(".entry-content img"); //获取所有需要下载的图片的img标签
  17.             for(var i = 0; i < imgList.length; i++){
  18.                 var imgsrc = imgList[i].getAttribute("data-src"); //由于有lazyload,图片的真是地址是data-src而不是src如果没有lazyload,可以用imgList[i].src获取图片地址
  19.                 if(imgsrc.search("banner") == -1){
  20.                     var name = <?php echo get_the_ID(); ?> + "-" + i;
  21.                     downloadIamge(imgsrc, name);
  22.                 }
  23.             }
  24.         }
  25.         function downloadIamge(imgsrc, name){
  26.             let image = new Image();
  27.             image.setAttribute("crossOrigin", "anonymous");
  28.             image.onload = function() {
  29.                 let canvas = document.createElement("canvas");
  30.                 canvas.width = image.width;
  31.                 canvas.height = image.height;
  32.                 let context = canvas.getContext("2d");
  33.                 context.drawImage(image, 0, 0, image.width, image.height);
  34.                 let url = canvas.toDataURL("image/png");
  35.                 let a = document.createElement("a");
  36.                 let event = new MouseEvent("click");
  37.                 a.download = name || "photo";
  38.                 a.href = url;
  39.                 a.dispatchEvent(event);
  40.             }
  41.             image.src = imgsrc;
  42.         }
  43.     </script>
  44. <?}
复制代码


短代码注册
  1. add_shortcode('yzm_download', 'yzm_download'); //把function注册成短代码
复制代码


这样就可以通过短代码 [yzm_download] 进行部署了。

来源:一只猫 https://www.zhihu.com/people/chen-kun-73-41
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|5ucms.com

GMT+8, 2024-3-29 19:42 , Processed in 0.250000 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表