图片截取

project/src/assets/config/interface_api.js

@@ -396,6 +396,7 @@ var api = {
 
   order_platformList: "/api/order/platformList", // 付费来源
   playlet_batchCreateLink: "/api/platform/batchCreateLink", // 批量生成推广链接
+  material_uploadFileByUrl: '/api/material/uploadFileByUrl',
 };
 
 export { api };

project/src/components/assembly/editCon.vue

@@ -200,7 +200,11 @@
             <img v-if="miniprogram.pic_url" :src="miniprogram.pic_url" class="fm_img">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
-          <el-button type="primary" plain size="mini">裁剪</el-button>
+          <div style="margin-left:40px;">
+            <el-button type="danger" size="mini" style="height:30px;margin-bottom:0px;" @click="openImgCutter">图片裁剪</el-button>
+            <p class="uploadImgHint" style="margin:0">可根据需要对图片进行裁剪。</p>
+          </div>
+
         </div>
         <p class="uploadImgHint" style="margin-left:20px;">*图片仅支持png或jpg格式，且文件大小不得超过10M。封面图建议尺寸为520*416。</p>
         <div class="buttons">
@@ -276,8 +280,10 @@
       @confirm="onConfirmMultipleLink"
       @cancel="onCancelMultipleLink"
     />
-
-    <!-- <imgCutter></imgCutter> -->
+    <!-- 图片裁剪弹框 -->
+    <el-dialog width="840px" title="图片裁剪" :visible.sync="imgCutterVisible" append-to-body>
+      <imgCutter v-if="imgCutterVisible" :target="oss_url"></imgCutter>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -285,9 +291,10 @@ import draggable from "vuedraggable"
 import phonePreview from './phonePreview.vue'
 import radarEntrance from './radarEntrance.vue'
 import multipleLink from './multipleLink.vue'
-// import imgCutter from './imgCutter.vue'
+import imgCutter from './imgCutter.vue'
 export default {
   components: {
+    imgCutter,
     draggable,
     phonePreview,
     radarEntrance,
@@ -376,6 +383,8 @@ export default {
       has_attachLen: 0,//除雷达外,附件的长度
 
       multipleLinkVisible: false,
+      imgCutterVisible: false,
+      oss_url: '', // 需要裁剪并转化后的图片链接
     }
   },
   created () {
@@ -385,6 +394,39 @@ export default {
     }
   },
   methods: {
+    openImgCutter(){ // 打开图片裁剪
+      if ( this.miniprogram.pic_url ) {
+        this.$loading(this.$loadingConfig)
+        if ( this.miniprogram.pic_url.indexOf('http://playlet.oss-cn-beijing.aliyuncs.com/') != -1 ){
+          this.oss_url = this.miniprogram.pic_url.replace('http://playlet.oss-cn-beijing.aliyuncs.com/','http://dj.wenxingshuju.com/oss_image/');
+          this.imgCutterVisible = true
+          this.$loading(this.$loadingConfig).close()
+        } else {
+          if (this.oss_url) { // oss_url存在，说明已经通过服务端转化过，不需要重复转化
+            this.imgCutterVisible = true
+            this.$loading(this.$loadingConfig).close()
+            return
+          }
+          // 图片通过服务器转化，解决图片裁剪跨域问题
+          this.$axios.post(this.URL.BASEURL + this.URL.material_uploadFileByUrl, {
+            img_url: this.miniprogram.pic_url
+          }).then((res) => {
+            var res = res.data
+            if (res && res.errno == 0) {
+              this.oss_url = res.rst.oss_url.replace('http://playlet.oss-cn-beijing.aliyuncs.com/','http://dj.wenxingshuju.com/oss_image/');
+              this.imgCutterVisible = true
+              this.$loading(this.$loadingConfig).close()
+            } else if (res.errno != 4002) {
+              this.$message({ message: res.err, type: "error" })
+            }
+          }).catch((err) => {
+            this.$message({ message: '服务器错误，获取裁剪图片失败', type: "error" })
+          });
+        }
+      } else {
+        this.imgCutterVisible = true
+      }
+    },
     radarids_reset () { //雷达id回显
       this.has_attachLen = 0
       this.radarIds = []

project/src/components/assembly/imgCutter.vue

@@ -1,26 +1,112 @@
 <template>
 <div>
-  <ImgCutter @cutDown="cutDown" :isModal="false" :sizeChange="false" :scaleAble="false" :originalGraph="true" cutWidth="520" cutHeight="206"></ImgCutter>
+  <ImgCutter ref="imgCutterModal" v-loading="loadCut" :isModal="false" :sizeChange="true" :scaleAble="false" :originalGraph="true" rate="65:52" @cutDown="cutDown" @onClearAll="onClearAll">
+    <template slot="open"><slot></slot></template>
+  </ImgCutter>
 </div>
 </template>
 <script>
 import ImgCutter from 'vue-img-cutter'
-
+import axios from 'axios'
 export default {
     name: 'imgCutter',
+    props:{
+      target:{
+        type: String
+      }
+    },
     components:{
         ImgCutter
     },
     data() {
        return {
-
+        loadCut: false,
+        base64_url: '', // base64
+        firstCome: true, // 判断是否初次进来
+        oss_url: '', // 域名更新后的地址
        }
     },
+    watch: {
+      target(){
+        this.target && this.target != '' && this.getBase64Image(this.target);
+      }
+    },
+    mounted(){
+      if(this.firstCome && this.target && this.target != ''){
+        this.getBase64Image (this.target)
+      }
+    },
     methods: {
+      getBase64Image (url, ref) {
+        this.loadCut = true
+        this.firstCome = false ;
+        var that = this
+        var image = new Image()
+        image.src = url + '?v=' + Math.random() // 处理缓存
+        image.crossOrigin = 'anonymous' // 支持跨域图片
+        image.onload = function () {
+          var base64 = that.drawBase64Image(image)
+          that.loadCut = false;
+          that.base64_url = base64;
+          that.forIe9();
+        }
+      },
+      drawBase64Image (img) {
+        var canvas = document.createElement('canvas')
+        canvas.width = img.width
+        canvas.height = img.height
+        var ctx = canvas.getContext('2d')
+        ctx.drawImage(img, 0, 0, img.width, img.height)
+        var dataURL = canvas.toDataURL('image/png')
+        return dataURL
+      },
+      //裁剪
+      forIe9 () {
+        this.$refs.imgCutterModal.handleOpen({
+          name: 'img',
+          src: this.base64_url,
+          width: 400,
+          height: 400,
+        });
+      },
        //通过cutDown事件接收选择的图片信息
        cutDown(event) {
            console.log(event)
-       }
+          if (!event.file) {
+            this.$message({ message: '图片剪裁失败！', type: "error" })
+            return
+          };
+          let formData = new FormData();
+          formData.append("material_file",event.file);  //上传一个files对象
+          formData.append("type",1);
+          formData.append("need_media_id",0);
+          formData.append("admin_id",this.$cookie.getCookie('admin_id'));
+          formData.append("ttl",this.$cookie.getCookie('ttl'));
+          formData.append("sign",this.$cookie.getCookie('sign'));
+          formData.append("corpid",this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : '');
+
+          let instance= axios.create({
+            baseURL: '',
+            data: formData,
+            headers: { 'Content-Type': 'multipart/form-data'}
+          })
+
+          instance.post(this.URL.BASEURL + this.URL.material_upload,formData).then((res) => {
+            var res = res.data
+            if (res && res.errno == 0) {
+
+            } else if (res.errno != 4002) {
+              this.$message({ message: res.err, type: "error" })
+            }
+          }).catch((err) => {
+            this.$message({ message: '服务器错误，获取裁剪图片失败', type: "error" })
+          });
+
+       },
+      // 清空画布
+      onClearAll(){
+        console.log('点击了取消')
+      },
     }
 
 }