vue-picture-transform

本组件为VUE移动端，图片自由变换组件，暂时仅支持移动端。

安装

npm i -S vue-picture-transform

属性

属性	类型	默认值	说明
size	Number	100	操作框大小默认100*100
zIndex	Number	1	操作框zIndex
maxScale	Number	3	最大放大倍率
minScale	Number	0.2	最小缩放倍率
disabled	Number	false	禁用操作框
imgUrl	String		初始化图片地址（可不传，之后调用init方法来传）
id	String		初始化ID（可不传，之后调用init方法来传）

事件

事件	说明	参数	参数说明
close	点击叉号关闭事件	id	初始化传进来的initId
selected	选中事件	id	初始化传进来的initId

组件方法

组件方法	说明	返回值
init(imgUrl,id)	设置一张图片和ID	空
getTransformInfo()	获取变变形后的图片信息	{center:{x,y},width,height,scale,rotate,id,imgUrl,img}

单个组件使用方式：

<template>
  <div id="app">
    <VuePictureTransform ref="transform"></VuePictureTransform>
    <button @click="getInfo">getInfo</button>
  </div>
</template>
<script>
import VuePictureTransform from 'vue-picture-transform'
import imgUrl from './assets/logo.png'
export default {
  name: 'app',
  components: {
    VuePictureTransform,
  },
  mounted(){
    this.$refs.transform.init({
      imgUrl: imgUrl
    })
  },
  methods: {
    getInfo(){
      console.log(this.$refs.transform.getTransformInfo())
    }
  }
}
</script>

多个组件使用，并拼接到canvas上

<template>
      <div ref='avatar' :style="{backgroundImage: 'url('+avatar+')'}">
        <PicTrancform
          ref="decorateList"
          v-for="item in useDecorateList"
          :key="item.id"
          :disabled="!(item.id === active)"
          :imgUrl="item.img"
          :id="item.id"
          :zIndex="item.zIndex"
          @close="close(item.id)"
          @selected="selected(item.id)"
        />
      </div>
</template>
<script>
import PicTrancform from 'vue-picture-transform'
 
export default {
  components: {
    PicTrancform
  },
  data(){
    return {
      useDecorateList: [],// 图片列表
      active:0, //当前操作图片
      avatar: '',// 背景图片地址
      avatarImg: null,// 背景图片imgData
      canvas: null,//画布
      ctx: null,// 上下文
      canvasInfo:{ 
        width: 240,// 画布宽度
        height: 240,// 画布高度
        scale: 2 // 生成图片放大比例
      },
    }
  },
  mounted(){
    this.canvas = this.$refs.canvas // 设置一个canvas元素。
    this.ctx = this.canvas.getContext('2d')
  },
  methods: {
    ...
    getDecorateList(){
      let list = []
      let components = this.$refs.decorateList
      if(Array.isArray(components)) {
        list = components.map(item => {
          return item.getTransformInfo()
        })
      }
      return list
    },
    mergeImg(){
      let canvas = this.canvas
      let ctx = this.ctx
      let {width,height,scale} = this.canvasInfo
      ctx.clearRect(0,0,width*scale,height*scale)
      let avatarImg = this.avatarImg
      ctx.drawImage(avatarImg,0,0,width*scale,height*scale)
      let decorateList = this.getDecorateList()
      decorateList.forEach(decorate => {
        ctx.save() // 保存当前状态
        ctx.translate(decorate.center.x*scale,decorate.center.y*scale)
        ctx.rotate(decorate.rotate*Math.PI/180)
        ctx.scale(decorate.scale,decorate.scale)
        ctx.drawImage(decorate.img,-1* ~~(decorate.width*scale/2),-1* ~~(decorate.height*scale/2),decorate.width*scale,decorate.height*scale)
        ctx.restore()
      })
      // 使用toDataUrl可以获取拼接图片
    }
}
</script>