H5拍照，压缩，以及控制图片方向

最新推荐文章于 2023-12-21 14:53:39 发布

彼小星

最新推荐文章于 2023-12-21 14:53:39 发布

阅读量710

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/mzzzzq/article/details/84940929

版权

本文介绍如何利用HTML5的Canvas功能对图片进行压缩，并通过exif-js库处理拍照图片的方向问题，实现拍照组件（photograph.vue）与应用示例（photographDemo.vue）的集成。

摘要由CSDN通过智能技术生成

思路：
利用HTML5 Canvas功能对图片进行编辑，使用exif-js库获取拍照的方向从而控制图片的旋转角度。

photograph.vue为拍照组件，photographDemo.vue为使用组件的demo，

photograph.vue

<template>
    <div @click="takePhotos">
        <slot></slot>
        <input type="file" accept="image/*" @change="uploadImgChange($event)" ref="photoFile" id="photoFile"/>
    </div>
</template>

<script>
import EXIF from 'exif-js'

export default {
  props: {
    quality: {
      value: Number,
      default: 0.5
    },
    maxSize: {
      value: Number,
      default: 51200
    }
  },
  methods: {
    takePhotos () {
      this.$refs.photoFile.click()
    },
    getImg (img, file) {
    // img为预览图片的地址
    // file为上传的图片文件
      this.$emit('getImg', img, file)
    },
    uploadImgChange ($event) {
      let file = $event.target.files[0]
      let th