@zhijiancloud/bpm 0.0.7 → 0.0.9

package/components/lib/bpmMulImage/src/part/editor.vue

@@ -1,449 +0,0 @@
-<template>
-  <div class="bpm-mul-image-edit">
-    <el-upload
-      ref="uploader"
-      :action="url"
-      name="userfile"
-      :show-file-list="false"
-      multiple
-      :limit="maxCount"
-      :accept="extensions"
-      :before-upload="handleAdd"
-      :on-success="onUploaded"
-      :on-error="onFail"
-      :file-list="fileList"
-      v-bind="$attrs"
-      v-on="$listeners"
-    >
-      <el-button size="small" type="primary" slot="trigger" :disabled="disabled"
-        >点击上传</el-button
-      >
-    </el-upload>
-    <div class="row gutter-sm q-my-sm file-list">
-      <template v-if="curVal && curVal.length">
-        <viewer
-          :images="photo"
-          rebuild
-          class="row gutter-sm q-my-sm file-list"
-          style="width: 100%"
-          @inited="inited"
-        >
-          <div class="col-12 file-box" v-for="item in curVal" :key="item.md5">
-            <span
-              class="file-content"
-              @click="previewImg(item)"
-              v-if="isImageFile(item)"
-            >
-              <img class="preview-img" :src="fileLink(item)" />
-            </span>
-            <span @click="preview(item)" v-else class="file-content q-mb-xs">
-              <div class="text-left text-faded">
-                <i
-                  aria-hidden="true"
-                  class="q-icon fa fa-file-pdf-o"
-                  :class="getFileTypeClass(item)"
-                ></i>
-              </div>
-            </span>
-            <div
-              class="relative-position file-link ellipsis"
-              :title="item.name"
-            >
-              {{ item.name }}
-            </div>
-            <div class="file-remove" @click="remove(item.md5, item)">删除</div>
-          </div>
-        </viewer>
-      </template>
-      <template v-else>
-        <div class="col-auto" style="padding-top: 0px; font-size: 12px">
-          <!-- {{ $z("未发现上传文件", "b2.common.not_found_file") }} -->
-          未发现上传文件
-        </div>
-      </template>
-    </div>
-    <img id="image" src="" style="display: none" />
-    <div
-      id="container"
-      style="height: 100px; width: 109px; display: none"
-    ></div>
-  </div>
-</template>
-
-
-<script>
-import _ from "lodash";
-import { Upload, Button, Dialog } from "element-ui";
-import { urlAppendParam, isMobile } from "../../../utils";
-
-Vue.use(Upload);
-Vue.use(Button);
-Vue.use(Dialog);
-import Vue from "vue";
-import Viewer from "v-viewer";
-import "viewerjs/dist/viewer.css";
-import "font-awesome/css/font-awesome.min.css";
-const piexif = require("piexifjs");
-import { comparessImg, ImageTool } from "./lib/compressImageUtils";
-import { showGPSInfo, getFileType, gethashcode } from "./lib/utils";
-Vue.use(Viewer);
-Viewer.setDefaults({
-  Options: {
-    inline: true,
-    button: true,
-    navbar: true,
-    title: true,
-    toolbar: true,
-    tooltip: true,
-    movable: true,
-    zoomable: true,
-    rotatable: true,
-    scalable: true,
-    transition: true,
-    fullscreen: true,
-    keyboard: true,
-    url: "data-source",
-  },
-});
-var AMap = null;
-export default {
-  props: {
-    type: {
-      type: String,
-      default: 'MulImage'
-    },
-    value: {},
-    fieldConf: {},
-    row: {},
-    extensions: {
-      type: String,
-      default() {
-        return "jpg,.jpeg,.png,.dwg";
-      },
-    },
-  },
-  data() {
-    return {
-      curVal: [],
-      fileList: [],
-      opened: false,
-      officeUrl: "",
-      windowH: 0,
-    };
-  },
-  watch: {
-    value() {
-      this.curVal =
-        this.isSign && _.isString(this.value) && this.value
-          ? [
-              {
-                md5: this.value,
-                name: "",
-                type: "image/png",
-              },
-            ]
-          : this.value;
-    },
-  },
-  computed: {
-    url() {
-      return "/platform/v1/papi/app_file/upload/";
-    },
-    isSign() {
-      return this.type === 'Signature' || this.fieldConf.type == "Signature";
-    },
-    photo() {
-      let list = [];
-      _.each(this.curVal, (item) => {
-        if (this.isImageFile(item)) {
-          let link = this.fileLink(item, 600);
-          list.push(link);
-        }
-      });
-      return list;
-    },
-    photoMd5s() {
-      let list = [];
-      _.each(this.curVal, (item) => {
-        if (this.isImageFile(item)) {
-          list.push(item.md5);
-        }
-      });
-      return list;
-    },
-    maxCountConf() {
-      return _.get(this.fieldConf, "check.max_count");
-    },
-    maxCount() {
-      return this.maxCountConf - this.curVal && this.curVal.length;
-    },
-    disabled() {
-      let val = this.curVal ? this.curVal : [];
-      return val.length >= this.maxCountConf;
-    },
-  },
-  created() {
-    // getAgent.register();
-  },
-  mounted() {
-    this.curVal =
-      this.isSign && _.isString(this.value) && this.value
-        ? [
-            {
-              md5: this.value,
-              name: "签名",
-              type: "image/png",
-            },
-          ]
-        : this.value;
-    this.windowH = (document.body.clientHeight / 100) * 99 - 50;
-
-    //获取定位信息，写入图片
-    this.appendJs(
-      `https://webapi.amap.com/maps?v=1.4.15&key=c2195d5de1c163ebfb118bad93c8bbd3`,
-      () => {
-        var mapObj = new AMap.Map("container", {
-          resizeEnable: true,
-        });
-        mapObj.plugin("AMap.Geolocation", () => {
-          let geolocation = new AMap.Geolocation({
-            enableHighAccuracy: true, //是否使用高精度定位，默认:true
-            timeout: 10000, //超过10秒后停止定位，默认：无穷大
-            maximumAge: 0, //定位结果缓存0毫秒，默认：0
-            convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
-            showButton: true, //显示定位按钮，默认：true
-            buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
-            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
-            showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
-            showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
-            panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
-            zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
-          });
-          mapObj.addControl(geolocation);
-          geolocation.getCurrentPosition();
-          AMap.event.addListener(geolocation, "complete", (result) => {
-            this.position = result.position;
-          }); //返回定位信息
-          AMap.event.addListener(geolocation, "error", (err) => {
-            console.log("定位出错-error", err);
-          }); //返回定位出错信息
-        });
-      }
-    );
-  },
-  methods: {
-    appendJs(url) {
-      let link = document.createElement("script");
-      let attrMap = {
-        type: "text/javascript",
-        async: /^http/.test(url) ? "async" : "",
-        src: url,
-      };
-      for (var key in attrMap) {
-        link[key] = attrMap[key];
-      }
-      document.head.appendChild(link);
-    },
-    inited(viewer) {
-      viewer.options.view = this.view;
-      this.$viewer = viewer;
-    },
-    view(e) {
-      let index = e.detail.index;
-      let list = _.filter(this.curVal, (item) => {
-        return this.isImageFile(item);
-      });
-      let item = _.get(list, index);
-      showGPSInfo(item);
-    },
-    previewImg(item) {
-      let index = _.indexOf(this.photoMd5s, item.md5);
-      this.$viewer.view(index);
-    },
-    isDwg(item) {
-      return _.endsWith(item.name, ".dwg");
-    },
-    getFileTypeClass(item) {
-      let fileSuffix = getFileType(item.type);
-      fileSuffix = fileSuffix ? fileSuffix : getFileType(item.name);
-
-      if (_.endsWith(item.name, ".dwg")) {
-        fileSuffix = "dwg";
-      }
-      let typeMap = {
-        document: "fa-file-word-o",
-        sheet: "fa-file-excel-o",
-        doc: "fa-file-word-o",
-        docx: "fa-file-word-o",
-        xlsx: "fa-file-excel-o",
-        "ms-excel": "fa-file-excel-o",
-        dwg: "fa-file-image-o",
-        png: "fa-file-image-o",
-        jpg: "fa-file-image-o",
-      };
-      return _.get(typeMap, fileSuffix);
-    },
-    handleAdd() {
-      //图片进行压缩和地理信息写入
-      let queue = this.fileList;
-      _.each(queue, (file, index) => {
-        comparessImg(file, (result, hasExif) => {
-          if (result) {
-            ImageTool.getSegments(new Blob([file]), (segments) => {
-              let newFile = this.dataURLtoFile(result, file.name);
-              let exifInfo = ImageTool.getEXIF(segments); //获取exif信息
-              if (!_.isEmpty(exifInfo) && hasExif) {
-                ImageTool.insertEXIF(newFile, exifInfo, (newImage) => {
-                  let bolb = new Blob([newImage], {
-                    type: file.type,
-                  });
-                  bolb.name = file.name;
-                  bolb.lastModifiedDate = new Date();
-                  this.fileList[index] = bolb;
-                });
-              } else {
-                let zeroth = {};
-                let exif = {};
-                let gps = {};
-                zeroth[piexif.ImageIFD.Make] = "lse";
-                //经纬度写入
-                let lat = this.position.lat;
-                let lng = this.position.lng;
-                gps[piexif.GPSIFD.GPSLatitudeRef] = lat < 0 ? "S" : "N";
-                gps[piexif.GPSIFD.GPSLatitude] =
-                  piexif.GPSHelper.degToDmsRational(lat);
-                gps[piexif.GPSIFD.GPSLongitudeRef] = lng < 0 ? "W" : "E";
-                gps[piexif.GPSIFD.GPSLongitude] =
-                  piexif.GPSHelper.degToDmsRational(lng);
-                //方位角写入
-                gps[piexif.GPSIFD.GPSImgDirection] = [123456, 100];
-                let exifObj = { "0th": zeroth, Exif: exif, GPS: gps }; // 定义一个 exifObj 对象
-                let exifStr = piexif.dump(exifObj); // 通过 piexif 将 exifObj 对象转换为字符串
-                let resultBase64 = piexif.insert(exifStr, result);
-                let newFile = this.dataURLtoFile(resultBase64, file.name);
-                this.fileList[index] = newFile;
-              }
-            });
-          }
-        });
-      });
-      // this.$refs.uploader.submit();
-    },
-    dataURLtoFile(dataurl, filename) {
-      //将base64转换为文件
-      let arr = dataurl.split(","),
-        mime = arr[0].match(/:(.*?);/)[1],
-        bstr = atob(arr[1]),
-        n = bstr.length,
-        u8arr = new Uint8Array(n);
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-      return new File([u8arr], filename, { type: mime });
-    },
-    isImageFile(item) {
-      return _.startsWith(item.type, "image");
-    },
-    itemSideImageAttr(item) {
-      let attrs = {};
-      if (this.isImageFile(item)) {
-        attrs.image = this.fileLink(item);
-      } else {
-        attrs.icon = "fa fa-file";
-      }
-      return attrs;
-    },
-    fileLink(item) {
-      //获取预览的文件或图片地址
-      if (!item || !item.md5) return;
-      let isImg = this.isImageFile(item);
-      let args = {
-        file_md5: item.md5,
-      };
-      // let token = zj.utils.pageParam().token;
-      // if (token) {
-      //   args.token = token;
-      // }
-
-      if (isImg) {
-        // args.webp = 1
-        // args.width = 600;
-      } else {
-        args.is_file = 1;
-      }
-
-      return urlAppendParam("/platform/v1/papi/web_file/image_view/", args);
-    },
-    async preview(item) {
-      if (item.type == "dwg/dwg") return;
-      let res = await zj.net.w.noapi({
-        url: `/platform/v1/papi/app_file/download/?file_md5=${item.md5}&webp=0`,
-      });
-      let preview_url = _.get(res, "url_list.0.path.0");
-      let fileSuffix = getFileType(preview_url);
-      if (item.type == "application/pdf") fileSuffix = "pdf";
-      if (item.type == "application/vnd.ms-excel") fileSuffix = "ms-excel";
-      let typeMap = {
-        document: "Word.Document",
-        docx: "Word.Document",
-        doc: "Word.Document",
-        sheet: "Excel.Sheet",
-        pdf: "pdf",
-        xlsx: "Excel.Sheet",
-        "ms-excel": "Excel.Sheet",
-      };
-      let hash = gethashcode();
-      let url = `https://${window.location.host}/zj_of/v1/papi/file/read_only/?md5=${item.md5}&type=${typeMap[fileSuffix]}&sign=${hash}`;
-      let result = await zj.net.w.noapi({
-        url: `/zj_of/v1/papi/file/using_engine/`,
-      });
-      if (result.engine != "wps")
-        url =
-          "https://view.officeapps.live.com/op/embed.aspx?src=" +
-          encodeURIComponent(preview_url);
-      if (fileSuffix == "pdf") {
-        let index = preview_url.lastIndexOf(".com");
-        preview_url = preview_url.substring(index + 4, preview_url.length);
-        preview_url = encodeURIComponent(preview_url);
-        if (isMobile())
-          url = `/public/app3/bpm/view_pdf.html?url=${preview_url}`;
-        else url = `/public/bpm/app/view_pdf.html?url=${preview_url}`;
-      }
-      this.officeUrl = url;
-      this.opened = true;
-    },
-    onFail(err, file) {
-      let message = `${file.name}上传失败`;
-      console.log("err:", message);
-    },
-    onUploaded(response, file) {
-      console.log("file", file);
-
-      let items = _.isArray(this.curVal) ? this.curVal : [];
-
-      items.push({
-        name: file.name,
-        type: _.get(file, "raw.type"),
-        md5: _.get(response, "data.file_md5"),
-      });
-      this.curVal = _.cloneDeep(items);
-      let result = this.isSign ? _.get( this.curVal, "0.md5", "") :  this.curVal;
-      this.$emit("input", result);
-      
-    },
-    remove(md5) {
-      this.curVal = _.filter(this.curVal, (item) => item.md5 != md5);
-      this.$refs.uploader.queue = [];
-      let result = this.isSign ? _.get( this.curVal, "0.md5", "") :  this.curVal;
-      this.$emit("input", result);
-    },
-    onHide() {
-      this.opened = false;
-    },
-    onOpen() {
-      this.opened = true;
-    },
-  },
-};
-</script>
-

package/components/lib/bpmMulImage/src/part/lib/compressImageUtils.js

@@ -1,226 +0,0 @@
-import Exif from 'exif-js'
-// let Orientation
-export function comparessImg(file, callback) {
-    //判断是否为图片文件
-    if (file.type.indexOf('image') == -1) {
-        callback(null)
-    } else {
-
-        let reader = new FileReader();
-        let image = new Image();
-        reader.readAsDataURL(file);
-        reader.onload = function () {
-            file.src = this.result;
-            image.onload = function () {
-                let width = image.width;
-                let height = image.height;
-                file.width = width;
-                file.height = height;
-
-            };
-            image.src = file.src; //页面上显示所选择的图片
-            imgCompress(file, {
-                quality: 0.4
-            }, file, callback)
-
-        }
-
-    }
-}
-
-function imgCompress(path, obj, file, callback) { //path是指上传的图片，obj是压缩的品质，越低越模糊
-    var img = new Image();
-    img.src = path.src;
-    img.onload = function () {
-        var that = this; //这里的this 是把img的对象指向改变为that 
-        // 默认按比例压缩
-        var w = that.width,
-            h = that.height,
-            scale = w / h;
-        w = obj.width || w;
-        h = obj.height || (w / scale);
-        var quality = 0.7; // 默认图片质量为0.7
-        //生成canvas
-        var canvas = document.createElement('canvas');
-        var ctx = canvas.getContext('2d');
-        // 创建属性节点
-        var anw = document.createAttribute("width");
-        anw.nodeValue = w;
-        var anh = document.createAttribute("height");
-        anh.nodeValue = h;
-        canvas.setAttributeNode(anw);
-        canvas.setAttributeNode(anh);
-        try {
-            Exif.getData(file, function () {
-                let GPSLatitude = Exif.getTag(this, 'GPSLatitude')
-                // Orientation = Exif.getTag(this, 'Orientation');
-                // console.log("Orientation", Orientation)
-                // if (Orientation == 6) {
-                //     // canvas.width= that.height;
-                //     // canvas.height= that.width;
-                //     // ctx.rotate(0.5*Math.PI);
-                //     // ctx.drawImage(that, 0, -h, w, h);
-                // } 
-                // else{
-                //     ctx.drawImage(that, 0, 0, w, h);
-                // }
-                ctx.drawImage(that, 0, 0, w, h);
-                
-    
-                // 图像质量
-                if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
-                    quality = obj.quality;
-                }
-                // quality值越小，所绘制出的图像越模糊
-                var base64 = canvas.toDataURL('image/jpeg', quality);
-                // 回调函数返回base64的值
-                // debugger
-                callback(base64, GPSLatitude)
-            })
-        } catch (error) {
-            ctx.drawImage(that, 0, 0, w, h);
-            if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
-                quality = obj.quality;
-            }
-            // quality值越小，所绘制出的图像越模糊
-            var base64 = canvas.toDataURL('image/jpeg', quality);
-            // 回调函数返回base64的值
-            // debugger
-            callback(base64, null)
-        }
-       
-        
-
-
-
-
-
-
-    }
-}
-
-export function convertBase64UrlToBlob(urlData) {
-    var arr = urlData.split(','),
-        mime = arr[0].match(/:(.*?);/)[1],
-        bstr = atob(arr[1]),
-        n = bstr.length,
-        u8arr = new Uint8Array(n);
-    while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-    }
-    return new Blob([u8arr], {
-        type: mime
-    });
-}
-
-
-export var ImageTool = {
-
-    /*
-     * @param resizedImg{ArrayBuffer|Blob}
-     * @param exifArr{Array|Uint8Array}
-     */
-    insertEXIF: function (resizedImg, exifArr, callback) {
-        if (resizedImg instanceof Blob) {
-            var that = this;
-            var fileReader = new FileReader();
-            fileReader.onload = function () {
-                that.insertEXIF(fileReader.result, exifArr, callback);
-            };
-            fileReader.readAsArrayBuffer(resizedImg);
-        } else {
-            var arr = [].slice.call(new Uint8Array(resizedImg), 0);
-            if (arr[2] !== 0xff || arr[3] !== 0xe0) {
-                // throw new Error("Couldn't find APP0 marker from resized image data.");
-                return resizedImg; //不是标准的JPEG文件
-            }
-
-            var app0_length = arr[4] * 256 + arr[5]; //两个字节
-
-            var newImage = [0xff, 0xd8].concat(exifArr, arr.slice(4 + app0_length)); //合并文件 SOI + EXIF + 去除APP0的图像信息
-
-            callback(new Uint8Array(newImage));
-        }
-    },
-    /*
-     * @param segments{Array|Uint8Array}
-     */
-    getEXIF: function (segments) {
-        if (!segments.length) {
-            return [];
-        }
-        var seg = [];
-        for (var x = 0; x < segments.length; x++) {
-            var s = segments[x];
-            //TODO segments
-            if (s[0] === 0xff && s[1] === 0xe1) { // app1 exif 0xff 0xe1
-                seg = seg.concat(s);
-            }
-        }
-        return seg;
-    },
-    getSegments: function (rawImage, callback) {
-        if (rawImage instanceof Blob) {
-            var that = this;
-            var fileReader = new FileReader();
-            fileReader.onload = function () {
-                that.getSegments(fileReader.result,
-                    callback);
-            };
-            fileReader.readAsArrayBuffer(rawImage);
-        } else {
-            if (!rawImage.length && !rawImage.byteLength) {
-                return [];
-            }
-            var head = 0,
-                segments = [];
-            var length, endPoint, seg;
-            var arr = [].slice.call(new Uint8Array(rawImage), 0);
-            let x = 1
-            while (x) {
-                if (arr[head] === 0xff && arr[head + 1] === 0xda) { //Start of Scan 0xff 0xda SOS 
-                    break;
-                }
-                if (arr[head] === 0xff && arr[head +
-                        1] === 0xd8) { //Start of Image 0xff 0xd8 SOI 
-                    head += 2;
-                } else { //找到每个marker 
-                    length = arr[head + 2] * 256 + arr[head + 3]; //每个marker 后 的两个字节为 该marker信息的长度 
-                    endPoint = head + length + 2;
-                    seg = arr.slice(head, endPoint); //截取信息 
-                    head = endPoint;
-                    segments.push(seg); //将每个marker + 信息 push 进去。 
-                }
-                if (head > arr.length) {
-                    break;
-                }
-            }
-            callback(segments);
-        }
-    },
-    /*
-     *@param base64{String}
-     */
-    decode64: function (base64) {
-        var b64 = "data:image/jpeg;base64,";
-        if (base64.slice(0, 23) !== b64) {
-            return [];
-        }
-        var binStr = window.atob(base64.replace(b64, ""));
-        var buf = new Uint8Array(binStr.length);
-        for (var i = 0, len = binStr.length; i < len; i++) {
-            buf[i] = binStr.charCodeAt(i);
-        }
-        return buf;
-    },
-    /*
-     *@param arr{Array}
-     */
-    encode64: function (arr) {
-        var data = "";
-        for (var i = 0, len = arr.length; i < len; i++) {
-            data += String.fromCharCode(arr[i]);
-        }
-        return "data:image/jpeg;base64," + window.btoa(data);
-    }
-};