拡張画像アップローダー付きてがろぐスキン
ダウンロード
25/1/30 スクリプトの修正に伴うファイル更新。
過去配布ファイル
説明
上の記事のスクリプトを組み込んだデモ用スキンです。
→デモサイト
skin-simplebox >> ２カラム(レスポンシブ対応)
skin-simplebox_mono >> １カラム
skin-simplebox_gallery >> ギャラリーモード用
が入っています。
●拡張画像アップローダーについて
てがろぐで使える画像アップロード用拡張スクリプト(a.k.a てがろぐでD＆Dまたはコピペで画像投稿するやつ)です。
主な機能
・複数画像D＆D
・Ctrl＋Vでクリップボードの画像をアップロード
・サムネイル自動作成(加工の反映を選択可能)
・WEBP対応、WEBP変換機能
・文字入れ機能
・透かし画像入れ機能(位置選択可能)
・リサイズオプション(PHPにて設定)
画像は即座にアップロードされます。不要な画像を上げてしまった場合は手動で削除してください。
●使い方
あらかじめimages内にminiフォルダを作ってください。ないとサムネイルが作成できません。
また、透かし画像を使う場合はPNG画像を用意してください。(サンプル用にwatermark.pngを同梱しています。差し替えてください。)
<script src="upload.js"></script><!--拡張画像アップローダー-->を使用中スキンのskin-cover.html内、[QUICKPOST]以下に張り付けてください。
以下のファイルはてがろぐ本体があるディレクトリにアップロードしてください。
upload.js upload.php Mplus1-Regular.ttf(使うフォントファイル)
・upload.js
6~10行目
無理やりここにスタイルシートを組み込んでいるので、見た目を変えたい場合はここを弄るか、skin-cover.htmlで使用しているCSSに追記してください。
19行目
<input type="text" id="customText" value="無断転載禁止/DO NOT REPOST">value内のテキストを変更しておくと便利です。
頻繁に使う項目は checked を付けておくとよいでしょう。
33行目あたり
<option value="watermark.png">watermark.png</option>透かし画像を複数使う場合は、以上に続き
<option value="watermark2.png">サンプル１</option>
のような形で追加してください。
・upload.php
6~13行目 設定項目です。初期値は以下のようになっています。
$uploadDir = 'images/'; // 画像アップロードディレクトリ
$miniDir = 'images/mini/';//
$thumbnailWidth = 250;//サムネイルのサイズ
$fontFile = 'Mplus1-Regular.ttf'; //使用するフォントファイル
$resizeOption = '1'; // 画像サイズ制限オプション（1 = 有効, 0 = 無効）
$maxDimension = 1000; // 最大サイズ
$defaultWatermark = 'watermark.png'; //デフォルトの透かし画像
$watermarkScale = 0.2;//透かし画像の倍率(対横幅)221行目
$text = mb_convert_encoding($text, 'UTF-8', 'auto'); 環境によっては日本語が文字化けすることがあります。文字化けする場合はSJISなどに変更してください。
・Mplus1-Regular.ttf
文字入れ機能用の初期フォントファイルとして、Mplus1-Regular.ttfが同梱されています。
M+フォントについて
https://mplusfonts.github.io/
SIL Open Font Licenseについて
https://licenses.opensource.jp/OFL-1.1/OFL-1.1.html
このスクリプトはchatGPTを用いて作成しました。不具合があるかもしれませんので、もし見つけた方はhttps://note.com/tekito_note/n/nbdf0de9b571bまでご連絡ください。
また、このスクリプトの改変、改変後の再配布、自作配布スキンへの組み込みはご自由にどうぞ。
できればhttps://note.com/tekito_note/n/nbdf0de9b571b へのリンクがあるとなにかあった場合にユーザーが助かるかもしれません。
このスクリプトを利用して生じたトラブルについては責任を負いかねますのでご了承ください。
以下サンプル画像
