画像をタイル状に分離して一括ダウンロードさせるジェネレーター
2019.09.07
画像をタイル状に分離して一括ダウンロードさせるジェネレーターを
作ってみました。画像は自動的に削除されます？
あることをすれば他人の画像がアップした画像も削除されます。
ちなみに一括ダウンロードbuttonを押すと画像がサーバー上に保存され
強制ダウンロードが始まります。
動作はブラウザChromeオンリーです。
また一括ダウンロードを押すと複数のファイルを一括ダウンロードするか
どうかの問い合わせが表示されますので「はい」を
選択してください。尚、30秒以内に保存されていないファイルは
次々と削除されます。
サイトはこちらから
https://zip358.com/tool/demo5/index-14.html
ソースコードは下記になります。
ページ（base64生成＋画像ダウンロード処理）
追記：zipファイルにより格納するように処理を変更しました。
参考にしたサイト：https://ex1.m-yabe.com/archives/4215
<!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">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-71682075-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-71682075-1');
</script>
<style>
body{
background-color: black;
color: antiquewhite;
}
img{
margin:10!important;
padding:10!important;
}
#container{
width: 100%;
}
#container img{
margin:10px;
}
</style>
</head>
<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(){
var data = [];
for(var i=0; i< $("img").length;i++){
data.push({"base64":$("img").eq(i).attr("src"),"no":i});
}
$.ajax({
type: 'POST',
url: 'bat_img.php',
data:{"obj":data},
dataType: 'json'
}).done(function(obj){
if(obj[obj.length - 1 ].chk=="ok"){
var link = document.getElementById("dl");
link.href = obj[obj.length - 1].zippath;
link.download = "zipimg.zip";
link.click();
var data2 = [];
for(var i = 0 ; i < obj.length ; i++){
if(i==0){
data2.push({Path:obj.path,no:obj.no,t:obj.t,"zipimgpath":obj[obj.length - 1].zippath});
}else{
data2.push({Path:obj.path,no:obj.no,t:obj.t});
}
}
var del = function(){
$.ajax({
type: 'POST',
url: './bat_del.php',
data:{"obj":data2},
dataType: 'json'
});
};
del();
}
});
}
</script>
</body>
</html><?php
$i=0;
foreach($_POST["obj"] as $key=>$val){
$b64 = base64_decode(str_replace("data:image/png;base64,","",$val["base64"]));
$no = (int)$val["no"];
$t = time();
$Path = "./bat_img/tmp/$t-$no.png";
$re = @file_put_contents($Path,$b64);
if($re){
$obj[$i]["chk"] = $re?"ok":"ng";
$obj[$i]["name"] = "$t-$no.png";
$obj[$i]["path"] = $Path;
$obj[$i]["no"] = $no;
$obj[$i]["t"] = $t;
$i++;
}
}
$obj[--$i]["zippath"] = zipfile($obj);
print json_encode($obj);
function zipfile($obj){
$ZipFiles = function($obj){
foreach($obj as $key=>$val){
$path[] = $val["path"];
}
return $path;
};
$Zip_Files = $ZipFiles($obj);
$zipFileName = time().'_zipimg.zip';
set_time_limit(0);
$zip = new ZipArchive();
$zipTmpDir = './tmp/zip/';
$result = $zip->open($zipTmpDir.$zipFileName, ZIPARCHIVE::CREATE | ZIPARCHIVE::OVERWRITE);
if( $result !== true ){ //エラー処理
echo 'error!';
exit();
}
foreach ($Zip_Files as $key=>$filepath) {
$filename=basename($filepath);
// ZIP圧縮するファイルを追加
// ファイルパス・ファイル名としないと圧縮ファイルを解凍するとフルパスになる
$zip->addFile($filepath,$filename);
}
//ZIP 出力
$zip->close();
return $zipTmpDir.$zipFileName;
}
<?php
unlink($_POST["obj"][0]["zipimgpath"]);
foreach($_POST["obj"] as $key=>$val){
$Path = $val["Path"];
$no = (int)$val["no"];
$t = (int)$val["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();
}
}
タグ
１, 14, 30, 358, 4, 5, 64, archives, base, button, Chrome, com, demo, ex, html, https, index, m-yabe, tool, www, zip, アップ, オンリー, コード, こちら, こと, サーバー, サイト, ジェネレーター, ソース, タイル, ダウンロード, はい, ファイル, ブラウザ, ページ, 一括, 下記, 他人, 保存, 処理, 分離, 削除, 動作, 参考, 問い合わせ, 変更, 強制, 格納, 生成, 画像, 表示, 複数, 追記, 選択,
ポジティブポジティブポジティブ
2017.07.22
何故思っていないことを口にしないといけないのか！！
ネガティブからポジティブの考え方に変わるには約２年間必要だと何だかリアルなスパン。
このひとが言っていることは間違っていないと、、思います。
カウンセラーの資格を持っているのかはワカラナイですが（たぶん持ってる）
婚活で悩んでいる方、とくに男性の３０代の皆さん、こちらの動画を見て
参考にしてみてはどうでしょうか？
このひとが言っていることの動画を見て婚活頑張ってみてください。
ちなみに３０代の方は、婚活パーティーを使うよりも結婚相談所を
使用するほうが、カップルになる確率が高くなるそうですよ。
そういう事を解説した動画もあります。
https://www.youtube.com/watch?v=RSwb1VNww7U
タグ
カウンセラー, カップル, スパン, ひと, 動画, 参考, 口, 婚活, 婚活パーティー, 婚活マニュアル, 男性, 皆さん, 確率, 約2年間, 結婚相談所, 考え方, 資格,
140文字ぴっちり文字を埋めるの簡単。
2017.06.15
140文字ぴっちり文字を埋めるの簡単に出来る。
方法は下記の通り、
まず思ったことをびしっり140文字より多めに書きます。
その後、言い回し修正しながら書き直していくことで
140文字に収めることは意外にも簡単にできてしまったりします。
ちなみに何も考えなしに140文字で収まることも
たまにあったりします。逆にこちらの方が
優越感てきな気持ちになったりするので不思議です。
TwitterとかFacebookとかNET中毒的な要素があるらしいので
程々に・・・。
140文字以上呟きたい方はこちらを参考にしてください。
タグ
140文字ぴっちり文字, 140文字以上, Facebook, NET中毒的, かんたんmini Twitter, ツイッター, 下記, 便利技, 優越感てき, 参考, 基本, 改訂4版, 方法, 気持ち, 要素, 言い回し, 通り,
婚活、恋活している人っていますよね。教えて！？
2016.03.01
婚活、恋活している人っていますよね。教えて！？
どうなのか・・・そこんトコロ！って
聞いてみるより体験することが大事だと思うです。
体験してみて思うことは
行かなかったほうが良かったとか、場違いだとか
思うじゃないかなぁ・・・とか想像してます。
みんな、頑張っている中で「どんな感じなのか」って
思ってきましたなんて、中々言えない気もする。
でも体験しないとわからないので
行ってみるのも有りかなとか思っているですけど
どうなんですかね。
体験した方、感想をTwitterのDMで送ってくださいな！！
参考にさせてもらいたいです。
みんな婚活アプリや恋活アプリなんてものを
使っているのかなぁ？？
大体、友達の紹介でっていうパターンが多いと思います。
友達がおいらを紹介してくれるパターンはあるのかなぁ・・・。
(｀・ω・´)！！
タグ
DM, Twitter, おいら, トコロ, パターン, みんな婚活アプリ, 人, 参考, 友達, 恋活アプリ, 感じ, 感想, 気, 紹介,
六本木を中心に開催されるテクノロジーアート展を観に行きたいけど。
2016.02.19
六本木を中心に開催されるテクノロジーアート展を観に行きたいけど
予算の都合上見に行けない。｛おそらく｝
体感型のアートは本当に凄いですよ。
見ていて楽しくて触れたらもっと楽しいです。
東京近辺のかたが、羨ましいです。
近ければ見に行ってますね。
開催箇所が数か所あるので自分がみたいなと
思うものだけ厳選して見に行っても良いかと思います。
一日ですべて回ろうとすると
朝から見に行かないととても廻れそうに
無いですね。
ちなみに開催日時は2月26日?3月21日まで。
場所は六本木周辺：詳しくは公式HPを参考に。
MEDIA AMBITION TOKYO 2016
（メディア アンビジョン トキョウ 2016）
https://youtu.be/belTdz8xdd0
タグ
MEDIA AMBITION TOKYO 2016, すべて, テクノロジーアート展, メディア アンビジョン トキョウ, 中心, 予算, 体感型, 公式HP, 六本木, 六本木周辺, 参考, 未来, 東京近辺, 過去, 都合上見, 開催日時, 開催箇所,
本「シンプルに考える」を読んで。著：森川亮。元LINE社長。
2015.11.21
シンプルに考えるを読んでみて
これから起業するとか、そういう人だけの本ではないです。
確かに起業するひとが読むとためにはなると思います。
そうではない人が読んでも森川亮氏の考え方は
良いように思えます。
起業しない人が読んで
どういう所がためになるのか、
これから、世の中でどう動きをどう捉え
今後、どのような考えをすれば
良いのかということの参考になる本です。
森川氏という人は、世の中の流れを察知して
対応するのに長けた人だとも言えます。
森川氏と同じことをして同じ結果は得られないと
思いますが、読んでいると何だかグイグイ、森川氏という
人物に魅力を感じ、ノウハウを吸収したいという思いになります。
タグ
jp, いまいち, ノウハウ, ひと, 世の中, 人物, 元LINE社長, 動き, 参考, 思い, 所, 本, 森川亮, 流れ, 結果, 考え方, 著, 魅力,
ブログの毎日更新をはじめて一ヶ月半が過ぎようとしてます。
2014.09.24
ブログの毎日更新をはじめて一ヶ月半が過ぎようとしてます。アクセス数も徐々に右肩あがりなっています。この調子でいくと年内に100越えは可能かもしれません（昨日のアクセス数は70でした。）。自分のブログは今のところ映画ネタが多いので平日よりも休日前や休日がアクセスが断然を多いです。新作映画を見に行く前に映画の評価の参考として見に来ている方が多いようです。あとは本の購入前の参考として見てくれてる方です、この二つジャンルがアクセス数の大半を占めています。ちなみにこのブログでの広告収益はまだ出ていません。自分の場合、収益は副産物みたいなものであって気にしていません。
基本的にブログを書くのが好きだから、毎日かけたりします。特に努力して書いているわけでもないので苦にもならないです。
タグ
100越え, アクセス数, ところ映画ネタ, ブログ, 一ヶ月半, 二つジャンル, 休日前, 副産物, 参考, 右肩, 大半, 平日, 年内, 広告収益, 新作映画, 更新, 苦, 評価, 調子,