快捷導(dǎo)航

Vue使用fabric.js實現(xiàn)局部截圖與大圖預(yù)覽功能

更新時間：2024年02月22日 17:01:16 作者：絢麗星空

這篇文章主要為大家詳細(xì)介紹了Vue如何使用fabric.js實現(xiàn)局部截圖與el-image-viewer大圖預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的可以了解下

使用fabric.js裁剪和顯示圖片

示例代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用fabric.js裁剪和顯示圖片</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
 
</head>
<body>
    <canvas id="canvas" ></canvas>
    <img id="sourceImage" src="YOUR URL" style="display: none;">
 
    <script>
        // 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], // 裁剪區(qū)域左上角x坐標(biāo)
                cropY: cropXywh[1], // 裁剪區(qū)域左上角y坐標(biāo)
                cropWidth: cropXywh[2], // 裁剪區(qū)域?qū)挾?
                cropHeight: cropXywh[3] // 裁剪區(qū)域高度
            });
            
           
            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
        });
    </script>
</body>
</html>

效果圖：

大圖預(yù)覽局部圖

再結(jié)合el-image-viewer可以實現(xiàn)大圖預(yù)覽局部圖的效果。

示例代碼

// 圖片預(yù)覽 
      <el-image-viewer
        style="z-index:1500"
        v-if="showImageViewer"
        @close="()=>{showImageViewer = false}"
        :url-list="imageData"
      >

onMounted(() => {
      // 通過遮罩層關(guān)閉圖片預(yù)覽
    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
              }
            }
        }
    });
 });

到此這篇關(guān)于Vue使用fabric.js實現(xiàn)局部截圖與大圖預(yù)覽功能的文章就介紹到這了,更多相關(guān)Vue fabric局部截圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: