在wordpress文章页 增加 一键下载所有图片的功能

admin

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