5ucms论坛
标题:
在wordpress文章页 增加 一键下载所有图片的功能
[打印本页]
作者:
admin
时间:
2022-7-18 15:03
标题:
在wordpress文章页 增加 一键下载所有图片的功能
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
欢迎光临 5ucms论坛 (http://bbs.5ucms.com/)
Powered by Discuz! X3.2