ブラウザに画像をドロップして表示させる部分的な処理(javascript)。これを使って?

2021.10.07

Logging

本日はブログを更新するのがいつもよりかなり遅めです?、2000記事を超えてからネタが尽きているようにも思いますが、何とか毎日更新出来ています。ネタが尽きたら少し充電しようかなと思います。

ブラウザに画像をドロップして表示させる部分的な処理(javascript)

さて、ブラウザに画像をドロップして表示させる部分的な処理(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

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

タグ

2000, createElement, document, inp, input, javascript, obj, quot, var, アクセス, かなり, コード, こちら, こと, これ, これら, サーバー, サービス, ソース, デバッグ, ドロップ, ネタ, ブラウザ, ブログ, 保存, 充電, 全体, 処理, 完成, 少し, 更新, 本日, 機能, 毎日, 画像, 紹介, 表示, 記事,

自分を充電したい。

2021.02.05

Logging

全然関係ない話ですがスマホのバッテリーはギリギリまで使う派ですか?自分は一日一回は充電器に挿して充電しています。たまに自分も充電器に挿して充電したい気持ちになります。そんな機械があれば自殺者なんてこの世から無くなると思うわけです。でもそんな絵空事が実際になろうとしています。それを積極的に行っているのはイーロン・マスクです。

https://www.youtube.com/watch?v=r-vbh3t7WVI

イーロン・マスクは脳に電極を埋め込んで、情報などをやり取りするような事を研究しています。ちなみに結構、脳のことが最近わかってきていて近い将来鬱を治せるようになるかもです。そんな時代になったら、世界から自ら死を選ぶ人はかなりの確率でなくなるのではないかと思っています。

mRNA Translation (Advanced)

そして、今回、コロナワクチンで使用されているmRNA(メッセンジャーRNA)がどうも凄い技術らしくてこれはかなりの病気を寛容にもっていけるみたいです、なので今、病気で苦しんでいる人たちにも希望の持てる技術かと思います。

災い転じて福となすって言葉が適切な表現かはわかりませんが・・・ね。

著者名  @taoka_toshiaki

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

タグ

, 7, com, https, mRNA, r-vbh, RNA, watch, WVI, www, youtube, イーロン, かなり, ギリギリ, こと, この世, これ, コロナ, スマホ, それ, たま, バッテリー, マスク, メッセンジャー, やり取り, ワクチン, , 世界, , , , 今回, 使用, 充電, 充電器, 実際, 寛容, 将来, 情報, 技術, 時代, 最近, 機械, , 気持ち, , 病気, 研究, 確率, 絵空事, , 自ら, 自分, 自殺者, , , 電極, ,

ソニーのBluetoothのスピーカー安いやつだけど今の自分には高いやつ。

2020.07.15

Logging

ソニーのBluetoothのスピーカー安いやつだけど今の自分には高いやつを買いました。商品型番はSRS-XB01です、音飛びしないしコンパクトだし、まぁまぁ音も良いので買ってよかったと思います。因みにパソコンのスピーカーとして使用しております。

充電式で充電すれば6時間再生可能みたいですが、基本的に耐えず充電するような形で使っていこうと思っています。こういう絶えず充電すると多分、充電池が劣化しやすいだろうけど、この方法で使います。

一万円のスピーカーにいづれは切り替えることになるだろうと思うのですが、充電池が劣化するには2?3年はかかるだろうから、それまではこれで良いかなと思っていますので、まぁ当分使用するということです。

深夜のためにソニーのBluetoothのヘッドホンを買いたいのですが、安定した収入もないのでいつ買うかは未定です。今回買ってわかったのはブランド品は音飛びしないということです。

Bluetoothの安いヘッドホンで今まで使用していたのですが、音飛びがブツブツしてそれがストレスになっていたので、ちょっと値段高かったですが買ってよかったと思っています。

手のひらサイズで3W! SONY ワイヤレススピーカー SRS-XB01

著者名  @taoka_toshiaki

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

タグ

01, 2, , 6, bluetooth, SRS-XB, いつ, いづれ, こと, これ, コンパクト, スピーカー, ソニー, それまで, ため, パソコン, ブランド, ヘッドホン, やつ, 一万, , 今回, 使用, 充電, 充電池, 再生, 劣化, 収入, 可能, 商品, 型番, 安定, 当分, , 方法, 未定, 深夜, 自分, , 音飛び,