Vue-pic-clip-rotate NPM

vue-pic-clip-rotate

效果图

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

配置参数

名称	功能	默认值	可选值
img	默认图片地址	空	url地址	base64	blob
accept	上传图片类型	'image/png, image/jpeg, image/jpg, image/gif'	jpeg	png	gif等
autoClip	是否生成截图框	false	ture	false
autoClipWidth	截图框的宽度	容器宽度80%	0~容器宽度
autoClipHeight	截图框的高度	与宽度相等	0~容器宽度
canMove	图片能否拖动	true	true	fasle
canMoveBox	截图框能否拖动	ture	ture	false
dataUrlType	输出图片数据类型	blob	base64	blob
fixed	截图框是否开启固定宽高比	false	true	false(若设置的宽高比例与宽高比不匹配，则按照宽高比计算高度)
fixedNumber	截图框宽高比	1,1	宽度，高度
fixedBox	固定截图框大小	false	true	false
isOriginalImg	是否上传原图	false	true	false（启用裁剪时无效）
maxWidth	生成图片的最大宽度	600	0~max(启用裁剪或上传原图时最大宽度无效)
maxHeight	生成图片的最大高度	600	0~max(同上)
outputSize	输出图片压缩比	1	0.1-1
outputType	生成图片的格式	jpeg	jpeg	png	webp
theme	样式风格	rect	rect	circle
finish	完成操作事件		回调函数

<template>
  <div class="upload">
    <div class="main">
      <div class="avatar">
        <pic-clip
          :dataUrlType="option.dataUrlType"
          :accept="option.accept"
          :autoClip="option.autoClip"
          :autoClipWidth="option.autoClipWidth"
          :autoClipHeight="option.autoClipHeight"
          :fixed="option.fixed"
          :outputSize="option.outputSize"
          :theme="option.theme"
          @finish="finish"
        >上传头像</pic-clip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      option: {
        accept: 'image/png, image/jpeg, image/jpg, image/gif',
        dataUrlType: 'blob', // 数据类型，可选值： blob base64
        outputSize: 0.7,
        autoClip: true,
        autoClipWidth: 300,
        autoClipHeight: 300,
        canMoveBox: false,
        fixed: false,
        fixedNumber: [1, 1],
        theme: 'rect'
      }
    }
  },
  methods: {
    finish (filename, url) {
      console.log(filename, url)
      // console.log(this.dataURLtoFile(url, filename)) // base64
      // console.log(this.dataBlobtoFile(url, filename))  // blob
    },
    //将base64转换为文件
    dataURLtoFile(dataurl, filename) {
      var 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 });
    },
    dataBlobtoFile(dataurl, filename) {
      let files = new window.File(
        [dataurl],
        filename,
        { type: `image/${filename.split('.')[1]}` }
      );
      return files
    }
  }
}
</script>

<style lang="css">
  i {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  list-style: none;
  font-style: normal;
  font-size: 14px;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

.avatar {
  cursor: pointer;
  width: 160px;
  height: 160px;
}
</style>

vue clip rotate pic

core-js exif-js vue

@infinitebrahmanuniverse/nolb-vue-pi @everything-registry/sub-chunk-3088

1.0.1

3 years ago

1.0.0

3 years ago