cutout改版记录

cutout网站原先是用vue多页面开发的，现在技术部决定用nuxt重构网站，然后在这里把我的每日进度记录一下。之前已经开发了一段时间，但之前的进度没有记录，所以从2021-9-28开始记录

2021-9-28：

1、下载大图扣费接口调用

2、看了rollup的中文文档，https://www.rollupjs.com/，rollup现阶段主要用来构建javascript库，@vue/composition-api 用 rollup 来打包

9-29：

1、写擦除和修复的弹框

9-30：

1、擦除和修复的弹框独立成一个组件

10-8:

1、新版cutout 和旧版cutout在图片编辑页面用了一样的处理，在原图上面出现红色遮罩，使用了两个canvas，一个canvas叠加到另一个canvas上，在和removal.ai里的编辑功能对比后，发现两个canvas在擦除和还原功能上没有问题，但在放大缩小和拖动上有问题，决定仿照removal.ai采用一个canvas来显示红色遮罩功能，新建了一个页面来重新业务逻辑

10-11:

1、擦除手势用canvas生成，还原内容通过 drawImage 来生成，而不是原来的 fillStyle 方式

10-12：

1、考虑到操作完成后的图片需要下载下来后的分辨率问题，把代码逻辑改成所有操作都在原始大小的canvas上处理，完成后缩放到页面上展示的canvas大小

2、改成在原始大小的canvas上处理，擦除页面基本完成

10-13：

1、擦除弹框页面基本完成

2、反馈弹框完成

3、知否项目里的拖动编辑框问题修改

10-14：

1、知否和皮卡网站修改

10-15：

1、通用抠图移动端完成

2、擦除弹框移动端

10-16：

1、接口返回的错误提示显示

2、通用抠图页面里的拖动图片上传和复制图片地址上传

10-18：

1、头像抠图     照片清晰    黑白上色页面完成

10-19：

1、图像修复页面和弹框开发

10-20：

1、图像修复页面和弹框开发

10-21：

1、证件照页面和弹框开发

10-22：

1、证件照页面和弹框开发

10-25：

1、证件照页面和弹框开发

10-26：

1、证件照页面和弹框开发

10-27：

1、视频抠图页面pc端

10-28：

1、视频抠图页面pc端

10-29：

1、各种bug修改

10-30：

1、各种bug修改

11-1：

1、各种bug修改

11-2：

1、各种bug修改

11-3：

1、各种bug修改

11-4：

1、各种bug修改

11-5：

1、各种bug修改

 

项目难点：

一、

项目第一个难点是在通用抠图弹框界面，在一开始根本搞不清 擦除功能、缩放功能、移动功能 怎么联动，大概花了一周时间，前后经过几个版本，搞清楚了这3者的关系，设计了一个全新的做法，界面上展示的canvas是截取了原始尺寸canvas的一部分然后等比例缩放，那就只需要确定几个变量就行了，一个是canvas的内容，一个是截取canvas的x和y坐标，一个是截取canvas的宽度和高度，确定这些变量就开始思考在界面上不同的操作会影响到哪些变量，

1、擦除功能会修改canvas的内容

2、缩放功能会影响到要截取canvas的x y坐标，宽度，高度

3、移动功能会影响到要截取canvas的x y坐标

确定这些变量后就完成了整个弹框里的各个操作功能