技術の軌跡:PHP、JS、C#...etc

zip358.com×∞

javaScript jquery PHP プログラム

★画像をタイル状に分離して一括ダウンロードさせるジェネレーター

更新日:

画像をタイル状に分離して一括ダウンロードさせるジェネレーターを
作ってみました。画像は自動的に削除されます?
あることをすれば他人の画像がアップした画像も削除されます。
ちなみに一括ダウンロードbuttonを押すと画像がサーバー上に保存され
強制ダウンロードが始まります。
動作はブラウザChromeオンリーです。
また一括ダウンロードを押すと複数のファイルを一括ダウンロードするか
どうかの問い合わせが表示されますので「はい」を
選択してください。尚、30秒以内に保存されていないファイルは
次々と削除されます。

サイトはこちらから
https://zip358.com/tool/demo5/index-14.html

ソースコードは下記になります。

ページ(base64生成+画像ダウンロード処理)

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>画像分離してダウンロード:画像分離ジェネレーター</title>
        <meta name="description" content="画像分離してダウンロード:画像分離ジェネレーター">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../jquery/jquery-3.4.1.js"></script>
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    </head>
    <style>
        body{
            background-color: black;
            color: antiquewhite;
        }
        img{
            margin:10!important;
            padding:10!important;
        }       
        #container{
            width: 100%;
        }
        #container img{
            margin:10px;   
        }       
    </style>    
    <body>
        <span id="bat"></span><a id="dl"></a>
        <input class="form-control" type="file"></input>
        <div id="container"></div>
        <script>
            $(function(){
                $("[type=file]").on("change",function(){
                    $('#container').html("");
                    $("#bat").html("");
                    console.log($(this));
                    if(!$(this).prop('files')[0].type.match(/[png|jpg|jpge|gif]/)){
                        alert("ファイル形式エラー");
                        return false;
                    }                        
                    var canvas = document.createElement('canvas');
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        var image = new Image();
                        image.onload = function() {
                            sprite = {width:50,height:50};
                            canvas.width = sprite.width;
                            canvas.height = sprite.height;
                            var ctx = canvas.getContext("2d");                            
                            var x = 0;
                            for(var i=0; i*sprite.height<image.height; i++){
                                for(var j=0; j*sprite.width<image.width; j++){
                                    ctx.drawImage(
                                    image,j*sprite.width,i*sprite.height,
                                    sprite.width,sprite.height,
                                    0,0,
                                    sprite.width,sprite.height
                                    );

                                    var spriteElement = new Image;
                                    spriteElement.src= canvas.toDataURL();
                                    $('#container').append(spriteElement);
                                }
                            }
                            $("#bat").html("<input type='button' value='一括ダウンロード' onclick='bat_img()'>");
                        }
                        image.src = event.target.result;                       
                    }
                    reader.readAsDataURL($(this).prop('files')[0]);
                    
                });
            });

            function bat_img(){
                for(var i=0; i< $("img").length;i++){
                    var data = {"base64":$("img").eq(i).attr("src"),"no":i}
                    $.ajax({
                        type: 'POST',
                        url: 'bat_img.php',
                        data:data,
                        dataType: 'json'
                    }).done(function(obj){
                        if(obj.chk=="ok"){
                            var link = document.getElementById("dl");
                            link.href = obj.path;
                            link.download = obj.name;
                            link.click();
                            var data2 = {Path:obj.path,no:obj.no,t:obj.t};
                            var del = function(){
                                $.ajax({
                                    type: 'GET',
                                    url: './bat_del.php',
                                    data:data2,
                                    dataType: 'json'
                                });
                            };
                            del();
                        }
                    });
                }
            }             
        </script>
    </body>
</html>

保存処理base64画像を保存処理

<?php
$b64 = base64_decode(str_replace("data:image/png;base64,","",$_POST["base64"]));
$no = (int)$_POST["no"];
$t = time();
$Path = "./bat_img/tmp/$t-$no.png";
$re = @file_put_contents($Path,$b64);
if($re and filesize($Path)>9000){
    unlink($Path);
}
$obj["chk"] = $re?"ok":"ng";
$obj["name"] = "$t-$no.png";
$obj["path"] = $Path;
$obj["no"] = $no;
$obj["t"] = $t;

print json_encode($obj);

 

画像削除処理

<?php
$Path = $_GET["Path"];
$no = (int)$_GET["no"];
$t = (int)$_GET["t"];

$cmd = function(){
    foreach(glob("./bat_img/tmp/*") as $file_name){
        $command = "rm -rf " . realpath($file_name);
        exec($command);
    }    
};

if(pathinfo($Path)["extension"]=="png" and preg_match("/bat_img\/tmp/",$Path)){
    if(is_file($Path)){
        sleep(30);
        unlink($Path);
    }else{
        $cmd();
    }
}else{
    $cmd();
}

 

参考サイト:https://jsfiddle.net/59naga/oe6ht2rs/2/

 

 

-javaScript, jquery, PHP, プログラム
-, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Copyright© zip358.com×∞ , 2019 All Rights Reserved Powered by STINGER.