Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

1. Vue和Canvas的结合

在前端开发中，Vue作为一款主流的MVVM框架，可以通过数据绑定、组件化等特性轻松地管理页面中的各种元素。而Canvas则是一款HTML5提供的、可以在页面中绘制图形的标签，该标签可以用于实现各种复杂的图形效果。Vue和Canvas的结合可以使我们在实现各种特殊效果时更加便捷。

在使用Vue实现在线头像裁剪和尺寸调整工具时，我们可以选择Vue+Canvas的方式，从而在页面中实现裁剪、缩放、旋转等多种功能。

2. 实现在线头像裁剪和尺寸调整工具的具体步骤

2.1 引入第三方库

首先，我们需要引入一些第三方库来实现在线头像裁剪和尺寸调整工具。其中，使用Vue的时候需要引入Vue和Vue-Router，使用Canvas的时候需要引入fabric.js，一个基于Canvas封装的库。

import Vue from 'vue'

import VueRouter from 'vue-router'
import 'fabric'
Vue.use(VueRouter)

2.2 实现图片上传

接下来，我们需要实现图片上传功能，通过选择本地图片或者从网上获取图片。在Vue中，我们可以通过v-on指令和FileReader对象实现图片上传功能。

<template>

    <div>
        <input type="file" @change="selectFile" />
        <img ref="srcImg" :src="src" />
    </div>
</template>
<script>
export default {
    data(){
        return {
            src: '',
        }
    },
    methods: {
        selectFile(e){
            const file = e.target.files[0]
            const reader = new FileReader()
            reader.onload = (evt) => {
                this.src = evt.target.result
            }
            reader.readAsDataURL(file)
        }
    }
}
</script>

上面的代码实现了一个图片上传的Vue组件，该组件通过选择本地文件，使用FileReader读取该文件内容并展示到页面上。

2.3 实现Canvas绘图

接下来，我们需要在Canvas上绘制出已选择的图片，并使用户可以选择图片区域进行裁剪，并且可以进行缩放、旋转等操作。在Vue中，我们可以通过v-el指令指定一个Canvas元素，然后通过该元素的getContext()方法获取Canvas上下文，在上下文中绘制所需内容。

// 在页面上添加如下代码

<canvas ref="canvas" />
// 在Vue组件的methods中添加如下代码
mounted(){
    this.canvas = new fabric.Canvas(this.$refs.canvas, {
        width: 500,
        height: 500,
        backgroundColor: '#eee'
    })
    this.canvas.on({
        'object:moving': (e) => {
            e.target.setCoords()
        },
        'mouse:up': (e) => {
            setTimeout(() => {
                this.$refs.previewImg.src = this.canvas.toDataURL()
            }, 0)
        }
    })
},
setData(){
    const img = new Image()
    img.src = this.$refs.srcImg.src
    const canvas = this.canvas
    img.onload = function(){
        const imgInstance = new fabric.Image(img, {
            left: 0,
            top: 0,
        })
        canvas.add(imgInstance)
        canvas.centerObject(imgInstance)
        canvas.renderAll()
    }
}

上面的代码实现了Canvas绘制的基本操作，在mounted钩子中会初始化Canvas，并添加移动和鼠标抬起事件。在setData方法中，我们通过new Image()创建了一个新的图片实例，并使用该实例创建了一个新的fabric.Image对象，该对象表示了当前已添加的图片在Canvas中的位置、大小等信息。最后，我们通过canvas.add()将图片实例添加到Canvas中，并通过canvas.centerObject()将其居中显示。

2.4 实现裁剪和保存

最后，我们需要在已选取图片区域上绘制出裁剪框，用户可以通过鼠标拖拽该框进行裁剪操作，并将最终裁剪结果保存到本地。在Vue中，我们可以通过v-show指令控制裁剪框的显示和隐藏，并通过fabric.Rect来绘制裁剪框。

// 在页面上添加如下代码

<div style="display: flex">
    <div>
        <canvas style="border: 1px solid #333" ref="clipContainer" width="300" height="300"></canvas>
    </div>
    <div>
        <img style="max-width: 200px; max-height: 200px" ref="previewImg">
    </div>
</div>
<div>
    <router-link style="margin-right: 20px" to="/">返回首页</router-link>
    <button @click="clipImg">裁剪并保存</button>
</div>
// 在Vue组件的methods中添加如下代码
data(){
    return {
        clipWidth: 100,
        clipHeight: 100,
        clipLeft: 100,
        clipTop: 100,
    }
},
clipImg(){
    const clipRect = new fabric.Rect({
        width: this.clipWidth,
        height: this.clipHeight,
        left: this.clipLeft,
        top: this.clipTop,
        fill: 'rgba(0,0,0,0.6)',
        selectable: false,
    })
    this.canvas.add(clipRect)
    this.canvas.clipTo = (ctx) => {
        clipRect.render(ctx)
    }
    const dataUrl = this.canvas.toDataURL({
        left: this.clipLeft,
        top: this.clipTop,
        width: this.clipWidth,
        height: this.clipHeight,
    })
    const a = document.createElement('a')
    a.href = dataUrl
    a.download = `clipped_${new Date().getTime()}.png`
    a.click()
}

上面的代码实现了裁剪和保存的操作。clipImg()方法中，我们首先添加一个新的fabric.Rect对象，表示裁剪框。然后，通过this.canvas.clipTo()方法设置Canvas的剪切区域，以实现只在裁剪框内绘制图片。最后，通过canvas.toDataURL()将裁剪后的结果保存到本地。

3. 总结

本文介绍了如何使用Vue和Canvas来实现在线头像裁剪和尺寸调整工具。在实现过程中，我们通过引入第三方库和Canvas绘图、裁剪和保存等操作，最终实现了一个可以在线裁剪和调整头像尺寸的工具。Vue和Canvas的结合可以使我们在实现各种特殊效果时更加便捷，希望本文可以对大家有所帮助。