hcui-package 1.9.43 → 1.9.45

package/dist/commonjs/Upload.js

@@ -0,0 +1,384 @@
+/**
+ * 将文件对象转换为 Base64 编码的字符串
+ *
+ * @param {File} file - 要转换的文件对象
+ * @return {Promise} 当转换完成时，resolve 包含文件内容作为 Base64 编码字符串，否则 reject 包含错误对象
+ */
+export function fileToBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve(reader.result)
+      reader.onerror = error => reject(error)
+      reader.readAsDataURL(file)
+    })
+  }
+  
+  /**
+   * 将 dataURL 转换为文件对象
+   *
+   * @param {string} dataurl - 要转换的 dataURL 字符串
+   * @param {string} filename - 文件的名称
+   * @return {File} 一个 File 对象，包含了从 dataURL 解码后的数据
+   */
+  export function dataURLtoFile(dataurl, filename) {
+    var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]
+    var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n)
+    }
+    var blob = new Blob([u8arr], { type: mime })
+    return new File([blob], filename, { type: mime })
+  }
+  
+  /**
+   * 异步压缩文件。
+   * @param {File} file - 需要压缩的文件对象。
+   * @param {number} size - 压缩后文件大小的上限，单位为KB。
+   * @returns {Promise<File>} 返回一个Promise，解析为压缩后的文件对象，如果文件不需要压缩或传入的文件为空，则解析为null。
+   */
+  export const compressFile = async(file, size) => {
+    return new Promise((resolve, reject) => {
+      if (!file) resolve(null)
+      if ((file.size / 1024) <= size) resolve(file)
+  
+      const img = new Image()
+      img.src = URL.createObjectURL(file)
+      img.onload = function() {
+        let quality = 0.8
+        let dataURL
+        const canvas = document.createElement('canvas')
+        canvas.width = this.naturalWidth
+        canvas.height = this.naturalHeight
+        const ctx = canvas.getContext('2d')
+        // 将图片画到canvas上
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+        // 尝试不同的质量参数，直到达到目标大小
+        do {
+          dataURL = canvas.toDataURL('image/jpeg', quality)
+          const sizeInBytes = atob(dataURL.split(',')[1]).length
+          const sizeInKB = sizeInBytes / 1024
+          if (sizeInKB > size) {
+            quality -= 0.1
+          } else {
+            break
+          }
+        } while (quality > 0)
+  
+        const newFile = dataURLtoFile(dataURL, file.name)
+        // 清除内存
+        URL.revokeObjectURL(img.src)
+        resolve(newFile)
+      }
+    })
+  }
+  const parseHTML = (html) => {
+    const template = document.createElement('template')
+    template.innerHTML = html
+    return template.content
+  }
+  
+  const isMobile = () => {
+    return ('ontouchstart' in document.documentElement)
+  }
+  
+  const defaultParams = {
+    // limit: 3,
+    addWidth: 120,
+    addHeight: 120,
+    maxSize: 5,
+    fileList: [],
+    needSlice: false, // 是否需要图片裁剪
+    ratio: 16 / 9, // 宽高比例
+    times: 5, // 放大倍数
+    compressSize: null, // 压缩图片大小
+    defaultWidth: 375, // 默认宽度
+    overRight: 0,
+    overBottom: 0,
+    themErrorColor: 'var(--color-danger)'
+  }
+  
+  class webUpload extends HTMLElement {
+    constructor() {
+      super() // 调用父类的构造函数
+  
+      const _this = this
+      this.inputDom = document.createElement('input')
+      this.inputDom.type = 'file'
+      this.inputDom.multiple = false // 默认不可多选
+      Object.assign(this, defaultParams) // 合并默认参数
+      this.inputDom.onchange = function() { return _this.onChange(this.files) }
+      this.attachShadow({ mode: 'open' })
+    }
+  
+    static get observedAttributes() {
+      return ['params']
+    }
+  
+    // 处理配置
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (oldValue !== newValue) {
+        const obj = JSON.parse(newValue)
+        Object.assign(this, obj)
+        if (obj.accept) this.inputDom.accept = obj.accept
+        // eslint-disable-next-line no-prototype-builtins
+        if (obj.hasOwnProperty('multiple')) this.inputDom.multiple = obj.multiple
+      }
+      // 插入初始模板
+      this.shadowRoot.innerHTML = `
+          <style>
+          * {margin:0;padding:0;box-sizing: border-box;}
+          .add { display: inline-block; position:relative; width: ${this.addWidth}px; height: ${this.addHeight}px; border: 1px dashed #ccc; border-radius: 5px; background-color: #eee; color: #333; margin-bottom: 20px;}
+          .one { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height:2px; background-color: #ccc;}
+          .two { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height:30px; background-color: #ccc;}   
+          .error-words { color: ${this.themErrorColor}; position: absolute; bottom: 6px; font-size: 12px; }
+          .hideContent { width:0px;height:0px;overflow: hidden;position: relative;}
+          #canvas { position: absolute;transform: scale(1);background-color: #fff;left: -100000px; }
+          #copyImg { display: block; max-width:100%; max-heigh:100%; object-fit:cover; }
+          .modal-wraper {display: flex;justify-content: center;align-items: center;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0,0,0,.2);z-index:99999;overflow: auto;}
+          .layout { max-width: 90%; max-height: 80%; overflow: auto; } .container { position: relative; }
+          .aim-tool { position: absolute; border: 2px dashed #1890ff;cursor: all-scroll;background:rgba(0,0,0,0.2) }
+          .entry { text-align: right;position: fixed;width:100%;bottom: 10px;right:10px; } 
+          .width-input { border: none;line-height: 32px;padding: 0 10px;font-size: 12px;border-radius: 4px;outline-style: none; }
+          .width-input:focus-visible { outline: none; }
+          .btn { padding: 8px;border-radius: 4px;background: #1890ff;color: #fff;cursor: pointer;margin-left: 5px; font-size:12px;}
+          </style>
+          <div class="hideContent">
+          <canvas id="canvas">你的浏览器不支持 canvas，请升级你的浏览器</canvas>
+          </div>  
+          `
+    }
+  
+    triggerUpload() {
+      this.inputDom.click()
+    }
+  
+    async onChange(files) {
+      this.removeError()
+      // 校验图片上传数量
+      // const remainNum = this.limit - this.fileList.length - files.length
+      // if (remainNum < 0) return this.showError('超出文件上传数量')
+      // 校验图片上传大小
+      let sizeLimit = false
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        if (file.size / 1024 / 1024 > this.maxSize) {
+          sizeLimit = true
+          break
+        }
+      }
+      if (sizeLimit) return this.showError(`上传图片大小不能超过 ${this.maxSize}MB!`)
+  
+      // 压缩图片
+      if (this.compressSize) {
+        const res = await compressFile(files[0], this.compressSize)
+        if (res) files = [res]
+      }
+  
+      // 是否裁剪图片
+      if (this.needSlice) {
+        this.initSliceArea(files)
+        return
+      }
+  
+      this.fileList = files // 更新fileList
+      // 并抛出去  相当于vue.emit('change', congif) 由外面的逻辑进行上传
+      this.emitChange()
+    }
+  
+    initSliceArea(files) {
+      const _this = this
+      if (!files.length) return
+      const file = files[0]
+      const fr = new FileReader()
+      fr.readAsDataURL(file)
+      fr.onload = function(e) {
+        _this.shadowRoot.appendChild(parseHTML(`
+            <div class="modal-wraper">
+              <div class="layout">
+                <div class="container">
+                  <div draggable="false" class="aim-tool" style="width:${_this.defaultWidth}px;height:${_this.defaultWidth / _this.ratio}px;top: 5px;left:5px;"></div>
+                  <img draggable="false" id="copyImg" src="${this.result}" crossorigin="anonymous" title="">
+                </div> 
+              </div>  
+              <div class="entry">
+                <input class="width-input" placeholder="设置自定义截取宽度" />
+                <span class="btn cancel-slice">取消并上传</span>
+                <span class="btn save-slice">截取并上传</span>
+              </div>            
+            </div>`))
+        const sliceContent = _this.shadowRoot.querySelector('.modal-wraper')
+  
+        _this.shadowRoot.querySelector('#copyImg').onload = function(e) {
+          // 并且将图片画到隐藏的canvas上
+          _this.drawImgToCanvas()
+        }
+  
+        // 绑定拖拽事件
+        if (isMobile()) {
+          _this.shadowRoot.querySelector('.aim-tool').addEventListener('touchstart', function(e) {
+            e.preventDefault()
+            _this.touchX = e.changedTouches[0].pageX - this.offsetLeft
+            _this.touchY = e.changedTouches[0].pageY - this.offsetTop
+            /** 被点击元素本身的宽和高 */
+            const domWidth = this.offsetWidth
+            const domHeight = this.offsetHeight
+            /** 被点击元素的边界值 */
+            _this.overRight = _this.shadowRoot.querySelector('#copyImg').offsetWidth - domWidth
+            _this.overBottom = _this.shadowRoot.querySelector('#copyImg').offsetHeight - domHeight
+  
+            document.addEventListener('touchmove', function(e) {
+              let left = e.changedTouches[0].pageX - _this.touchX
+              let top = e.changedTouches[0].pageY - _this.touchY
+              if (left < 0) {
+                left = 0
+              } else if (left > _this.overRight) {
+                left = _this.overRight
+              }
+              if (top < 0) {
+                top = 0
+              } else if (top > _this.overBottom) {
+                top = _this.overBottom
+              }
+              _this.shadowRoot.querySelector('.aim-tool').style.left = left + 'px'
+              _this.shadowRoot.querySelector('.aim-tool').style.top = top + 'px'
+            }, false)
+          }, false)
+        } else {
+          _this.shadowRoot.querySelector('.aim-tool').addEventListener('mousedown', function(e) {
+            /** 被点击元素本身的宽和高 */
+            const domWidth = this.offsetWidth
+            const domHeight = this.offsetHeight
+            /** 被点击元素的边界值 */
+            _this.overRight = _this.shadowRoot.querySelector('#copyImg').offsetWidth - domWidth
+            _this.overBottom = _this.shadowRoot.querySelector('#copyImg').offsetHeight - domHeight
+            document.addEventListener('mousemove', _this.handlerMove, false)
+          }, false)
+          document.addEventListener('mouseup', function() {
+            document.removeEventListener('mousemove', _this.handlerMove, false)
+          }, false)
+        }
+  
+        // 改变截图框区域
+        _this.shadowRoot.querySelector('.width-input').addEventListener('keyup', function(e) {
+          const changeWidth = parseInt(e.target.value)
+          if (changeWidth) {
+            _this.shadowRoot.querySelector('.aim-tool').style.width = changeWidth + 'px'
+            _this.shadowRoot.querySelector('.aim-tool').style.height = changeWidth / _this.ratio + 'px'
+          }
+        })
+        // 取消并上传
+        _this.shadowRoot.querySelector('.cancel-slice').addEventListener('click', function(e) {
+          _this.fileList = files
+          _this.emitChange()
+          sliceContent.remove()
+        })
+        // 截取并上传
+        _this.shadowRoot.querySelector('.save-slice').addEventListener('click', function(e) {
+          _this.startSlice(sliceContent, file)
+        })
+      }
+    }
+  
+    handlerTouchmove(e) {
+      const _this = this
+      const toolDom = _this.shadowRoot.querySelector('.aim-tool')
+      let left = e.changedTouches[0].pageX - toolDom.touchX
+      let top = e.changedTouches[0].pageY - toolDom.touchY
+      if (left < 0) {
+        left = 0
+      } else if (left > toolDom.overRight) {
+        left = toolDom.overRight
+      }
+      if (top < 0) {
+        top = 0
+      } else if (top > toolDom.overBottom) {
+        top = toolDom.overBottom
+      }
+      toolDom.style.left = left + 'px'
+      toolDom.style.top = top + 'px'
+    }
+  
+    handlerMove(e) {
+      const _this = e.target // 获取到当前组件的对象 此时的this指向的是document
+      const toolDom = _this.shadowRoot.querySelector('.aim-tool')
+      const currentLeft = parseInt(toolDom.style.left)
+      const currentTop = parseInt(toolDom.style.top)
+      const thenLeft = currentLeft + e.movementX
+      const thenTop = currentTop + e.movementY
+      if (thenLeft < 0 || thenLeft > _this.overRight) return
+      if (thenTop < 0 || thenTop > _this.overBottom) return
+      toolDom.style.left = thenLeft + 'px'
+      toolDom.style.top = thenTop + 'px'
+    }
+  
+    drawImgToCanvas() {
+      const img = this.shadowRoot.querySelector('#copyImg')
+      img.crossOrigin = 'anonymous'
+      const canvas = this.shadowRoot.querySelector('#canvas')
+      canvas.width = img.width * this.times
+      canvas.height = img.height * this.times
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(
+        img, 0, 0, img.width * this.times, img.height * this.times
+      )
+    }
+  
+    startSlice(sliceContent, file) {
+      // 最后的截图框坐标
+      const lastPosition = this.shadowRoot.querySelector('.aim-tool').getBoundingClientRect()
+      const imgPosition = this.shadowRoot.querySelector('#copyImg').getBoundingClientRect()
+      // 计算相对于于图片的 X Y
+      const _x = lastPosition.x - imgPosition.x
+      const _y = lastPosition.y - imgPosition.y
+  
+      const initCanvas = this.shadowRoot.querySelector('#canvas')
+      const canvas = document.createElement('canvas')
+      canvas.width = lastPosition.width
+      canvas.height = lastPosition.height
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(
+        initCanvas, _x * this.times, _y * this.times, canvas.width * this.times, canvas.height * this.times, 0, 0, canvas.width, canvas.height
+      )
+      const url = canvas.toDataURL('image/png', 2.0)
+      this.fileList = [{ url, name: file.name, type: 'slice' }]
+      sliceContent.remove()
+      this.emitChange()
+    }
+  
+    emitChange() {
+      this.dispatchEvent(new CustomEvent('change', {
+        bubbles: false, // 是否允许事件冒泡
+        composed: true, // 允许事件穿越 shadow dom
+        detail: this.fileList // 传递的数据
+      }))
+      this.clear()
+    }
+  
+    showError(msg) {
+      this.shadowRoot.appendChild(parseHTML(`<div class="error-words">${msg}</div>`))
+    }
+  
+    removeError() {
+      const errorDom = this.shadowRoot.querySelector('.error-words')
+      if (errorDom) errorDom.remove()
+    }
+  
+    clear() {
+      this.fileList = []
+      this.removeError()
+    }
+  
+    // 组件初始化
+    connectedCallback() {
+      if (this.children.length) {
+        this.shadowRoot.appendChild(this.children[0])
+      } else {
+        this.shadowRoot.appendChild(parseHTML('<span class="add"><i class="one"></i><i class="two"></i></span>'))
+      }
+      this.shadowRoot.querySelector('.add').addEventListener('click', () => { this.inputDom.click() })
+    }
+  }
+  
+  export default webUpload
+  
+  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hcui-package",
-  "version": "1.9.43",
+  "version": "1.9.45",
   "main": "./dist/hcui-package.umd.js",
   "module": "./dist/hcui-package.es.js",
   "style": "./dist/hcui-package.css",