画像 on qwerty.work

【EC-CUBE4】商品画像の最大サイズを制限して自動的にリサイズしてアップロードしたいとき。

Wed, 26 Jan 2022 11:37:19 +0900

アップロード画像の最大サイズを固定したい

EC-CUBEで商品写真をアップロードする際、誤ってリサイズせずに3000x2000ピクセルくらいの画像をアップロードしまうことがありました。デフォルトではサイズは無制限のようです。これをアップロードする際に自動的に800x800ピクセルまたは1000x1000ピクセルくらいにしたいと思い。どのようにしたらできるか調べると以下の参考ページを見つけることができ解決できたのでメモ。

対象バージョン：4.1.1

参考ページ

EC-CUBE4のファイルアップロードには「jQuery File Upload」が使われているようです。

https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

https://web.bright-b.com/eccube4-image-size-64/ https://web.bright-b.com/eccube4-image-size-64/

手順

変更を加えるテンプレート

縦横のサイズ上限値を指定するためには以下のファイルに変更を加えます。

ec-cubeのディレクトリ/src/Eccube/Resource/template/admin/Product.twig

追記するコード

Product.twig の 131行目に以下のコードがあるかと思います。

$('#{{ form.product_image.vars.id }}').fileupload({
    url: "{{ url('admin_product_image_add') }}", 
    type: "post",
    sequentialUploads: true,
    dataType: 'json',
    dropZone: $('#upload-zone'),
    done: function(e, data) {
        $('.progress').hide();
        $.each(data.result.files, function(index, file) {
            var path = '{{ asset('', 'temp_image') }}' + file;
            var $img = $(proto_img.replace(/__path__/g, path));
            var $new_img = $(proto_add.replace(/__name__/g, count_add));
            $new_img.val(file);
            $child = $img.append($new_img);
            $('#thumb').append($child);
            count_add++;
        });
        hideThumbnail();
        updateSortNo();
    },

この間に追記します。

$('#{{ form.product_image.vars.id }}').fileupload({
    url: "{{ url('admin_product_image_add') }}",
    type: "post",
    sequentialUploads: true,
    dataType: 'json',
    dropZone: $('#upload-zone'),
    disableImageResize: false, //新規追加　画像のリサイズを許可
    imageMaxWidth: 1000, //新規追加　横幅の最大サイズ
    imageMaxHeight: 1000, //新規追加  縦幅の最大サイズ
    imageQuality: 0.7, //新規追加　リサイズした画像の画質
    done: function(e, data) {
        $('.progress').hide();
        $.each(data.result.files, function(index, file) {
            var path = '{{ asset('', 'temp_image') }}' + file;
            var $img = $(proto_img.replace(/__path__/g, path));
            var $new_img = $(proto_add.replace(/__name__/g, count_add));
            $new_img.val(file);
            $child = $img.append($new_img);
            $('#thumb').append($child);
            count_add++;
        });
        hideThumbnail();
        updateSortNo();
    },

オプションの説明

https://github.com/blueimp/jQuery-File-Upload/wiki/Options https://github.com/blueimp/jQuery-File-Upload/wiki/Options

これで、アップロード時にリサイズされた画像がアップロードされていると思います。

VLC Media Playerで動画から静止画（スナップショット）を切り出す方法

Wed, 21 Oct 2020 22:43:09 +0900

動画から静止画を切り出したい

YouTubeに動画をアップロードするときのサムネイル画像として動画から静止画を切り出したいと思いました。しかし、あまりてはかけたくありません。そこで、既にPCにインストールしたアプリケーションの中で、それができるものがないかな？と探したらありました「VLC Media Player」

https://www.videolan.org/vlc/index.ja.html https://www.videolan.org/vlc/index.ja.html

メニューから「スナップショットを撮る」を選ぶ

静止画を切り出す方法はとても簡単です。

動画を一時停止する
［ビデオ］-［スナップショットを撮る］を選択

これだけです。

撮った画像は「ピクチャフォルダ」

標準設定では撮影した静止画は**「ピクチャ」フォルダにPNG形式**で保存されています。

画像の形式や保存場所は**［ツール］-［設定］**の画面から変更することができます。PNG形式の他にJPGとTIFFに変更することができます。

MozshotとCSSでサムネイル画像の横に文字列を回り込みさせる方法

Sat, 04 Jul 2009 22:31:24 +0900

サムネイルの周りに文字を回り込ませたい

指定したURLのサムネイルを簡単に表示できる「Mozshot」とCSSを組み合わせて、サイトのサムネイル画像の周りに文字を回り込ませて配置する方法をメモ。リンク集のページなどに便利です。

ソース例

<style type="text/css">
  .imgLeft { float : left ; } /*画像の回り込みの設定*/
  .clrLeft { clear : both ; } /*文字の回り込みの解除*/
</style>
<div class="clrLeft">
  <p class="imgLeft">
    <img src="https://image.thum.io/get/width/300/crop/200/http://qwerty.work" alt="QWERTY.WORK" />
    QWERTY.WORK
  </p>
</div>

表示例

↓↓上記でこうなる↓↓

/画像の回り込みの設定/ .imgLeft { float : left ; } /文字の回り込みの解除/ .clrLeft { clear : both ; }

QWERTY.WORK

MozshotはBlinkyに変わっていた

2022/3/22現在、久々にMozshotの公式サイトにアクセスしてみると、Blinkyという後継サービスに変わっていました。

https://blinky.nemui.org/ https://blinky.nemui.org/

使用方法はほぼ同じです。

https://blinky.nemui.org/usage https://blinky.nemui.org/usage