逐一击破

确定架构

因为只是一个针对性的小工具，后期也不会扩展，不需要上框架，所以直接引入JQ库进行代码开发，为方便本地局域网使用，配置webpack作为启动项。

目录结构如下：

图片对比工具目录结构

图片上传

新建upload.js文件，通过构造函数把上传相关方法统一封装在原型上。

自适应生成对比界面

在点击图片对比的时候，界面生成是根据第一张上传的设计稿的比例来确定的，这样就不会出现页面适配问题，部分代码：

// 上传图片
let dragImgUploadOne = new DragImgUpload("#drop_area_one", {callback: function (files, imgUrl) {// 屏幕高度let clientHeight = document.documentElement.clientHeight;// 屏幕宽度let clientWidth = document.documentElement.clientWidth;// 回调函数，可以传递给后台let file = files[0];let size = file.size / 1000 + 'kb';$('.img-name-one span').text(file.name);$('.img-size-one span').text(size);$('.bacnimg2').attr("src", imgUrl);// 创建对象var img = new Image();// 改变图片的srcimg.src = imgUrl;img.onload = function(){let imgHeigt = img.height / (img.width/clientWidth);let imgWidth = img.width / (img.height / clientHeight);upimgHeigt = imgHeigtupimgWidth = imgWidth// 如果计算出来的高度大于屏幕高度if(upimgHeigt > clientHeight){$('.banner-bg2,.bacnimg').css('width',upimgWidth + 'px')$('.banner-bg2,.bacnimg,.bacnimg2').css('height','100vh')// 分割边框$('.banner-bg2').css('border-right', '1px solid #000')// 适配线的位置let dragLine = upimgWidth / 2 - 42;$('.drag-line').css({'left': dragLine })}else{// 分割边框$('.banner-bg2').css('border-bottom', '1px solid #000')// 动态修改imgHeigt$('.banner-bg2,.bacnimg,.bacnimg2,.drag-line').css('height',upimgHeigt + 'px')}};}
})
let dragImgUploadTwo = new DragImgUpload("#drop_area_two", {callback: function (files, imgUrl) {//回调函数，可以传递给后台等等let file = files[0];let size = file.size / 1000 + 'kb'$('.img-name-two span').text(file.name)$('.img-size-two span').text(size)$('.bacnimg').attr("src", imgUrl);}
})

图片对比工具自适应生成对比界面

切换对比模式

对比支持横向对比和竖向对比，当然斜角对比也可以支持，但是没必要，部分代码：

// 图片对比拖拽逻辑
let $drag = $('#drag-line')
$drag.mousedown(function (e) {//鼠标按下，计算当前元素距离可视区的距离let disY = e.clientY - $drag[0].offsetTop;let disX = e.clientX - $drag[0].offsetLeft;// 判断对比方式if(comparison){document.onmousemove = function (e) {// 极限位置let imgHeight = $('.banner-bg2').height() - 50;// 通过事件委托，计算移动的距离let distanceTop = e.clientY - disY;if(distanceTop < imgHeight) $drag.css({'top': distanceTop + 'px'});};}else{document.onmousemove = function (e) {// 极限位置let imgWidth = $('.banner-bg2').width() - 50;// 通过事件委托，计算移动的距离let distanceLeft = e.clientX - disX;if(distanceLeft < imgWidth) $drag.css({'left': distanceLeft + 'px'});};}document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};//return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效return false;
});

打分功能

用户点击成品图的某个位置，就会自动生成节点标签，在input标签中输入扣分项和说明，以便开发同学后期更改，部分代码：

// 扣分填写弹窗模板
function anchorPopup(obj = {}) {let imgAllWidth = $('.banner-bg2').width();let imgAllHeight = $('.banner-bg2').height();let objLeft = obj.left;let objTop = obj.top;let particularLeft = obj.left;let particularTop = obj.top;if (imgAllWidth - 220 < obj.left) {objLeft = obj.left - 230objTop = obj.top + 15// 计算生产模式打分文字位置particularLeft = obj.left - 165particularTop = obj.top}if (imgAllHeight - 200 < obj.top) {objTop = obj.top - 200// 计算生产模式打分文字位置particularTop = obj.top -100}// 生成扣分填写窗口，重复使用的$('.anchor-popup-content').html(`objTop + 8 + 'px'};left:${objLeft + 20 + 'px'};z-index: -1;">扣分：obj.deductMarks ? obj.deductMarks : ''}">
评语：obj.remark ? obj.remark : ''}" />
`)
}

图片对比工具打分功能

审核进行提交

完成上述一系列操作了，我们就可以把结果推送到可视化平台了，部分代码：

// 使用html2canvas进行截图保存
html2canvas($('.banner-bg2'), {allowTaint: true,taintTest: false,onrendered: function (canvas) {var dataUrl = canvas.toDataURL();$("#img_pre").attr("src", dataUrl);}
});// 前端
function submitUp(){// 扣分说明let scoreList = "";collectArray.forEach((value, index) => {scoreList +=`扣分项${index + 1} (扣${value.deductMarks}分) : ${value.remark}。\n`});var file=confirmData($('#img_pre').attr('src'));var data=new FormData();let authorStr = $('.img-name-two span').text();let author = authorStr.substring(0,authorStr.length - 4)data.append("author",author);data.append("reviewScreenshot",file);data.append("finalScore",$('.score-num').text() + '分');data.append("approvedMemo",scoreList);data.append("filename","t.png");$.ajax({url:'http://www.xxxx.com/api/imgGrade',type: 'post',data: data,contentType: false,// 告诉jQuery不要去设置Content-Type请求头processData: false,success: function (data) {if (data.code == 200) {$('.popup-post-content').hide()$('.popup-good').show()} else {alert("服务器返回错误！")}}})
}// node
async function imgGrade(dataList,imgUrl) {let queryData = {"appKey":"xxx","sign":"xxxx","worksheetId":"xxxx","controls":[// 作者名字{"controlId": "author","value": dataList.author ? dataList.author : ''},// 审核截图{"controlId": "reviewScreenshot",// "value": 'https://www.xxxx.com/guide/image/homePage/banner/imagination-bg.jpg'"value": imgUrl ? imgUrl : ''},// 最终得分{"controlId": "finalScore","value": dataList.finalScore ? dataList.finalScore : ''},// 审核记录{"controlId": "approvedMemo","value": dataList.approvedMemo ? dataList.approvedMemo : ''}]}let options = {method: 'POST',uri: 'https://api.xxxx.com/v2/open/xxx/xxx',body: queryData,json: true};try {var data = await RequestAsync('post', options.uri, { json: options.body });var result = JSON.parse(data.getBody('utf8'));if (result.success) {return {code: 200}} else{return {code: 500,msg: result.error_msg}}    } catch (err) {console.log(err);return {code: 500,msg: error.message}}
}