Vue使用fabric.js实现局部截图与大图预览功能
更新时间：2024年02月22日 17:01:16 作者：绚丽星空
这篇文章主要为大家详细介绍了Vue如何使用fabric.js实现局部截图与el-image-viewer大图预览功能,文中的示例代码讲解详细,感兴趣的可以了解下
使用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], // 裁剪区域左上角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
});
</script>
</body>
</html>效果图：
大图预览局部图
再结合el-image-viewer可以实现大图预览局部图的效果。
示例代码
// 图片预览
<el-image-viewer
style="z-index:1500"
v-if="showImageViewer"
@close="()=>{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局部截图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
computed又被称作计算属性，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去2022-10-10
正常情况下，我们对于数据都会分页加载，最近项目中确实遇到了不能分页的场景，如果不分页，页面渲染几千条数据就会感知到卡顿，使用虚拟列表就势在必行了。本文主要介绍了如何基于Vue实现封装一个虚拟列表组件，感兴趣的可以了解一下2023-03-03
下面小编就为大家分享一篇vue.js使用代理和使用Nginx来解决跨域的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了Vue.js中Line第三方登录api实现代码，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
在Web应用中,用户需要通过认证和授权才能访问受保护的资源,为了实现认证和授权功能,通常需要使用Token来标识用户身份并验证其权限,本文给大家介绍了vue2实现无感刷新token的方式,需要的朋友可以参考下2024-02-02
vue.config.js配置proxy代理产生404错误的原因及解决
这篇文章主要介绍了vue.config.js配置proxy代理产生404错误的原因及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了ant-design-vue按需加载的坑的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了在Uni中使用Vue的EventBus总线机制操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论