一个图片对比的小工具【小工具制作】

最新推荐文章于 2024-05-27 18:59:37 发布

前端工程师请求出战

最新推荐文章于 2024-05-27 18:59:37 发布

阅读量838

点赞数 1

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/jinchunye/article/details/122480134

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

逐一击破

确定架构

因为只是一个针对性的小工具，后期也不会扩展，不需要上框架，所以直接引入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();
        // 改变图片的src
        img.src = imgUrl;
        img.onload = function(){
            let imgHeigt = img.height / (img.width/clientWidth);
            let imgWidth = img.width / (img.height / clientHeight);
            upimgHeigt = imgHeigt
            upimgWidth = 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 - 230
        objTop = obj.top + 15

        // 计算生产模式打分文字位置
        particularLeft = obj.left - 165
        particularTop = obj.top
    }
    if (imgAllHeight - 200 < obj.top) {
        objTop = obj.top - 200

        // 计算生产模式打分文字位置
        particularTop = obj.top -100
    }
    // 生成扣分填写窗口，重复使用的
    $('.anchor-popup-content').html(`
        <div class="anchor-popup" style="top:${objTop + 8 + 'px'};left:${objLeft + 20 + 'px'};z-index: -1;">
            <p><span style = "color:#fff">扣分：</span><input type="text" class="fill-in"
                            maxlength="3"
                            placeholder = "扣除的分数"
                            name = "deductMarks"
                            autocomplete="off"
                            value = "${obj.deductMarks ? obj.deductMarks : ''}"
                    >
            </p>
            <p><span style = "color:#fff">评语：</span><input maxlength="30" placeholder="您的评价" autocomplete="off" name = "remark" value = "${obj.remark ? obj.remark : ''}" /></p>
            <div class="buttons">
                <button οnclick="confirmClick(${obj.myDataLength},${particularTop},${particularLeft})">确定</button>
                <button οnclick="cancelClick(${obj.myDataLength})">取消</button>
            </div>
            
        </div>`
    )
}

图片对比工具打分功能

审核进行提交

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

// 使用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
        }
    }
}