IT俱乐部 JavaScript Vue使用fabric.js实现局部截图与大图预览功能

Vue使用fabric.js实现局部截图与大图预览功能

使用fabric.js裁剪和显示图片

示例代码



使用fabric.js裁剪和显示图片
        // var canvas = new fabric.Canvas('canvas');
        var canvas = new fabric.StaticCanvas("canvas");
        var sourceImage = document.getElementById('sourceImage');
        //截图位置
        const cropXywh = [821,3799,97,90]
        fabric.Image.fromURL(sourceImage.src, function(img) {
            canvas.add(img);
            var text = new fabric.Text('这里是文本描述', {
                left: 0,
                top: 0,
                fontSize: 16,
                fill: 'red'
            });
            var textWidth = text.width; // 获取文本的宽度
            var textHeight = text.height; // 获取文本的高度
            img.set({
                left: 0,
                top: textHeight,
                width: cropXywh[2],
                height: cropXywh[3],
                cropX: cropXywh[0], // 裁剪区域左上角x坐标
                cropY: cropXywh[1], // 裁剪区域左上角y坐标
                cropWidth: cropXywh[2], // 裁剪区域宽度
                cropHeight: cropXywh[3] // 裁剪区域高度
            });
            
           
            let widths = [cropXywh[2],textWidth];
            let maxWidth = Math.max(...widths);
            let maxHeight = cropXywh[3]+textHeight;
            canvas.setWidth(maxWidth);
            canvas.setHeight(maxHeight);
            canvas.add(text);
            canvas.renderAll(); // 更新Canvas
            //若使用elementui可以显示局部图放大效果
            //let imgData = canvas.toDataURL({ format: "png", quality: 0.8 });
            // imageData.value = [imgData]
            // showImageViewer.value = true
        });
    

效果图:

大图预览局部图

再结合el-image-viewer可以实现大图预览局部图的效果。

示例代码

// 图片预览 
      {showImageViewer = false}"
        :url-list="imageData"
      >
onMounted(() => {
      // 通过遮罩层关闭图片预览
    document.addEventListener('click',function(e){
        if(e.target.className=="el-image-viewer__mask"){
            let close = document.querySelector(".el-image-viewer__close");
            if(close){
              close.click();
              showImageViewer.value = false
            }else{
             close = document.querySelector(".el-icon-circle-close"); 
              if(close){
                close.click();
                showImageViewer.value = false
              }
            }
        }
    });
 });

到此这篇关于Vue使用fabric.js实现局部截图与大图预览功能的文章就介绍到这了,更多相关Vue fabric局部截图内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/9424.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部