画像を選んで表示し、一部を自由に切り取りして表示Javascript

まず最初に必ず、このデモページをスマホ・パソコンで訪問し、作動状況を確認してください。iphoneで撮影した画像の場合には、容量が概ね3M〜4Mにもなりますが、高速で表示されます。 このJavascriptは、主として、スマホ向けです。

私は、ホームページ制作を行っていますので、この程度のスマホから画像を選んで表示して、その一部を自由に切り取りする程度のことであれば、当然ですが いとも簡単にできます。

非常に興味深いのは、このレベル=単なるcropper.js等のコピー使用ですら、「業界初」として何かすごいような内容である旨宣伝されておられるウェブサイトすらある点です。 失礼に当たるので、あえてリンクしていませんが・・・ 日本人は、英文サイトを読むのが苦手なのです。そして、著作権に対して、中国人・朝鮮人ほどではないにせよ相当程度に鈍感です。

ただし、全てgithub.comで公開されていますので、法的には、著作権上の問題は全くありませんが・・・・

実は、この程度あれば、誰でも30分もあればできます。しかし、残念ながらcropper.jsの場合、全然実用的ではありません。単なるお遊び的な「シュミレーター」に過ぎないのです。 何故なら、画像は、実際にサーバーへアップロードされないからです。反面、非常に高速で表示され、多くのサーバーが1ファイルの容量制限として設定している1ファイル(=1画像) 2メガ以上の大きな画像でも対応できます。ですから、iphoneで撮影した画像でも全く問題なく素早く写真が表示されるのが特徴で、ウェブ上では、現状では最高レベルです なお、サーバーの制限値は、php info関数で直ぐにわかります

それでは、種明かしをしましょう。何故、30分程度でできるのかを!!!!

この私のデモページのjavascriptの内容は、 実は、以下のページのjavascriptの完全なコピー使用にすぎません。ですから、ほとんど時間はかからないのです。

cropper.js

上記英文ウェブサイトは、相当程度に有名です。類似の単語で検索してみてください。腐るほど類似サイトがあります (余計な話ですが、既存のJavascriptを探す場合には、英文で探すのが一番早いですよ)

よく知られているように、「中国では、著作権なんてあってないようなもの」のようです。ひるがって、何故、それぞれの国に住んでいる中国人や朝鮮人にほとんどノーベル賞受賞者がいなのでしょうか??? 理由は、単純だと思います。

中国人や朝鮮人の学者先生様方は、他人の業績をすぐ盗み自分の業績であるかのように見せかけ、結果、その争いに疲れ、どうしようもないのでしょう!!! もちろん、有名なニュートンとライプニッツの争いのように、欧米でも基本的には同じです。だからこそ、欧米では、著作権が重要視されるのです。 韓国で、ノーベル賞受賞者が出るように祈願したとの漫画のような話を読んだことがありますが、その前に、ちゃんと著作権を大事にしろ!!!と言いたくなります。 最も私も同じことをしているので、偉そうなことを言えませんが・・・・

ウェブ上で、Javascriptを使用した場合、ほとんど著作権はないに等しい状態です。これは、学術論文で言えば、事実上、引用しておきながら引用元を伏せ、あたかも自分の業績であるかのように見せかけることを意味します。 学者先生様の場合、幸いにも日本では、上記のようなことをすると致命的です。(韓国では????だからノーベル賞受賞者が出ないんでしょうな!!!)

話を本題に戻して、どうすれば、パソコン・スマホ・タブレットから、画像を選び、その画像を表示した上で、画像を一部を自由に切り取りして、別の背景画像の上に表示できるのかを説明します。 以下の内容は、完全に素人の方を対象にしています。誰でも、出来ます。

@htmlです。全文をコピーして下さい
*img src="img/picture.jpgの部分のみ、当初に表示する画像のファイル名と拡張子を入れてください。(元画像を表示のすぐ下です)
*div style='height:185px;width:95px;background:url(case.jpg);background-repeat:no;margin-bottom:20px;
を変えて自由に利用してください。
(例)
・background:url(case.jpg);
case.jpgは、背景画像です。お好きな背景画像を指定して下さい。
・height、width、margin-bottom等々で背景画像の大きさや表示位置を調整してください。
Acropper.min.jsのjavascriptです。全文をコピーし、jsという名前のフォルダ内に入れてください
基本的には、このまま改変なしで使用できます


Bmain.jsのjavascriptです。全文をコピーし、jsという名前のフォルダ内に入れてください
重要
aspectRatio: 9 /16 の値を変えれば、指定する四角形の形状を指定できます


Ccropper.min.cssです。全文をコピーし、cssとい名称のフォルダ内に入れてください

Dmain.cssです。全文をコピーし、cssとい名称のフォルダ内に入れてください

Eimgというフォルダを作成し、その中にお好きな画像を入れてください

jsフォルダ、cssフォルダ、imgフォルダ、htmlをサーバーへアップロードし、テストしてください。問題なく作動します。 内容を変えたい場合には、html,CSS,javascriptを一部変更してください

誰でも簡単に、パソコン・スマホから画像を選んで、表示、自由に範囲を指定して画像の一部切り取り、切り取った画像を表示できます。 お試しください。わからない点があれば、お問い合わせください。私が言いたいのは、私たち日本人は、中国の方々や朝鮮人のような行為をするべきではないということなのです 終わり!


2017年
5月
 123456
78910111213
14151617181920
21222324252627
28293031