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

这篇具有很好参考价值的文章主要介绍了【Vue】fabricjs 实现局部截图及el-image-viewer大图预览。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<!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>

效果图:

【Vue】fabricjs 实现局部截图及el-image-viewer大图预览,vue.js,list,前端,fabric,elementui,el-image

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

【Vue】fabricjs 实现局部截图及el-image-viewer大图预览,vue.js,list,前端,fabric,elementui,el-image文章来源地址https://www.toymoban.com/news/detail-835104.html

// 图片预览 
      <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】fabricjs 实现局部截图及el-image-viewer大图预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+element-plus+el-image实现点击按钮预览大图

    需求:点击某个按钮实现el-image中预览大图的效果 官方文档:以下是官方的写法,并不能达到我们的要求,官方实现的功能是点击图片达到预览大图的效果。如果你的按钮就是图片,也可以达到目前的功能 el-image-viewer组件是element官方的组件,只是文档中没有写出来,这个组

    2024年02月12日
    浏览(55)
  • 【vue+el-table+el-backtop】表格结合返回顶部使用,loading局部加载

    效果图: 一. 表格结合返回顶部 二. 局部loading 解决方法: target绑定滚动dom的父元素类名就可以了. 1.如果你的表格是 固定表头 的,那滚动dom的父元素类名就是 el-table__body-wrapper 如图: 2.如果你的表格不是固定表头,表头跟随内容一起滚动的,那滚动dom的父元素类名就是 el-table 如图

    2024年02月13日
    浏览(46)
  • el-tree 懒加载数据,增删改时局部刷新实现

    1.数据过多时进行懒加载孩子节点,根据层级传参获取后端孩子数据 懒加载主要部分: 1参数:         :load=\\\"loadNode\\\"          lazy         :props=\\\"defaultProps\\\" 2.defaultProps  需要设置isLeaf: \\\'isLeaf\\\',去除最后一层孩子节点的展开图表       defaultProps: {           childre

    2024年02月14日
    浏览(45)
  • 前端html2canvas和dom-to-image实现截图功能

    目录 需求 历劫过程 截图知识点 html2canvas 文档地址 封装 使用教程  dom-to-image-more 文档地址 封装 使用教程 解决跨域问题 以下是我花了大把时间,薅秃头得出来的最终结果, dom-to-image-more截图时间快到可以让复杂的页面仅需2-3S就能完成截图,内容有点多,请保持耐心慢慢看

    2024年02月15日
    浏览(59)
  • QML Book 学习基础5(An Image Viewer)

    目录 桌面版(win端) 移动端 下面我们用更有挑战性例子来使用Qt控件,将创建一个简单的图像查看器。 程序主要由四个主要区域组成,如下所示。菜单栏、工具栏和状态栏,通常由控件的实例填充,而内容区域是窗口子项所在的位置。   原书作者(应该创建Qt Quick项目,但是

    2024年02月10日
    浏览(41)
  • vue使用element-ui的el-image的src问题

    起初: 今天在学习vue的时候,遇到了一个问题,vue学的马马虎虎,语法也不扎实。遇到的问题在这里记录下来。 问题: 是使用el-image的src链接问题。 文件结构是这样的:  按照以往学习html的思想,在使用el-image标签的时候src我写成了src=\\\"../image/Anonymous.png\\\"。乍一看没什么问题

    2024年02月13日
    浏览(45)
  • 记录--Vue3 + Fabricjs 定制国庆专属头像

    生在国旗下,长在春风里!国庆将至,采黎为大家带来 定制头像2.0(国庆头像) ,让我们用代码的形式为祖国庆生!欢迎大家 点赞收藏加关注哦 想看效果或者想定制春节头像的小伙伴请直奔 效果 区域; 想一睹 定制头像2.0 小工具的原理及实现思路请耐心阅读,本文代码片

    2024年02月08日
    浏览(39)
  • 解决Edge浏览器,微博无法查看大图(Edge Image Viewer)

    使用Edge浏览器浏览微博或其它带校验的图片时,会导致无法查看。 主要原因为 Edge 自带了一个 Edge Image Viewer , 但是该图片查看器无法查看带校验数据的图片,所以导致查看时一片空白。 解决方法 地址栏输入 edge://flags/ 搜索 Edge Image Viewer 选择 Disabled 关闭 Edge Image Viewer 重启浏

    2024年02月21日
    浏览(59)
  • el-image实现在el-table-column中展示多张图片,且能够大图循环预览

    效果:能在表格中展示且点击需要查看的即可放大查看,多组图片放大时可左右切换    核心代码: 注意: workPhoto是图片地址的数组 通过v-for来遍历每个列表的图片地址数组,结合:src=\\\"item\\\"把每个图片展示在表格里,展示图片的大小样式用style来设定 通过:perview-src-list=\\\"getI

    2024年02月05日
    浏览(53)
  • vue项目实现局部全屏

    1、给想全屏的元素设定ref属性 2、引入screenfull插件(需要提前安装npm install --save-dev screenfull@5.1.0) 3、全屏方法 4、完整代码 5、效果图    

    2024年02月10日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包