上传头像裁剪

系统管理员 2022-11-21 09:55 310阅读 0赞

<template>
      <div id="demo">
        <van-nav-bar
          title="上传头像"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          fixed
        />
        
        <div class="container"  v-show="panel">
          <div>
            <img id="image" :src="url" alt="Picture" />
          </div>
          <button type="button" id="button" @click="crop">确定</button>
        </div>
        <div style="padding: 20px;margin-top:46px;" class="imgStyle">
          <div class="show">
            <div
              class="picture"
              :style="'backgroundImage:url(' + headerImage + ')'"
            ></div>
          </div>
          <div style="margin-top: 20px" class="imgStyle">
            <input type="file" id="change" accept="image" @change="change" />
            <label for="change"></label>
          </div>
        </div>
      </div>
    </template>  
    
    <script>
    import Cropper from "cropperjs";
    import { mapState } from "vuex";
    export default {
      components: {},
      data() {
        return {
          headerImage: "",
          picValue: "",
          cropper: "",
          croppable: false,
          panel: false,
          url: "",
          files:'',
        };
      },
      mounted() {
        //初始化这个裁剪框
        var self = this;
        var image = document.getElementById("image");
        this.cropper = new Cropper(image, {
          aspectRatio: 1,
          viewMode: 1,
          background: false,
          zoomable: false,
          ready: function () {
            self.croppable = true;
          },
        });
      },
      computed: {
        ...mapState("user", ["token"]),
      },
      methods: {
        onClickLeft(){
          this.$router.go(-1)
        },
        getObjectURL(file) {
          var url = null;
          if (window.createObjectURL != undefined) {
            // basic
            url = window.createObjectURL(file);
          } else if (window.URL != undefined) {
            // mozilla(firefox)
            url = window.URL.createObjectURL(file);
          } else if (window.webkitURL != undefined) {
            // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
          }
          return url;
        },
        change(e) {
          this.files = e.target.files || e.dataTransfer.files;
          if (!this.files.length) return;
          this.panel = true;
          this.picValue = this.files[0];
          this.url = this.getObjectURL(this.picValue);
          //每次替换图片要重新得到新的url
          if (this.cropper) {
            this.cropper.replace(this.url);
          }
          this.panel = true;
        },
        afterRead(file) {
          // 此时可以自行将文件上传至服务器
          console.log(file);
          // file.file.name = file.name
          let formdata1 = new FormData(); // 创建form对象
          formdata1.append("file", file); // 通过append向form对象添加数据
          formdata1.append("name", file.name); // 通过append向form对象添加数据
          let config = {
            headers: { "Content-Type": "multipart/form-data", token: this.token },
          };
          this.axios
            .post(
              "http://www.daopianshuping.com/api/upload/head_icon",
              formdata1,
              config
            )
            .then((res) => {
              console.log(res);
              if (res.data.path) {
                sessionStorage.setItem("header_icon", res.data.path);
              }
            })
            .catch((error) => {
              this.tool.check(error);
            });
        },
        crop() {
          this.panel = false;
          var croppedCanvas;
          var roundedCanvas;
    
          if (!this.croppable) {
            return;
          }
          // Crop
          croppedCanvas = this.cropper.getCroppedCanvas();
          console.log(this.cropper);
          // Round
          roundedCanvas = this.getRoundedCanvas(croppedCanvas);
    
          this.headerImage = roundedCanvas.toDataURL();
          this.postImg();
          this.afterRead(this.files[0]);
        },
        getRoundedCanvas(sourceCanvas) {
          console.log(sourceCanvas);
          var canvas = document.createElement("canvas");
          var context = canvas.getContext("2d");
          var width = sourceCanvas.width;
          var height = sourceCanvas.height;
          canvas.width = width;
          canvas.height = height;
          context.imageSmoothingEnabled = true;
          context.drawImage(sourceCanvas, 0, 0, width, height);
          context.globalCompositeOperation = "destination-in";
          context.beginPath();
          context.arc(
            width / 2,
            height / 2,
            Math.min(width, height) / 2,
            0,
            2 * Math.PI,
            true
          );
          context.fill();
          return canvas;
        },
        postImg() {
          //这边写图片的上传
        },
      },
    };
    </script>  
    
    <style>
    .imgStyle{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #demo #button {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 80px;
      height: 40px;
      border: none;
      border-radius: 5px;
      background: white;
    }
    #demo .show {
      width: 100px;
      height: 100px;
      overflow: hidden;
      position: relative;
      border-radius: 50%;
      border: 1px solid #d5d5d5;
    }
    #demo .picture {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    #demo .container {
      z-index: 99;
      position: fixed;
      padding-top: 60px;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 1);
    }
    
    #demo #image {
      max-width: 100%;
    }
    
    .cropper-view-box,
    .cropper-face {
      border-radius: 50%;
    }
    /*!  
     * Cropper.js v1.0.0-rc  
     * https://github.com/fengyuanchen/cropperjs  
     *  
     * Copyright (c) 2017 Fengyuan Chen  
     * Released under the MIT license  
     *  
     * Date: 2017-03-25T12:02:21.062Z  
     */
    
    .cropper-container {
      font-size: 0;
      line-height: 0;
    
      position: relative;
    
      -webkit-user-select: none;
    
      -moz-user-select: none;
    
      -ms-user-select: none;
    
      user-select: none;
    
      direction: ltr;
      -ms-touch-action: none;
      touch-action: none;
    }
    
    .cropper-container img {
      /* Avoid margin top issue (Occur only when margin-top <= -height) */
      display: block;
      min-width: 0 !important;
      max-width: none !important;
      min-height: 0 !important;
      max-height: none !important;
      width: 100%;
      height: 100%;
      image-orientation: 0deg;
    }
    
    .cropper-wrap-box,
    .cropper-canvas,
    .cropper-drag-box,
    .cropper-crop-box,
    .cropper-modal {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    
    .cropper-wrap-box {
      overflow: hidden;
    }
    
    .cropper-drag-box {
      opacity: 0;
      background-color: #fff;
    }
    
    .cropper-modal {
      opacity: 0.5;
      background-color: #000;
    }
    
    .cropper-view-box {
      display: block;
      overflow: hidden;
    
      width: 100%;
      height: 100%;
    
      outline: 1px solid #39f;
      outline-color: rgba(51, 153, 255, 0.75);
    }
    
    .cropper-dashed {
      position: absolute;
    
      display: block;
    
      opacity: 0.5;
      border: 0 dashed #eee;
    }
    
    .cropper-dashed.dashed-h {
      top: 33.33333%;
      left: 0;
      width: 100%;
      height: 33.33333%;
      border-top-width: 1px;
      border-bottom-width: 1px;
    }
    
    .cropper-dashed.dashed-v {
      top: 0;
      left: 33.33333%;
      width: 33.33333%;
      height: 100%;
      border-right-width: 1px;
      border-left-width: 1px;
    }
    
    .cropper-center {
      position: absolute;
      top: 50%;
      left: 50%;
    
      display: block;
    
      width: 0;
      height: 0;
    
      opacity: 0.75;
    }
    
    .cropper-center:before,
    .cropper-center:after {
      position: absolute;
      display: block;
      content: " ";
      background-color: #eee;
    }
    
    .cropper-center:before {
      top: 0;
      left: -3px;
      width: 7px;
      height: 1px;
    }
    
    .cropper-center:after {
      top: -3px;
      left: 0;
      width: 1px;
      height: 7px;
    }
    
    .cropper-face,
    .cropper-line,
    .cropper-point {
      position: absolute;
    
      display: block;
    
      width: 100%;
      height: 100%;
    
      opacity: 0.1;
    }
    
    .cropper-face {
      top: 0;
      left: 0;
    
      background-color: #fff;
    }
    
    .cropper-line {
      background-color: #39f;
    }
    
    .cropper-line.line-e {
      top: 0;
      right: -3px;
      width: 5px;
      cursor: e-resize;
    }
    
    .cropper-line.line-n {
      top: -3px;
      left: 0;
      height: 5px;
      cursor: n-resize;
    }
    
    .cropper-line.line-w {
      top: 0;
      left: -3px;
      width: 5px;
      cursor: w-resize;
    }
    
    .cropper-line.line-s {
      bottom: -3px;
      left: 0;
      height: 5px;
      cursor: s-resize;
    }
    
    .cropper-point {
      width: 5px;
      height: 5px;
    
      opacity: 0.75;
      background-color: #39f;
    }
    
    .cropper-point.point-e {
      top: 50%;
      right: -3px;
      margin-top: -3px;
      cursor: e-resize;
    }
    
    .cropper-point.point-n {
      top: -3px;
      left: 50%;
      margin-left: -3px;
      cursor: n-resize;
    }
    
    .cropper-point.point-w {
      top: 50%;
      left: -3px;
      margin-top: -3px;
      cursor: w-resize;
    }
    
    .cropper-point.point-s {
      bottom: -3px;
      left: 50%;
      margin-left: -3px;
      cursor: s-resize;
    }
    
    .cropper-point.point-ne {
      top: -3px;
      right: -3px;
      cursor: ne-resize;
    }
    
    .cropper-point.point-nw {
      top: -3px;
      left: -3px;
      cursor: nw-resize;
    }
    
    .cropper-point.point-sw {
      bottom: -3px;
      left: -3px;
      cursor: sw-resize;
    }
    
    .cropper-point.point-se {
      right: -3px;
      bottom: -3px;
      width: 20px;
      height: 20px;
      cursor: se-resize;
      opacity: 1;
    }
    
    @media (min-width: 768px) {
      .cropper-point.point-se {
        width: 15px;
        height: 15px;
      }
    }
    
    @media (min-width: 992px) {
      .cropper-point.point-se {
        width: 10px;
        height: 10px;
      }
    }
    
    @media (min-width: 1200px) {
      .cropper-point.point-se {
        width: 5px;
        height: 5px;
        opacity: 0.75;
      }
    }
    
    .cropper-point.point-se:before {
      position: absolute;
      right: -50%;
      bottom: -50%;
      display: block;
      width: 200%;
      height: 200%;
      content: " ";
      opacity: 0;
      background-color: #39f;
    }
    
    .cropper-invisible {
      opacity: 0;
    }
    
    .cropper-bg {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMzTjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
    }
    
    .cropper-hide {
      position: absolute;
    
      display: block;
    
      width: 0;
      height: 0;
    }
    
    .cropper-hidden {
      display: none !important;
    }
    
    .cropper-move {
      cursor: move;
    }
    
    .cropper-crop {
      cursor: crosshair;
    }
    
    .cropper-disabled .cropper-drag-box,
    .cropper-disabled .cropper-face,
    .cropper-disabled .cropper-line,
    .cropper-disabled .cropper-point {
      cursor: not-allowed;
    }
    </style>