# image-editor

**Repository Path**: nanfuyun/image-editor

## Basic Information

- **Project Name**: image-editor
- **Description**: 图片编辑
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-06
- **Last Updated**: 2022-10-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图片编辑器

## 实现逻辑

先将各种标签写好，然后循环遍历组件属性列表formDataList，根据其中的type来显示对应的标签，根据其中的键值来绑定form

## 使用的组件

1. 生成uuid：uuid 
2. 缩放拖拽：vue-draggable-resizable-gorkys
3. 生成二维码：vue-qr
4. 日期格式化：moment.js
5. 图片预览：vue-preview-img
6. 代码高亮：vue-highlightjs
7. 一键复制：vue-clipboard2

## 遇到的问题

1. 子组件向父组件用$emit传值时，父组件`@dialogCancel="dialogCancel"`接收时不能加()，因为不是类似`@click="click()"`这样的方法

2. `@click="popupDialog($event,'create')" `使用`$event`来占位，同时调用方法可以保留e

3. dialog隐藏后不会触发`monted()`刷新数据，可以用`v-if`控制dialog的显示，`v-if`会销毁组件，因此每次打开dialog都是重新创建，触发`monted()`

4. 可点击的div里的小按钮要用`@click.stop=click()`停止冒泡

5. 给标签设置`ref='ref'`，然后`this.$refs.ref`可以获得`document.getElementById`的效果，后面也能进行dom操作,如`this.$refs.ref.children`获得子组件列表、`this.$refs.ref.focus()`聚焦组件

6. 组件拖拽的`div`的层级结构：

   (1)  外层`div`

   (2)  画布`div`:使用用户上传的图片做`background-image`的`div`,为了作为拖拽组件的父级，需要设置`position: relative;`

   (3) ` v-for`循环组件的`div`:在这一层添加键盘事件

   (4)  使用拖拽缩放组件的层级:使用组件`vue-draggable-resizable-gorkys:<vdr>`，在这里设置`tabindex="0" `

   (5)  根据循环列表的`type`显示对应的组件

7. 想要让`div`能被聚焦选中和用tab键选中，需要给`div`设置`tabindex='0'`

8. 拖拽层和组件层的定位和宽高要相等，循环层可以不设置位置宽高

9. 给父div设置`transform: scale(1);`，可以让子`div`使用`position:fix;`时基于父组件来定位。而不是根据浏览器的可视区域定位

10. `:style`可以用计算属性来时时改变,如果要传参，如`:style= "imageStyle(item)"`，需要在计算属性返回一个方法，用这个方法接收参数

    ```javascript
    textStyle() {
        return function(item) {
            return {
                width: item.positionAndSize.w + 'px',
            }
        }
    },
    ```

11. 边框圆角需要`style="borderRadius:50%;"`

12. **给组件设置`:key=index`后，如果`index`改变，会重新渲染组件**

13. div缩放可以使用`transform: scale(1)`或`zoom:1`

    `transform`不会改变`div`所占区域大小，只改变内容大小，`zoom`会改变`div`所占区域的大小，`zoom`不能在火狐浏览器用

14. 封装`el-dialog`: https://blog.csdn.net/web_wp/article/details/124967512

15. **vueX的使用**

    (1)  在`store`文件夹的`index.vue`中：`state`定义数据，`mutations`定义方法

    ```javascript
    export default new Vuex.Store({
      state: {
    	  counter:'',
    	  scale:0.5,
    	  scaleNew:0.5,
    	  baseURL: 'http://poster.ixz.huaihai.tv/',
      },
      mutations: {
    	  changeScale(state,scale){
    		  state.scale = scale
    	  }
      },
    ```

    (2)  在`.vue`文件的`<script>`中`import {mapMutations,mapState} from 'vuex' `引入vuex的数据和方法

    (3)  在`computed:{}`中`...mapState(['scale', 'baseURL'])`,把vuex的数据解析

    (4)  在`methods:{}`中`...mapMutations(["changeScale"])`,把vuex的方法解析

    (5)  然后就可以通过`this.scale`来调用vuex中的数据,用`this.changeScale(value)`调用vuex的方法更新数据

16. **每次初始化数据列表`formDataList[]`时，都要同时初始化索引`currentIndex`，删除列表的数据时也要更新索引**

17. 可拖拽组件在画布边缘增加宽高时，如果不进行操作，则组件的下/右会溢出画布，此时更新组件的位置，让组件不溢出画布：

    新的组件h/w+定位的y/x如果大于画布的h/w，则让定位的y/x等于画布的h/w-新的组件h/w

    ```javascript
    if (newW + X > backgroundW) {
    	X = backgroundW - newW
    }
    ```

18. 如果网络请求获得的是一张图片文件而不是一般的字符串，在发送请求时要设置`responseType:’blob’`或`’ arraybuffer’`,不然无法解析

    ```javascript
    this.$http({
    		method: 'post',
    		url: `www.request.api/preview`,
    		headers: {
    		},
    		data: this.posterJSON,
    		responseType: 'blob'
    	})
    	.then((res) => {
            // 解析blob，type要和网络响应的一致
    	    const blob = new Blob([res.data], {
    		    type: 'image/jpeg',
    	    });
            // 将blob转换成url
    	    const url = window.URL.createObjectURL(blob);
    	    this.preview = url
    	    this.$previewImg({
    		    src: this.preview
    	    });
    	}).catch((err) => {
    		console.log(err);
    	})
    ```

19. 通过`src`设置图片，相当于请求图片链接，所以之后的操作要等请求返回后再进行

    ```javascript
    // 新建一个图片
    var img = new Image()
    // 给图片设置图片地址
    img.src = 'www.image.com'
    // 此处相当于去请求图片地址获得图片，所以要用.onload(),在请求完成后进行读取图片信息的操作
    img.onload = () => {
        this.backgroundData.w = img.width
        this.backgroundData.h = img.height
        this.key++
    }
    ```

20. `Object.assigon(obj1,obj2)`可以把`obj2`的值全部放到`obj1`中，如果`obj1`有和`obj2`相同的key就覆盖其value

    ```javascript
    let obj1={one:1, two:2, three:3}
    let obj2={one:3, three:1}
    let obj3={one:5, two:5, three:5, four:5, five:5}
    Object.assign(obj1,obj2)
    console.log(obj1); //obj1={one:3,two:2,three:1}
    Object.assign(obj1,obj3)
    console.log(obj1);//obj1={one:5,two:5,three:5,four:5,five:5}
    ```

    

21. 如果想把`obj2`和`obj1`相同的`key`的`value`放到`obj1`中并覆盖,不相同的`key`不操作，需要使用`Object.keys().forEach()`

    ```javascript
    let obj1={one:1, two:2, three:3}
    let obj2={one:3, three:1}
    let obj3={one:5, two:5, three:5, four:5, five:5}
    Object.keys(obj2).forEach((key) => {
        if (obj1[key]!=null){
            obj1[key] = obj2[key];
        } 
    });
    console.log(obj1);//obj1={one:3,two:2,three:1}
    Object.keys(obj3).forEach((key) => {
        if (obj1[key]!=null){
            obj1[key] = obj3[key];
        } 
    });
    console.log(obj1);//obj1={one:5,two:5,three:5} 
    ```

22. `this.$refs.container.focus()`来聚焦到设置了`tabindex='0'`的组件