centaline-data-driven 1.4.58 → 1.4.59

package/build/centaline/centaline.path.js

@@ -56,6 +56,7 @@ const paths = {
     "browseIframe": "./src/centaline/browseIframe/index.js", //URL弹层 
     "dynamicViewerFile": "./src/centaline/dynamicViewerFile/index.js", //图片预览框组件
     "dynamicDragSort": "./src/centaline/dynamicDragSort/index.js", //上下拖拽排序组件
+    "dynamicEditPictures": "./src/centaline/dynamicEditPictures/index.js", //图片编辑组件
   },
   "plugs": {
     "api": "./src/centaline/api/index.js", //调用API插件

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "centaline-data-driven",
-  "version": "1.4.58",
+  "version": "1.4.59",
   "description": "ccai",
   "author": "hjc <3226136347@qq.com>",
   "private": false,
@@ -15,6 +15,7 @@
     "axios": "^0.24.0",
     "babel-polyfill": "^6.26.0",
     "compression-webpack-plugin": "^2.0.0",
+    "cropperjs": "^1.5.13",
     "element-ui": "^2.15.7",
     "module": "^1.2.5",
     "sass": "^1.34.0",

package/src/centaline/dynamicEditPictures/index.js

@@ -0,0 +1,11 @@
+import dynamicEditPictures from './src/dynamicEditPictures'
+
+dynamicEditPictures.install = function (Vue) {
+  Vue.component(dynamicEditPictures.name, dynamicEditPictures);
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(dynamicEditPictures);
+}
+
+export default dynamicEditPictures;

package/src/centaline/dynamicEditPictures/src/dynamicEditPictures.vue

@@ -0,0 +1,604 @@
+<template>
+  <div class="magnify-modal" style="width:100%; height:100%;background-color: #1e1e1e">
+    <div class="magnify-stage">
+      <canvas id="drawCanvas" ref="canvas" style="position:absolute;"></canvas>
+    </div>
+    <div class="magnify-Original" v-if="flagOriginal">
+      <el-row>
+        <el-button type="success" @click="Original()">原图</el-button>
+      </el-row>
+    </div>
+    <div class="magnify-cropper" v-if="croppShow">
+      <el-row>
+        <el-button type="success" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
+        <el-button type="primary" @click="cancelCropper()"><i class="el-icon-close"></i></el-button>
+      </el-row>
+    </div>
+    <div class="magnify-footer" v-else>
+      <div class="magnify-toolbar">
+        <a @click="rotLeft" class="magnify-btn" title="左旋转">
+          <span class="el-icon-refresh-left"></span>
+        </a>
+        <a @click="rotRight" class="magnify-btn" title="右旋转">
+          <span class="el-icon-refresh-right"></span>
+        </a>
+        <a @click="Crop" class="magnify-btn" title="裁剪">
+          <span class="el-icon-crop"></span>
+        </a>
+        <a @click="Drag" class="magnify-btn" title="拖动">
+          <span class="el-icon-rank"></span>
+        </a>
+        <a @click="Apply" class="magnify-btn" title="涂抹">
+          <span class="el-icon-brush"></span>
+        </a>
+        <a @click="enlarge" class="magnify-btn" title="放大">
+          <span class="el-icon-zoom-in"></span>
+        </a>
+        <a @click="narrow" class="magnify-btn" title="缩小">
+          <span class="el-icon-zoom-out"></span>
+        </a>
+        <a @click="clear" class="magnify-btn" title="清除">
+          <span class="el-icon-refresh"></span>
+        </a>
+        <a @click="preservation" class="magnify-btn" title="保存">
+          <span class="el-icon-check"></span>
+        </a>
+
+      </div>
+    </div>
+    <div class="stream-total-tips" v-if="progressFlag">
+      <el-progress type="circle"
+                   :percentage="typeof loadProgress !== 'undefined' && loadProgress !== null ? loadProgress : 0.00"
+                   :width="150" :height="150" class="file-cirle"></el-progress>
+    </div>
+    <div class="mask" v-if="progressFlag"></div>
+  </div>
+</template>
+<script>
+  import dynamicElement from "../../mixins/dynamicElement";
+  import { upload, uploadByPieces } from "../../loader/src/ctl/SliceUpload";
+  import Enum from '../../loader/src/ctl/lib/Enum';
+  import Cropper from 'cropperjs'
+  import 'cropperjs/dist/cropper.min.css'
+  export default {
+    name: "ct-editpictures",
+    mixins: [dynamicElement],
+    props: {
+      file: Object,
+      api: String,
+      minWidth: Number,
+      minHeight: Number
+    },
+    data() {
+      return {
+        flagOriginal: false,
+        progressFlag: false,
+        loadProgress: 0,
+        cropper: null,
+        croppShow: false,
+        canvas: Object,
+        ctx: Object,
+        imgObj: Object,
+        rot: 0,
+        canMove: false,
+        PaintMove: false,
+        isActive: false,
+        tx: 0,
+        ty: 0,
+        tl: 0,
+        tt: 0,
+        startX: 0,
+        startY: 0,
+        nl: 0,
+        nt: 0,
+        ratio: 0,
+        cropBoxResizable: false,
+      }
+    },
+    computed: {
+
+    },
+    mounted() {
+      this.progressFlag = false;
+      this.loadProgress = 0;
+      if (typeof this.minWidth == 'undefined' || typeof this.minWidth == 'undefined') {
+        this.cropBoxResizable = true;
+      }
+      if (typeof this.file.originalSavedFileName !== 'undefined' && this.file.originalSavedFileName !== this.file.savedFileName) {
+        this.flagOriginal = true;
+      }
+      console.log(this.file);
+      this.drawCanv();
+    },
+    methods: {
+      drawCanv(href) {
+        this.$nextTick(() => {
+          let _this = this
+          _this.canvas = document.getElementById('drawCanvas');
+          _this.ctx = _this.canvas.getContext("2d");
+
+          _this.canvas.width = 0;
+          _this.canvas.height = 0;
+
+          _this.imgObj = new Image()
+          _this.imgObj.src = href||_this.file.mediaUrl;
+          _this.imgObj.setAttribute("crossOrigin", 'Anonymous')
+          _this.imgObj.onload = function (e) {
+            //获取原始宽高
+            let naturalWidth = (e.path)[0].naturalWidth
+            let naturalHeight = (e.path)[0].naturalHeight
+
+            _this.canvas.width = naturalWidth;
+            _this.canvas.height = naturalHeight;
+            _this.ctx.drawImage(_this.imgObj, 0, 0, naturalWidth, naturalHeight)
+
+            var scale = 1;
+            var scalew = 900 / _this.imgObj.width;
+            var scaleh = window.document.body.clientHeight / _this.imgObj.height;
+            if (scalew < 1 && scaleh < 1) {
+              if (scalew < scaleh) {
+                scale = scalew;
+              }
+              else {
+                scale = scaleh;
+              }
+            }
+            else if (scalew > 1 && scaleh < 1) {
+              scale = scaleh;
+            }
+            else if (scalew < 1 && scaleh > 1) {
+              scale = scalew;
+            }
+            _this.scaleDomSize(_this.canvas, scale);
+          }
+          this.canvas.addEventListener("pointerdown", _this.startDraw, false);
+          this.canvas.addEventListener("pointermove", _this.draw, false);
+          this.canvas.addEventListener("pointerup", _this.endDraw, false);
+          this.canvas.addEventListener("pointerout", _this.outdraw, false);
+        })
+      },
+      outdraw() {
+        this.isActive = false;
+      },
+      draw(e) {
+        e.preventDefault();
+        if (this.isActive && this.PaintMove) {
+          var x = e.offsetX || e.layerX - canvas.offsetLeft;
+          var y = e.offsetY || e.layerY - canvas.offsetTop;
+          var sw = 0;
+          var sh = 0;
+          var sx = 0;
+          var sy = 0;
+
+          if (x >= this.startX) {
+            sw = x - this.startX;
+            sx = this.startX;
+          }
+          else if (x < this.startX) {
+            sw = this.startX - x;
+            sx = x;
+          }
+          if (y >= this.startY) {
+            sh = y - this.startY;
+            sy = this.startY;
+          }
+          else if (y < this.startY) {
+            sh = this.startY - y;
+            sy = y;
+          }
+          if (sw != 0 && sh != 0) {
+            var data = this.ctx.getImageData(sx, sy, sw, sh);
+            //将图像数据进行高斯模糊 data.data是一个数组，每四个值代表一个像素点的rgba的值，data.width data.height 分别代表图像数据的宽高
+            var emptyData = this.gaussBlur(data);
+            //将模糊的图像数据再渲染到画布上面
+            this.ctx.putImageData(emptyData, sx, sy);
+          }
+
+        }
+        else if (this.isActive && this.canMove) {
+          //获取x和y
+          var nx = e.clientX;
+          var ny = e.clientY;
+          //计算移动后的左偏移量和顶部的偏移量
+          this.nl = nx - (this.tx - this.tl);
+          this.nt = ny - (this.ty - this.tt);
+          this.canvas.style.left = this.nl + 'px';
+          this.canvas.style.top = this.nt + 'px';
+        }
+      },
+      startDraw(e) {
+        if (this.canMove) {
+          //获取x坐标和y坐标
+          this.tx = e.clientX;
+          this.ty = e.clientY;
+          //获取左部和顶部的偏移量
+          this.tl = this.canvas.offsetLeft;
+          this.tt = this.canvas.offsetTop;
+          //设置样式
+          this.canvas.style.cursor = 'move';
+        }
+        else if (this.PaintMove) {
+          e.preventDefault();
+          this.startX = e.offsetX;
+          this.startY = e.offsetY;
+          this.ctx.beginPath();
+        }
+        this.isActive = true;
+      },
+
+      endDraw(e) {
+        if (this.canMove) {
+          this.canvas.style.cursor = 'default';
+        }
+        else if (this.PaintMove) {
+          e.preventDefault();
+        }
+        this.isActive = false;
+      },
+
+      enlarge() {
+        this.scaleDom(this.canvas, "+");
+      },
+      narrow() {
+        this.scaleDom(this.canvas, "-");
+      },
+      //放大缩小
+      scaleDom(canvas, type) {
+        let scale = parseFloat((canvas.style.transform || `scale(1)`).replace(/[^0-9.]/gi, ''))
+        if (type == "-") {
+          scale += -0.1;
+          if ((scale <= 1 && canvas.width > 900) || (scale <= 1 && canvas.height > (window.document.body.clientHeight))) {
+            canvas.style.left = - canvas.width * 0.05 * ((1 - scale) * 10) + 'px';
+            canvas.style.top = -canvas.height * 0.05 * ((1 - scale) * 10) + 'px';
+          }
+        } else if (type == "+") {
+          scale += 0.1;
+          if ((scale <= 1 && canvas.width > 900) || (scale <= 1 && canvas.height > (window.document.body.clientHeight))) {
+            canvas.style.left = - canvas.width * 0.05 * ((1 - scale) * 10) + 'px';
+            canvas.style.top = -canvas.height * 0.05 * ((1 - scale) * 10) + 'px';
+          }
+        }
+        else {
+          scale = 1;
+        }
+        if (scale >= 0.1) canvas.style.transform = `scale(${scale})`;
+
+      },
+      rotLeft() {
+        this.rot -= 90;
+        if (this.rot === -90) {
+          this.rot = 270;
+        }
+        this.rotate(this.canvas, this.imgObj, this.rot);
+      },
+      rotRight() {
+        this.rot += 90;
+        this.rotate(this.canvas, this.imgObj, this.rot);
+        if (this.rot === 270) {
+          this.rot = -90;
+        }
+      },
+      rotate(canvas, img, rot) {
+        //获取图片的高宽
+        var w = img.width;
+        var h = img.height;
+        //角度转为弧度
+        if (!rot) {
+          rot = 0;
+        }
+        var rotation = Math.PI * rot / 180;
+        var c = Math.round(Math.cos(rotation) * 1000) / 1000;
+        var s = Math.round(Math.sin(rotation) * 1000) / 1000;
+        //旋转后canvas标签的大小
+        canvas.height = Math.abs(c * h) + Math.abs(s * w);
+        canvas.width = Math.abs(c * w) + Math.abs(s * h);
+        //绘图开始
+        var context = canvas.getContext("2d");
+        context.save();
+        //改变中心点
+        if (rotation <= Math.PI / 2) {
+          context.translate(s * h, 0);
+        } else if (rotation <= Math.PI) {
+          context.translate(canvas.width, -c * h);
+        } else if (rotation <= 1.5 * Math.PI) {
+          context.translate(-c * w, canvas.height);
+        } else {
+          context.translate(0, -s * w);
+        }
+        //旋转90°
+        context.rotate(rotation);
+        //绘制
+        context.drawImage(img, 0, 0, w, h);
+        context.restore();
+        img.style.display = "none";
+      },
+      Crop() {
+        let _this = this
+        this.drawCanv()
+        this.croppShow = true
+        let cropper = new Cropper(this.$refs.canvas, {
+          checkCrossOrigin: true,
+          viewMode: 1,
+          dragMode: 'move',
+          cropBoxResizable: _this.cropBoxResizable,
+          data: {
+            width: this.minWidth || 800,
+            height: this.minHeight || 600
+          },
+          zoom(e) {
+            if (_this.ratio == 0) {
+              _this.ratio = e.detail.oldRatio
+            }
+            if (e.detail.ratio > _this.ratio) {
+              e.preventDefault();
+            }
+          },
+        })
+        this.cropper = cropper
+      },
+      // 确认裁剪
+      sureCropper() {
+        let _this = this
+        this.cropper.getCroppedCanvas().toBlob(function (blob) {
+          const href = window.URL.createObjectURL(blob)
+          _this.drawCanv(href)
+        }, 'image/jpeg')
+        this.cancelCropper()
+      },
+      // 销毁裁剪框
+      cancelCropper() {
+        this.cropper.destroy()
+        this.croppShow = false
+        this.cropper = null
+      },
+      Original() {
+        var url = this.file.mediaUrl.replace(this.file.savedFileName, this.file.originalSavedFileName);
+        this.drawCanv(url);
+      },
+      Drag() {
+        this.canMove = true;
+        this.PaintMove = false;
+      },
+      Apply() {
+        this.PaintMove = true;
+        this.canMove = false;
+      },
+      clear() {
+        this.drawCanv();
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.canvas.style.left = '0px';
+        this.canvas.style.top = '0px';
+        this.rot = 0;
+        this.nl = 0;
+        this.nt = 0;
+        this.scaleDom(this.canvas, "");
+        this.rotate(this.canvas, this.imgObj, this.rot);
+      },
+      scaleDomSize(canvas, scale) {
+        if ((scale <= 1 && canvas.width > 900) || (scale <= 1 && canvas.height > (window.document.body.clientHeight))) {
+          canvas.style.left = - canvas.width * 0.05 * ((1 - scale) * 10) + 'px';
+          canvas.style.top = -canvas.height * 0.05 * ((1 - scale) * 10) + 'px';
+        }
+        if (scale >= 0.1) canvas.style.transform = `scale(${scale})`;
+      },
+      async preservation() {
+        this.progressFlag = true;
+        this.loadProgress = 0;
+        var url = this.canvas.toDataURL('image/jpeg');
+        var files = this.convertBase64UrlToFile(url, this.file.fileName);
+        // data是上传时附带的额外参数，file是文件
+        let uid = this.uploadguid();
+        try {
+          files.uid = uid;
+          const res = await uploadByPieces(this.api, files, this.uploadpro, files.size);
+          return res;
+
+        } catch (e) {
+          return e;
+        }
+      },
+      uploadpro(filesize, res, xhr, flagError) {
+        if (flagError) {
+          this.$message.error(res);
+          return false;
+        }
+        else if (xhr.status == 200) {
+          if (res.rtnCode != 200 && res.rtnMsg != "") {
+            this.$message.error(res.rtnMsg);
+            return false;
+          }
+          const Progress = Math.min(100, Math.floor(1E4 * parseInt(res.content.nextOffSet) / parseInt(filesize)) / 100);
+
+          this.progressFlag = true;
+          this.loadProgress = Progress;
+
+          if (res.content.finished == 1) {
+            this.loadProgress = 100;
+            this.progressFlag = false;
+            this.file.mediaUrl = res.content.media.mediaUrl;
+            this.file.savedFileName = res.content.media.savedFileName;
+            this.file.mediaDate = res.content.media.mediaDate;
+            this.$emit('handleEditPhoto', this.file);
+          }
+          return true;
+        }
+      },
+      S4() {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+      },
+      uploadguid() {
+        return (this.S4() + this.S4() + '-' + this.S4() + '-' + this.S4() + '-' + this.S4() + '-' + this.S4() + this.S4() + this.S4());
+      },
+      convertBase64UrlToFile(urlData, filename) {
+        const bytes = window.atob(urlData.split(',')[1]);        // 去掉url的头，并转换为byte   // 处理异常,将ascii码小于0的转换为大于0
+        const ab = new ArrayBuffer(bytes.length);
+        const ia = new Uint8Array(ab);
+        for (let i = 0; i < bytes.length; i++) {
+          ia[i] = bytes.charCodeAt(i);
+        }
+        return new File([ab], filename, { type: 'image/' + this.file.fileExtension });
+      },
+      gaussBlur(imgData) {
+        var pixes = imgData.data;
+        var width = imgData.width;
+        var height = imgData.height;
+        var gaussMatrix = [],
+          gaussSum = 0,
+          x, y,
+          r, g, b, a,
+          i, j, k, len;
+        var radius = Math.floor(this.imgObj.width / 100);
+        if (radius < 10) {
+          radius = 10;
+        }
+        var sigma = Math.floor(radius / 3);
+
+        a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
+        b = -1 / (2 * sigma * sigma);
+        //生成高斯矩阵
+        for (i = 0, x = -radius; x <= radius; x++, i++) {
+          g = a * Math.exp(b * x * x);
+          gaussMatrix[i] = g;
+          gaussSum += g;
+
+        }
+
+        //归一化, 保证高斯矩阵的值在[0,1]之间
+        for (i = 0, len = gaussMatrix.length; i < len; i++) {
+          gaussMatrix[i] /= gaussSum;
+        }
+        //x 方向一维高斯运算
+        for (y = 0; y < height; y++) {
+          for (x = 0; x < width; x++) {
+            r = g = b = a = 0;
+            gaussSum = 0;
+            for (j = -radius; j <= radius; j++) {
+              k = x + j;
+              if (k >= 0 && k < width) {//确保 k 没超出 x 的范围
+                //r,g,b,a 四个一组
+                i = (y * width + k) * 4;
+                r += pixes[i] * gaussMatrix[j + radius];
+                g += pixes[i + 1] * gaussMatrix[j + radius];
+                b += pixes[i + 2] * gaussMatrix[j + radius];
+                // a += pixes[i + 3] * gaussMatrix[j];
+                gaussSum += gaussMatrix[j + radius];
+              }
+            }
+            i = (y * width + x) * 4;
+            // 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题
+            pixes[i] = r / gaussSum;
+            pixes[i + 1] = g / gaussSum;
+            pixes[i + 2] = b / gaussSum;
+            // pixes[i + 3] = a ;
+          }
+        }
+        //y 方向一维高斯运算
+        for (x = 0; x < width; x++) {
+          for (y = 0; y < height; y++) {
+            r = g = b = a = 0;
+            gaussSum = 0;
+            for (j = -radius; j <= radius; j++) {
+              k = y + j;
+              if (k >= 0 && k < height) {//确保 k 没超出 y 的范围
+                i = (k * width + x) * 4;
+                r += pixes[i] * gaussMatrix[j + radius];
+                g += pixes[i + 1] * gaussMatrix[j + radius];
+                b += pixes[i + 2] * gaussMatrix[j + radius];
+                // a += pixes[i + 3] * gaussMatrix[j];
+                gaussSum += gaussMatrix[j + radius];
+              }
+            }
+            i = (y * width + x) * 4;
+            pixes[i] = r / gaussSum;
+            pixes[i + 1] = g / gaussSum;
+            pixes[i + 2] = b / gaussSum;
+          }
+        }
+        return imgData;
+      },
+    }
+  };
+</script>
+<style>
+  .magnify-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 50px;
+    border: none;
+    overflow: hidden;
+  }
+
+  .magnify-footer {
+    height: 50px;
+    bottom: 0;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    z-index: 9;
+  }
+  .magnify-cropper {
+    height: 50px;
+    bottom: 0;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    z-index: 9;
+  }
+  .magnify-Original {
+    height: 50px;
+    top: 50px;
+    right:20px;
+    position: absolute;
+    color: #fff;
+    z-index: 9;
+  }
+  .magnify-toolbar {
+    display: inline-block;
+    height: 50px;
+    background-color: rgba(0, 0, 0, .5);
+    -webkit-border-radius: 5px 5px 0 0;
+    -moz-border-radius: 5px 5px 0 0;
+    border-radius: 5px 5px 0 0;
+  }
+
+    .magnify-toolbar .magnify-btn {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      margin: 0;
+      color: #999;
+      line-height: 50px;
+      color: #ffffff;
+      font-size: 24px;
+      cursor: pointer;
+    }
+  .rc-cropper {
+    position: relative;
+  }
+
+  .rc-cropper__iconCrop1 {
+    position: absolute;
+    right: 4%;
+    top: 0%;
+  }
+  .mask {
+    position: fixed;
+    z-index: 9998;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, .3);
+  }
+  .stream-total-tips {
+    position: fixed;
+    top: 40%;
+    left: 40%;
+    z-index: 9999;
+  }
+ 
+</style>