ブラウザに画像をドロップして表示させる部分的な処理(javascript)。これを使って?
2021.10.07
本日はブログを更新するのがいつもよりかなり遅めです?、2000記事を超えてからネタが尽きているようにも思いますが、何とか毎日更新出来ています。ネタが尽きたら少し充電しようかなと思います。
さて、ブラウザに画像をドロップして表示させる部分的な処理(javascript)を作りました。これらを使ってちょっとしたサービスを作っています。まだ完成はしていませんが完成できたらこちらで紹介しようと思っています。尚、部分的な処理なのでドロップしても画像をサーバーに保存させたりすることはないです。
ソースコードはこちらになります。
全体のソースコードはこちらにアクセスしてブラウザのデバッグ機能で見ることが出来ます。
https://zip358.com/tool/demo43/
var obj_input = document.createElement("input");
obj_input.type = "file";
obj_input.accept = "image/png,image/jpeg";
var element = document.getElementById("dropArea");
element.addEventListener("dragover", function(e) {
e.preventDefault();
this.classList.add("dragover");
});
element.addEventListener("dragleave", function(e) {
e.preventDefault();
this.classList.remove("dragover");
});
element.addEventListener("drop", function(e) {
e.preventDefault();
element.classList.remove("dragover");
if (/\.((png)|(jpeg)|(jpg))/i.test(e.dataTransfer.files[0].name) === true) {
var obj = element;
obj.innerHTML = e.dataTransfer.files[0].name;
var imgfiles = e.dataTransfer.files;
obj_input.files = imgfiles;
var fr = new FileReader();
fr.readAsDataURL(obj_input.files[0]);
fr.onload = function() {
obj.style.backgroundImage = "url(" + fr.result + ")";
obj.style.backgroundSize = "cover";
};
}
});
著者名 @taoka_toshiaki
※この記事は著者が40代前半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2000, createElement, document, inp, input, javascript, obj, quot, var, アクセス, かなり, コード, こちら, こと, これ, これら, サーバー, サービス, ソース, デバッグ, ドロップ, ネタ, ブラウザ, ブログ, 保存, 充電, 全体, 処理, 完成, 少し, 更新, 本日, 機能, 毎日, 画像, 紹介, 表示, 記事,
PHP7でTwigを使う。
2020.05.10
Twigとは小枝であり、PHPのテンプレートエンジンであります。テンプレートエンジンが何なのかはぐぐってください。ここでは割愛します。
Twig3.x(3系)、Dumpの表示の仕方が書かれていないのでそれを記載します。記載方法は下記になります。特に記載方法が変わったのはデバッグの時の記述方法です、最初、デバッグ方法をググっていたのですが、全然上手くいかずエラーばかりはいていました。※Twig2系の情報が結構ヒットします。
require_once '/vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('テンプレートの階層を指定');
$twig = new \Twig\Environment($loader,['debug' => true]);
$twig->addExtension(new \Twig\Extension\DebugExtension());//?ここの記述を忘れずに!!
echo $twig->render('index.html(レンダーするテンプレートファイル)', ['items'=>$this->top_view()]);
結局、公式ページのドキュメントにデバッグ方法が書かれていたのですが、それにたどり着くまで、小一時間ぐらいWEBの荒野をさまよっていました。最初からドキュメントを見ろよという教訓を得たのですが、結構ググる方を優先してしまう自分がいます。実際はドキュメントの中で検索するのが一番なのかもなと。皆さんが使用するようなエンジンはドキュメントを見るほうが良いと今回、痛感しました。これからはドキュメントを見るようにします。
https://twig.symfony.com/doc/3.x/functions/dump.html
著者名 @taoka_toshiaki
※この記事は著者が40代前半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2, 3, 39, 7, addExtension, autoload, debug, dump, Environment, FilesystemLoader, gt, loader, new, once, php, require, true, Twig, vendor, エラー, エンジン, ここ, それ, デバッグ, テンプレート, ヒット, 下記, 仕方, 何, 割愛, 小枝, 情報, 指定, 方法, 時, 最初, 表示, 記載, 記述, 階層,
知ってます?ちょいWINDOWS10便利機能。IT関係者は!
2020.02.10
知ってます?ちょいWINDOWS10便利機能。IT関係者は知っているひと多めです、逆に知らないのが少ないぐらいかなと思います。あのカズさんも知ってます。ちなみに仮想デスクトップは1画面の時はとても重宝しますね。これが出来るようになってかなり感激でした。
実際、WIN+CTR+Dはとても良いですよ!コード作業用とかデバック用とか切り替えるとさっと確認できるのはとても良いです。ただ、自分は3画面を使っているので仮想デスクトップはあまり使用していません。会社は2画面だったのでたまに使用したりしていました。ついでに吉田さんの動画も載せときますね。圧縮系の話は良い感じかな。
著者名 @taoka_toshiaki
※この記事は著者が40代前半に書いたものです.
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
1, 10, 2, 3, CTR, IT, win, Windows, カズ, かなり, コード, これ, たま, デスクトップ, デバッグ, 仮想, 会社, 作業, 使用, 便利, 動画, 吉田, 圧縮, 多め, 実際, 感激, 時, 機能, 画面, 確認, 自分, 話, 逆, 重宝, 関係者,