|
1、构建按钮
- <?php
- global $current_user;
- $loggedin = preg_match("/wordpress_logged_in/", $cookie);
- if($loggedin){ ?>
- <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="window.location.href='/login'" >下载图集</button>
- <?php }else{
- if( $current_user->roles[0] == 'VIP' ){ ?>
- <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="download()">下载图集</button>
- <?php } else { ?>
- <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="window.location.href='/membership-checkout'" >下载图集</button>
- <?php }
- }?>
复制代码
2、功能JS代码
- function download(){
- var imgList = document.querySelectorAll(".entry-content img"); //获取所有需要下载的图片的img标签
- for(var i = 0; i < imgList.length; i++){
- var imgsrc = imgList[i].getAttribute("data-src"); //由于有lazyload,图片的真是地址是data-src而不是src如果没有lazyload,可以用imgList[i].src获取图片地址
- if(imgsrc.search("banner") == -1){
- var name = <?php echo get_the_ID(); ?> + "-" + i; //通过post id构造图片名
- downloadIamge(imgsrc, name);
- }
- }
- }
- function downloadIamge(imgsrc, name){
- let image = new Image();
- image.setAttribute("crossOrigin", "anonymous");
- image.onload = function() {
- let canvas = document.createElement("canvas");
- canvas.width = image.width;
- canvas.height = image.height;
- let context = canvas.getContext("2d");
- context.drawImage(image, 0, 0, image.width, image.height);
- let url = canvas.toDataURL("image/png");
- let a = document.createElement("a");
- let event = new MouseEvent("click");
- a.download = name || "photo";
- a.href = url;
- a.dispatchEvent(event);
- }
- image.src = imgsrc;
- }
复制代码
3、如果使用CDN注意设置允许跨域
完整代码
- //一键下载
- function yzm_download() {
- global $current_user;
- $loggedin = preg_match("/wordpress_logged_in/", $cookie);
- if($loggedin){ ?>
- <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="window.location.href='https://ningmengjiang.cn/login'" >下载图集</button>
- <?php }else{
- if( $current_user->roles[0] == 'VIP' ){ ?>
- <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="download()">下载图集</button>
- <?php } else { ?>
- <button id="download_button" style="border-radius:5px;padding:10px 30px;font-size:16px;" onclick="window.location.href='https://ningmengjiang.cn/membership-checkout'" >下载图集</button>
- <?php }
- }?>
- <script>
- function download(){
- var imgList = document.querySelectorAll(".entry-content img"); //获取所有需要下载的图片的img标签
- for(var i = 0; i < imgList.length; i++){
- var imgsrc = imgList[i].getAttribute("data-src"); //由于有lazyload,图片的真是地址是data-src而不是src如果没有lazyload,可以用imgList[i].src获取图片地址
- if(imgsrc.search("banner") == -1){
- var name = <?php echo get_the_ID(); ?> + "-" + i;
- downloadIamge(imgsrc, name);
- }
- }
- }
- function downloadIamge(imgsrc, name){
- let image = new Image();
- image.setAttribute("crossOrigin", "anonymous");
- image.onload = function() {
- let canvas = document.createElement("canvas");
- canvas.width = image.width;
- canvas.height = image.height;
- let context = canvas.getContext("2d");
- context.drawImage(image, 0, 0, image.width, image.height);
- let url = canvas.toDataURL("image/png");
- let a = document.createElement("a");
- let event = new MouseEvent("click");
- a.download = name || "photo";
- a.href = url;
- a.dispatchEvent(event);
- }
- image.src = imgsrc;
- }
- </script>
- <?}
复制代码
短代码注册
- add_shortcode('yzm_download', 'yzm_download'); //把function注册成短代码
复制代码
这样就可以通过短代码 [yzm_download] 进行部署了。
来源:一只猫 https://www.zhihu.com/people/chen-kun-73-41 |
|