vue中fabric的使用（图片标注、画框画箭头文字涂鸦等...）

_NIXIAKF

已于 2024-04-29 17:49:44 修改

阅读量2.1k

点赞数 3

文章标签： fabric 前端 vue

于 2024-04-29 17:09:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50114203/article/details/138314676

版权

本文介绍了如何使用fabric.js插件实现类似微信截图后的图片标注功能，并详细记录了解决画布大小调整导致的图片空白和屏幕分辨率影响标注精度的问题，包括代码示例和配置参数调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

继上一篇使用tui-image-editor 图片编辑标注图片 这个需求上线后客户觉得用着不顺手还是想找一个类似微信截图后标注图片的功能

网上参考很多方法大致方向是使用fabric这个插件实现我的产品需求找了很多有的要不是图片尺寸不符合规则要不就是拖动效果做的不够流畅就也挺坑的不过皇天不负有心人还是找到一篇坑少并且比较符合需求的一款放在这里给大家参考

https://www.cnblogs.com/xc-dh/p/17218382.html

大概克隆下来 npm i 安装插件再把项目跑起来后这个图片标注的功能差不多可以使用了

下面记录我遇到的一些问题

一、由于画布是固定的大小当图片在呈现在画布上图片大多数是不会铺满画布的因为尺寸不一。所以当对图片进行一系列标注编辑后下载下来的图片是画布的原始尺寸也就是说图片自动会填充空白变成成和画布一样的大小所以需要做的是保存图片时去除图片的空白保留图片的原始尺寸（在上传一步操作里加上代码）

附代码：

function clearblankimg(imgData){
    
        var img = new Image(); //创建图片对象
        img.src = imgData;
        img.onload = function() {
            var c = document.createElement('canvas'); //创建处理画布对象
            var ctx = c.getContext('2d');
            c.width = img.width;
            c.height = img.height;
            ctx.drawImage(img, 0, 0); //绘制
            var imgData = ctx.getImageData(0, 0, c.width, c.height).data; //读取图片数据
            var lOffset = c.width,
                rOffset = 0,
                tOffset = c.height,
                bOffset = 0;
            for (var i = 0; i < c.width; i++) {
                for (var j = 0; j < c.height; j++) {
                    var pos = (i + c.width * j) * 4
                    if (imgData[pos] == 255 || imgData[pos + 1] == 255 || imgData[pos + 2] == 255 || imgData[pos + 3] == 255) {
                        bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
                        rOffset = Math.max(i, rOffset); // 找到有色彩的最右端
                        tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
                        lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
                    }
                }
            }
            lOffset++;
            rOffset++;
            tOffset++;
            bOffset++;
            var x = document.createElement("canvas"); //创建处理后画布对象
            x.width = rOffset - lOffset;
            x.height = bOffset - tOffset;
            var xx = x.getContext("2d");
            xx.drawImage(img, lOffset, tOffset, x.width, x.height, 0, 0, x.width, x.height); //绘制

            console.log(x.toDataURL()); //得到最终裁剪出来的base64

        }

    }

修复前：