美文网首页
这款vue图片剪裁开源项目,简直逆天了!

这款vue图片剪裁开源项目,简直逆天了!

作者: 猿天下 | 来源:发表于2021-04-11 17:35 被阅读0次

    大家好,我是你们的于小二。

    前言

    在做web前端开发的时候,你一定遇到过这样的业务场景,上传用户头像的时候,需要将图片进行裁剪等操作,这个时候,我们一般会用到第三方插件。

    技术github学习地址:https://github.com/codeGoogler/JavaCodeHub

    程序员编程书籍:https://github.com/codeGoogler/ProgramBooks

    如果自己造轮子的话,就太慢了,耽误时间不说,搞不好还要留下来加班。

    这里就推荐一个简单易用的vue图片裁剪插件,支持移动图像,裁剪图片,放大缩小图片,上下左右移动,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应你自己的业务需求。

    话不多说,首先附上项目地址:

    Github链接:https://github.com/acccccccb/vue-img-cutter

    是不是莫名的眼熟,是不是在几年前还用着jquery的时候在插件库里面看到过,小编曾经用过基于cropper.js的图片上传和裁剪的库,和这个简直是出自同一人之手,反正就是好用。

    兼容性也是挺好的哟,兼容IE9+,MSEdge,chrome,firefox等主流浏览器,还可以使用此配置工具进行更多个性化设置,不仅能实时预览,还可直接生成代码复制粘贴到你的项目。

    第一步

    1:在自己的项目里面安装上传图片裁剪预览插件vue-img-cutter

    npm install vue-img-cutter --save-dev 
    

    安装完成之后可以看到package.json里面的关于插件vue-img-cutter版本信息

    第二步

    2:新建一个index.vue的组件,将ImgCutter.vue文件引入项目:

    import ImgCutter from 'vue-img-cutter'
    export default {
            components:{
                ImgCutter
            },
    ...
    } 
    

    第三步

    3:在页面中使用:

    <ImgCutter v-on:cutDown="cutDown">
        <button slot="open">选择图片</button>
    </ImgCutter> 
    

    index.vue的参考代码

    <template>
      <div class="tab-container">
        <ImgCutter v-on:cutDown="cutDown">
          <button slot="open">选择图片</button>
        </ImgCutter>
      </div>
    </template>
    <script>
    import ImgCutter from "vue-img-cutter";
    export default {
      components: {
        ImgCutter,
      },
    };
    </script> 
    

    第四步

    4:整体效果是这个样子的

    今天的推荐不知道大家喜欢吗?如果你喜欢,请在文章底部留言和点赞,以表示对我的支持,你们的留言、点赞和转发关注是我持续更新的动力哦!

    作者:源大侠
    链接:https://www.jianshu.com/p/436ef2eaab55
    来源:csdn

    关于如何学习Java,一方面需要不断的去学习,把基础知识学扎实,另一方面也要认识到java的学习不能仅仅靠理论,更多的是靠实操,所以要多练习多做项目,在实践中学习才是最好的学习方法。很多人刚开始不知道怎么去学习,这里我将一些重要的技术文章整理到了github上开源项目上,希望能给大家带来一些帮助,项目是:JavaCodeHub

    另外,还整理了一些针对于程序员的编程书籍项目,都放到了github上面,项目为:ProgramBooks 需要的话可以自取。地址:https://github.com/codeGoogler/ProgramBooks

    如果github访问太慢?我同时也把去放到了码云上面ProgramBooks

    相关文章

      网友评论

          本文标题:这款vue图片剪裁开源项目,简直逆天了!

          本文链接:https://www.haomeiwen.com/subject/jglgkltx.html