勉強したことのメモ.

Webエンジニア / プログラマが勉強したことのメモ。

フォームからアップロードした画像にPHPで任意のテキストを追加する方法

  PHP

以前フォームから送られてきた画像に対してサイトロゴみたいなロゴ画像を追加する記事を書いたが、今回はロゴではなく任意のテキスト(文言)を指定の位置に追加したい。これも「class.upload.php」ライブラリを用いることで簡単に実装できた。以下に対応方法をメモ。

 

class.upload.php

公式サイト

https://www.verot.net/php_class_upload.htm

GitHub

https://github.com/verot/class.upload.php

ドキュメント

https://github.com/verot/class.upload.php/blob/master/README.md

 

インストール方法

composerを使う場合

composer require verot/class.upload.php

自サーバにアップロードする場合

公式サイトのclass.upload.phpページよりファイルをダウンロードし、適当なディレクトリにアップロードする。

今回はこちらの方法を取った。

 

事前準備

フォントファイルの準備

適当なフォントファイル(ttfファイル)をサーバにアップロードしておく。今回はこちらのサイトの「GenShinGothic-Light.ttf」を使用させていただいた。

尚、フォントファイルを用意しない場合(デフォルトのフォントを使った場合)、日本語のテキストが文字化けした。

 

ソースコード

フォーム側(index.php)

<html lang="ja">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="upload.php" method="post" enctype="multipart/form-data">
            <input type="file" name="file">
            <input type="submit" name="submit" value="送信">
        </form>
    </body>
</html>

アップロード側(upload.php)

<?php
require_once 'class.upload.php';

$file = $_FILES['file'];
$lang = 'ja_JP';
$handle = new \Verot\Upload\Upload($file, $lang);

if( $handle->uploaded ){

    //ファイル名の変更
    $handle->file_new_name_body = date('YmdHis');

    //同一ファイル名の場合は上書き
    $handle->file_overwrite = true;

    //フォント設定
    $handle->image_text_font = './GenShinGothic-Light.ttf';

    //テキスト内容
    $handle->image_text = "テストテキスト\n改行\nテストテキスト";

    //テキストサイズ
    $handle->image_text_size = 24;

    //X軸の位置
    $handle->image_text_x = -5;

    //Y軸の位置
    $handle->image_text_y = -5;

    $handle->Process('./img/');

    if( $handle->processed ){
        //成功処理
        echo 'success';
    }else{
        //エラー処理
        echo $handle->error;
    }

}else{
    //エラー処理
    echo $handle->error;
}

各種オプションについて

テキスト関連の各種オプションについてはこちらのページを参照。

 - PHP

  関連記事

jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法
jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法

画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以 ...

JavaScriptにて画像をフルスクリーン表示する方法
JavaScriptにて画像をフルスクリーン表示する方法

JavaScriptにて画像をクリックするとフルスクリーン表示させたかった。ただ ...

LightboxをjQuery無しで実装できる「Luminous」の利用方法
LightboxをjQuery無しで実装できる「Luminous」の利用方法

あるサイトのコーディングデータを貰った際、jQueryは使用していないのにLig ...

Lightboxの最新版ライブラリ「Lightbox3」の利用方法サンプル
Lightboxの最新版ライブラリ「Lightbox3」の利用方法サンプル

画像拡大(モーダル表示)系のライブラリはLightbox2を使用していたが、最新 ...

Ajaxでプラグイン無しのファイルアップロード方法
Ajaxでプラグイン無しのファイルアップロード方法

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...