裁剪问题等

index.html

@@ -20,5 +20,6 @@
     <script src="https://unpkg.com/qiniu-js@2.2.0/dist/qiniu.min.js"></script>
     <script src="https://cdn.bootcss.com/downloadjs/1.4.8/download.min.js"></script>
     <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
+    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-5.1.1.min.js"></script>
   </body>
 </html>

src/components/common/cropper.two copy.vue

+<template>
+  <div class="rc-cropper" v-if="originImg">
+    <el-row>
+      <el-col :span="12">
+        <div class="rc-cropper__canvasCrop2">
+          <img :src="originImg" v-if="!cropper">
+          <canvas :id="originImg" ref="canvas"/>
+          <div class="rc-cropper__iconCrop">
+            <el-tooltip content="确认裁剪" placement="right" v-if="cropper">
+              <el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="10">
+        <div class="rc-cropper__previewImg">
+          <img :src="previewImg" id="previewImg"/>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.min.css'
+export default {
+  name: 'rc-cropper2',
+  props: {
+    cropOption: {
+      type: Object,
+      required: true,
+      default: () => {}
+    },
+    originImg: {
+      required: true
+    },
+    previewImg: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      cropper: null,
+      croppShow: false
+    }
+  },
+  mounted () {
+    this.drawImg()
+  },
+  methods: {
+    // 在canvas上绘制图片
+    drawImg () {
+      const _this = this
+      this.$nextTick(() => {
+        let canvas = document.getElementById(this.originImg)
+        if (canvas) {
+          canvas.width = 720
+          canvas.height = 480
+          let ctx = canvas.getContext('2d')
+          ctx.clearRect(0, 0, canvas.width, canvas.height)
+          let img = new Image()
+          img.crossOrigin = 'Anonymous'
+          img.src = this.originImg
+          img.onload = function () {
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+            _this.initCropper()
+          }
+        }
+      })
+    },
+    // 显示裁剪框
+    initCropper () {
+      this.croppShow = true
+      this.cropper = new Cropper(this.$refs.canvas, {
+        checkCrossOrigin: true,
+        viewMode: 3,
+        zoomOnWheel: false, // 是否可以通过移动鼠标来放大图像
+        aspectRatio: 3 / 2,
+        ready: () => {
+          this.cropper.setData({
+            x: this.cropOption.offset_x,
+            y: this.cropOption.offset_y,
+            width: this.cropOption.width,
+            height: this.cropOption.height
+          })
+        }
+      })
+      // this.cropper = cropper
+    },
+    // 确认裁剪
+    sureCropper () {
+      let _this = this
+      const cropParam = this.cropper.getData()
+      this.cropper.getCroppedCanvas().toBlob(function (blob) {
+        let oFileReader = new FileReader()
+        oFileReader.onloadend = function (e) {
+          let base64 = e.target.result
+          _this.$emit('getCropImg', base64, cropParam)
+        }
+        oFileReader.readAsDataURL(blob)
+      }, 'image/jpeg')
+    }
+  }
+}
+</script>
+<style >
+.rc-cropper {
+  position: relative;
+  margin-top: 20px;
+}
+
+/* img {
+  width: 100%;
+  height: 100%;
+} */
+
+.rc-cropper__canvasCrop2 {
+  width: 720px;
+  height: 480px;
+}
+
+.rc-cropper__iconCrop {
+  position: absolute;
+  left: 45%;
+  top: 0%;
+}
+
+.el-tooltip {
+  margin: 20px 4px;
+  display: block;
+  z-index: 10000;
+}
+
+.rc-cropper__previewImg {
+  width: 600px;
+  height: 400px;
+}
+</style>

src/components/common/cropper.two.vue

 <template>
   <div class="rc-cropper" v-if="originImg">
     <el-row>
-      <el-col :span="12">
+      <el-col>
         <div class="rc-cropper__canvasCrop2">
           <img :src="originImg" v-if="!cropper">
           <canvas :id="originImg" ref="canvas"/>
@@ -12,11 +12,11 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="10">
+      <!-- <el-col :span="10">
         <div class="rc-cropper__previewImg">
           <img :src="previewImg" id="previewImg"/>
         </div>
-      </el-col>
+      </el-col> -->
     </el-row>
   </div>
 </template>
@@ -115,8 +115,8 @@ export default {
 } */
 
 .rc-cropper__canvasCrop2 {
-  width: 720px;
-  height: 480px;
+  width: 900px;
+  height: 760px;
 }
 
 .rc-cropper__iconCrop {

src/style/global.scss

@@ -189,4 +189,10 @@
     }     
   }
 }
+.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
+  border-color: #449284 !important;
+}
+.el-input__inner:focus, .el-textarea__inner:focus {
+  border-color: #449284 !important;
+}
 

src/utils/fetch.js

@@ -54,7 +54,7 @@ service.interceptors.request.use(config => {
     }
     if( process.env.BUILD_ENV == "development" ){  // 本地开发环境
       // console.log('环境变量>>>> ', process.env.BUILD_ENV);
-      config.headers['token'] = '377D063C4A8448B2847E05074648E77F';
+      config.headers['token'] = '3F5F01DF814C46E59FF09F3E63A55D18';
       // config.headers['token'] = localStorage.getItem('storageToken')
     }else{
       config.headers['token'] = localStorage.getItem('storageToken')

src/utils/oss/ossUtil.js

@@ -12,8 +12,13 @@ contentTypeMap.set("xlsx", "application/vnd.openxmlformats-officedocument.spread
 // PICA_DEV_APP.service('ossUtil', function ($rootScope, $q) {
 
 //获取OSS客户端
-let bucketName = localStorage.getItem("bucketName");
-let endpoint = localStorage.getItem("endpoint");
+// let bucketName = localStorage.getItem("bucketName");
+// let endpoint = localStorage.getItem("endpoint");
+
+let bucketName = 'pica-test-huabei2';
+let endpoint = 'oss-cn-beijing.aliyuncs.com';
+
+console.log(bucketName, endpoint);
 
 // //上传状态
 // let status = false;
@@ -34,8 +39,8 @@ const doOSSAction = () => {
     //sts服务器
     // let stsUrl = localStorage.getItem("stsUrl") + "/" + localStorage.getItem("token");
     // let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token");
-	// let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/377D063C4A8448B2847E05074648E77F'
-	let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token");
+	let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/D1AA498C1C1C4298B712B3678EF9BD07'
+	// let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token");
 
     return new Promise(function (resolve, reject) {
         fetch(stsUrl, {}, 'GET').then(function (result) {
@@ -53,11 +58,11 @@ const doOSSAction = () => {
                 console.log('STS临时授权成功');
             } else {
                 reject(result);
-                console.error('STS临时授权失败:', result);
+                console.error('STS临时授权失败222:', result);
             }
         }).catch(function (error) {
             reject();
-            console.error('STS临时授权失败:', error);
+            console.error('STS临时授权失败111:', error);
         });
     });
 };