基于vue2vue3开发了一款裁切图片组件speedycutimg

1 篇文章 0 订阅
1 篇文章 0 订阅

# 不满市场现状开发了一款极为简单的工具,利用canvas裁切图片

首先奉上展示图

工具介绍

因市面上没有类似组件,所以出一款简单易操作的裁切工具,极为简单的操作即可使用,并且工具栏会跟随图片,裁切完成会返回多种数据类型base64 File FromDate非常方便!!!

使用方法

npm i speedycutimg 如果下载失败请切换官方源

 main.js      import speedycutimg from 'speedycutimg

  
      <vue-cut-img
        :imgsrc="***"
        :show="false"
        :pageX="0"
        :pageY="0"
        :pageW="400"
        :pageH="400"
        :borimgW="400"
        :borimgH="400"
        :borimgX="0"
        :borimgY="0"
        @succeed="succeed"
        @close="close"
      ></vue-cut-img>


//点击完成返回base64 File FromDate  
function succeed(params) {}
//完成时触发和取消触发
function close(params) {}

参数名参数解释
imgsrc图片支持网络地址
show裁切框是否显示true,false需要在传入图片的同时更改为true
pageX画布位置x默认0
pageY画布位置Y默认0
pageW画布宽度默认400
pageH画布高度默认400
borimgW裁切框宽度默认400
borimgH裁切框高度默认400
borimgX裁切框位置X默认0
borimgY裁切框位置Y默认0
succeed完成返回 base64 File FromDate
close关闭可进行操作关闭裁切等操作


可以通过gitee下载进行二次开发使用

speedycutimg: 不满市场现状开发了一款极为简单的工具,利用canvas裁切图片 (gitee.com)

观赏博客并且奉上前端开发技巧供大家参考学习,殊途|个人博客

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一瓶子不满半瓶子晃荡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值