• 【Vue】fabricjs 实现局部截图及el-image-viewer大图预览

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>使用fabric.js裁剪和显示图片title>
    6. <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js">script>
    7.  
    8. head>
    9. <body>
    10.     <canvas id="canvas" >canvas>
    11.     <img id="sourceImage" src="YOUR URL" style="display: none;">
    12.  
    13.     <script>
    14.         // var canvas = new fabric.Canvas('canvas');
    15.         var canvas = new fabric.StaticCanvas("canvas");
    16.         var sourceImage = document.getElementById('sourceImage');
    17.         //截图位置
    18.         const cropXywh = [821,3799,97,90]
    19.         fabric.Image.fromURL(sourceImage.src, function(img) {
    20.             canvas.add(img);
    21.             var text = new fabric.Text('这里是文本描述', {
    22.                 left: 0,
    23.                 top: 0,
    24.                 fontSize: 16,
    25.                 fill: 'red'
    26.             });
    27.             var textWidth = text.width; // 获取文本的宽度
    28.             var textHeight = text.height; // 获取文本的高度
    29.             img.set({
    30.                 left: 0,
    31.                 top: textHeight,
    32.                 width: cropXywh[2],
    33.                 height: cropXywh[3],
    34.                 cropX: cropXywh[0], // 裁剪区域左上角x坐标
    35.                 cropY: cropXywh[1], // 裁剪区域左上角y坐标
    36.                 cropWidth: cropXywh[2], // 裁剪区域宽度
    37.                 cropHeight: cropXywh[3] // 裁剪区域高度
    38.             });
    39.             
    40.            
    41.             let widths = [cropXywh[2],textWidth];
    42.             let maxWidth = Math.max(...widths);
    43.             let maxHeight = cropXywh[3]+textHeight;
    44.             canvas.setWidth(maxWidth);
    45.             canvas.setHeight(maxHeight);
    46.             canvas.add(text);
    47.             canvas.renderAll(); // 更新Canvas
    48.             //若使用elementui可以显示局部图放大效果
    49.             //let imgData = canvas.toDataURL({ format: "png", quality: 0.8 });
    50.             // imageData.value = [imgData]
    51.             // showImageViewer.value = true
    52.         });
    53.     script>
    54. body>
    55. html>

    效果图：

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

    1. // 图片预览 
    2.       <el-image-viewer
    3.         style="z-index:1500"
    4.         v-if="showImageViewer"
    5.         @close="()=>{showImageViewer = false}"
    6.         :url-list="imageData"
    7.       >
    1. onMounted(() => {
    2.       // 通过遮罩层关闭图片预览
    3.     document.addEventListener('click',function(e){
    4.         if(e.target.className=="el-image-viewer__mask"){
    5.             let close = document.querySelector(".el-image-viewer__close");
    6.             if(close){
    7.               close.click();
    8.               showImageViewer.value = false
    9.             }else{
    10.              close = document.querySelector(".el-icon-circle-close"); 
    11.               if(close){
    12.                 close.click();
    13.                 showImageViewer.value = false
    14.               }
    15.             }
    16.         }
    17.     });
    18.  });

  • 相关阅读:
    LeetCode 362 期周赛
    python安装与运行
    一本通1047；判断能否被3,5,7整除
    python新疆自驾旅游推荐系统毕业设计源码111042
    【CHI】Ordering保序
    (五)C++中的排序函数性能比较
    Avalonia 跨平台框架中如何以正确的姿势使用 OpenGL ES 渲染。
    Skip Index 学习
    Target EDI 850 采购订单报文详解
    MindSpore——详解推荐模型的原理与实践
  • 原文地址：https://blog.csdn.net/xubuhang/article/details/136190061