使用fabric.js裁剪和显示图片
示例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <title>使用fabric.js裁剪和显示图片</title><img decoding="async" id="sourceImage" src="YOUR%20URL"> // 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可以实现大图预览局部图的效果。
示例代码
1 2 3 4 | // 图片预览 {showImageViewer = false}" :url-list="imageData" > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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俱乐部！
