canvas路线图 vue_vue 基于canvas的编辑图片并上传至服务器。只要两碗双皮奶的时间，你上你也行...

来，效果图

1、实现思路

先通过浏览器打开本地图片，再用canvas加载图片，然后通过getImageData把canvas的画布输出，然后用你想裁剪成多大的另一个canvas通过putImageData按照对应的画布位置接收然后将这个canvas用toDataURL输出base64的图片然后在把这个base64转化成图片文件就可以进行上传了。

2、基础实现

文件结构

文件我是放在 components 里面(就是随便一个放组件的位置)

代码实现

上传中

选择图片

选择文件

确定修改

退出修改

请点击左边的选择文件

上面是全部的代码，要贴的话，只管这个就行。下面为部分核心代码段说明

如何加载本地图片就不多说了，首先是如何canvas移动图片，无非就是获取鼠标的坐标位置(clientX)减去最外面的元素(position)的坐标位置减去自身元素位置的偏移(150,为什么是150呢，我样式是这么写的)，然后减去上mousedown事件点下去鼠标的初始化坐标位置(ponitX)这个，这样得出来值就是就是让图片实际偏移的位置了。(ps:如果有更好的拿到这种位置的方法请务必告诉我，谢谢啦)下面是计算位置的代码：

//编辑图片

editImg(){

let e = event ? event : window.event;

let position = this.$refs.myImgTailoring;

if(this.dragFlag){ //是否拖动

this.valueX = e.clientX - position.offsetLeft - 150 - this.ponitX;

this.valueY = e.clientY- position.offsetTop - this.pointY;

this.loadingImg(this.valueX, this.valueY, 550, this.zoom)

}

}

这个是大概的结构图