vue에서 이미지 크기를 조정하는 방법

vue에서 이미지 크기를 조정하는 방법

이미지를 nodejs에서 vue로 업로드하고 이미지를 v-card에 넣습니다.

근데 이미지가 끊겨서

자르지 않고 이미지 크기를 조정하는 방법

v-img에서 'contain' 특성 사용

<v-img src="/picture.png" alt=""
    contain    <!-- causes picture not to be cropped -->
    height="100px"
    width="150px">
</v-img>

자세한 것은, https://vuetifyjs.com/en/components/images#api 를 참조해 주세요.

이 질문은 오래전부터 답해 온 것으로 알고 있습니다만, 커뮤니티에 도움이 되도록 제 답변을 덧붙입니다.

다음 코드는 특정 용도에만 해당되지 않습니다.vuetify.js하지만 이것은 어떤 경우에도 사용할 수 있습니다.vue.js프로젝트 - 마크를 변경하기만 하면 됩니다.비트를 수정하면 반응, 각도 또는 모든 JS 프레임워크에서도 사용할 수 있습니다.

// If you like - you can move this section into separate file 
// ------- Move from here -------
const dataURItoBlob = (dataURI) => {
  const bytes = dataURI.split(',')[0].indexOf('base64') >= 0
    ? atob(dataURI.split(',')[1])
    : unescape(dataURI.split(',')[1]);
  const mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
  const max = bytes.length;
  const ia = new Uint8Array(max);
  for (let i = 0; i < max; i += 1) ia[i] = bytes.charCodeAt(i);
  return new Blob([ia], { type: mime });
};

const resizeImage = ({ file, maxSize }) => {
  const reader = new FileReader();
  const image = new Image();
  const canvas = document.createElement('canvas');

  const resize = () => {
    let { width, height } = image;

    if (width > height) {
      if (width > maxSize) {
        height *= maxSize / width;
        width = maxSize;
      }
    } else if (height > maxSize) {
      width *= maxSize / height;
      height = maxSize;
    }

    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(image, 0, 0, width, height);

    const dataUrl = canvas.toDataURL('image/jpeg');

    return dataURItoBlob(dataUrl);
  };

  return new Promise((ok, no) => {
    if (!file.type.match(/image.*/)) {
      no(new Error('Not an image'));
      return;
    }

    reader.onload = (readerEvent) => {
      image.onload = () => ok(resize());
      image.src = readerEvent.target.result;
    };

    reader.readAsDataURL(file);
  });
};

// export default resizeImage; // uncomment once moved to resizeImage.js
// ------- till here - into ./src/plugins/image-resize.js -------

// And then import in whichever component you like in this way:
// import resizeImage from '@/plugins/image-resize.js';

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      originalImg: '',
      resizedImg: '',
    };
  },
  methods: {
    readURL(file) {
      // START: preview original
      // you can remove this section if you don't like to preview original image
      if (!file.type.match(/image.*/)) {
        no(new Error('Not an image'));
        return;
      }

      const reader = new FileReader();
      reader.onload = (e) => this.originalImg = e.target.result;
      reader.readAsDataURL(file); // convert to base64 string
      // END: preview original

      // START: preview resized
      resizeImage({ file: file, maxSize: 150 }).then((resizedImage) => {
        this.resizedImg = URL.createObjectURL(resizedImage);
      }).catch((err) => {
        console.error(err);
      });
      // END: preview resized
    },
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-file-input
          accept="image/png, image/jpeg, image/bmp"
          placeholder="Pick an Image"
          prepend-icon="mdi-camera"
          label="Avatar"
          @change="readURL"
        ></v-file-input>
      </v-container>

      <v-container v-if="originalImg">
        <v-row justify="space-around">
          <v-col cols="5">
            <div class="subheading">Original Image</div>
            <img :src="originalImg"/>
          </v-col>
          <v-col cols="5">
            <div class="subheading">Resized Image</div>
            <img :src="resizedImg"/>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</div>

이 답변을 완성하는 데 도움이 된 답변:

1. 이미지를 업로드하기 전에 미리 보기
2. HTML5를 사용하여 업로드하기 전에 이미지 크기 조정

언급URL : https://stackoverflow.com/questions/53708278/how-to-resize-the-image-in-vue