vue 拍照上传

最新推荐文章于 2024-07-08 15:51:08 发布

置顶

前端抠脚

最新推荐文章于 2024-07-08 15:51:08 发布

阅读量2.2k

点赞数

分类专栏： vue js 拍照文章标签： vue拍照上传 H5拍照

本文链接：https://blog.csdn.net/weixin_40404336/article/details/84563460

版权

这篇博客详细介绍了在Vue项目中实现拍照上传并利用canvas进行图片裁剪的功能，涉及的技术包括HTML5的Blob、base64转换、formData数据传递。同时，还提到了在iOS设备上可能存在的兼容性问题以及在安卓App内的WebView中使用时的注意事项。

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

vue 拍照上传涉及技术点 canvas裁剪 base64 blob数据装换 forData 数据传递，还有hammer.js和exif-js具体代码如下

<template>
    <div class="pic">
        <div class="bg-box">
            <div class="img-box">
                <img src="../../assets/img/news_bg.png" width="100%" alt="">
            </div>
            <div class="headers">
                    <van-nav-bar title="个人信息" @click-left="onClickLeft" >
                        <img class="img" src="../..//assets/img/back@2x.png" slot="left" alt="">
                    </van-nav-bar>
            </div>           
        </div>
        <form enctype="multipart/form-data" >
          <div class="uploadBox">
              <!--主编辑器canvas-->
              <canvas id="canvas" :width="windowWidth" :height="windowWidth"></canvas>
              <!--蒙层canvas-->
              <canvas id="canvasMask" :width="windowWidth" :height="windowWidth"></canvas>
              <!--用于导出图片的canvas-->
              <canvas id="resultImg" width="160" height="160" style="display: none"></canvas>
              <label class="uploadBar" for="uploadInput" v-if="uploadBarShow">
                  <input type="file"
                        style="display: none"
                        id="uploadInput"
                        accept="image/*"
                        ref="file"
                        @change="upLoadChange">
                  <span>点击上传</span>
                  
              </label>
          </div>
          <!-- <img :src="src" v-if="src"/> -->
          <div class="select-box" v-if="!uploadBarShow">
            <!-- <input type="submit"  class="sure-bt"  @click="crop" value="确定裁切"> -->
            <div class="sure-bt"  @click="crop" >确定裁切</div>
            <div class="cancel-bt"  @click="cancel">取消</div>
          </div>
        </form>
        
    </div>
</template>

<script>
import {Toast} from "vant";
import axios from "axios";
import { dataURItoBlob } from "../../assets/js/blob.js"
import { mapMutations } from "vuex";
require("@/assets/plugin/hammer.min"); //引入hammerJS
import qs from "qs"
import EXIF from "exif-js";

export default {
  name: "home",
  data() {
    return {
      src: "",
      orientation: null, //图片元信息
      degree: 0, //原图片旋转角度
      windowWidth: 0, //屏幕的宽度
      imgEl: null,
      imgWidth: 0, //图片的宽度
      imgHeight: 0, //图片的高度
      transWidth: 0, //改变后的图片宽度
      tran