4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptで画像プレビュー実装、画像サイズを統一したい【初心者】

Posted at

画像投稿があるアプリを作成し、プレビューの実装をしたところ、、
Image from Gyazo

画像でかすぎる!!!
、、、となったので自分への備忘録として。

今回のプレビューの実装ではrails、Javascriptを使っています。

document.addEventListener("DOMContentLoaded",function(){
  const ImageList = document.getElementById("image-list");
  if (!ImageList){ return false;}
  document.getElementById("item-image").addEventListener("change", function(e){
   const imageContent = document.querySelector('img');
   if (imageContent){
     imageContent.remove();
   }
 
   const file = e.target.files[0];
   const blob = window.URL.createObjectURL(file);

   const imageElement =  document.createElement('div');
   const blobImage = document.createElement('img');
   blobImage.setAttribute('src', blob);
  imageElement.appendChild(blobImage);
  ImageList.appendChild(imageElement);
  });
});

該当箇所のrailsはこちら↓


<div class="img-upload">
      <div class="weight-bold-text">
        画像
        <div id="image-list"></div>
        <span class="indispensable">必須</span>
      </div>
      <div class="click-upload">
        <p>
          クリックしてファイルをアップロード
        </p>
        <%= f.file_field :image, id:"item-image" %>
      </div>
    </div>

    <%# 以下省略 %>

既に、JavascriptでHTML要素を取得はできているはず、、ということは
①JavaScript内でサイズを指定する
②JavaScript内にクラスを設定し、CSSでサイズ指定をする

この2択かと思い、いろいろ検索、、、すると!
Javascriptでクラスを追加できそうだ。
(↓こちらとっても参考にさせていただきました。ありがとうございました)
https://techacademy.jp/magazine/27026

ということでクラスを追加


document.addEventListener("DOMContentLoaded",function(){
  const ImageList = document.getElementById("image-list");
  if (!ImageList){ return false;}
  document.getElementById("item-image").addEventListener("change", function(e){
   const imageContent = document.querySelector('img');
   if (imageContent){
     imageContent.remove();
   }
 
   const file = e.target.files[0];
   const blob = window.URL.createObjectURL(file);

   const imageElement =  document.createElement('div');
   const blobImage = document.createElement('img');
   blobImage.setAttribute('src', blob);
  blobImage.classList.add('preview-size');  こちらを追加しました
  imageElement.appendChild(blobImage);
  ImageList.appendChild(imageElement);
  });
});

そしてCSSに

.preview-size{
    height: 150px;
    width: auto;
  }

を追加すると、、、

Image from Gyazo

###できた!!!
モチベーションを上げるために柴犬を使ってテストをしていましたが、
柴犬のことが嫌いになりそうなぐらいだったので、本当によかった。。。

もっと効率的な方法もありそうなので
引き続き勉強していきます!
間違い等あればコメントいただければと思います

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?