vue-picture-transform v1.0.9

vue-picture-transform

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

安装

npm i -S vue-picture-transform

属性

事件

组件方法

单个组件使用方式：

<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>