VUE

簡單易用的vue圖片裁剪插件

VUE HTML我幫您 26天前  次瀏覽

簡單易用的vue圖片裁剪插件,支持移動圖像,裁剪圖片,放大縮小圖片,上下左右移動,固定比例,固定尺寸,遠程圖片裁剪,只需要很少的代碼就可以實現裁剪功能,也可以通過調整參數以適應你自己的業務需求。

  • 兼容IE9+,MSEdge,Chrome,Firefox
  • 兩種展現形式,行內或彈窗
  • 可旋轉、縮放圖片
  • 任意比例、大小裁剪
  • 固定比例、大小裁剪
  • 支持遠程圖片裁剪、跨域設置
    安裝

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

    將ImgCutter.vue文件引入項目:

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

    在頁面中使用:

<ImgCutter v-on:cutDown="cutDown"></ImgCutter>

    可使用solt

<ImgCutter v-on:cutDown="cutDown">
    <button slot="open">選擇圖片</button>
</ImgCutter>

    遠程、跨域裁剪(兼容IE9)

    需要自己寫一個方法來觸發裁剪工具彈出 在方法中先將圖片上傳至服務器,拿到返回的url后創建一個obj,然后將對象傳入裁剪工具

// 傳入的obj必須包含這四個屬性
let obj = {
    name:'1.jpg',//遠程圖片名稱
    src:'http://url/1.jpg',//遠程圖片url
    width:200,//遠程圖片的原始寬度
    height:200,//遠程圖片的原始高度
}

forIe9:function(){
	// 此處需要先提交待裁剪的圖片到服務器上,然后拿到圖片name,src,width,height,這些參數必須傳
	uploadMethod(file).then((res)=>{
		this.$refs.imgCutterModal.handleOpen({
            name:res.name,
            src:res.src,
            width:res.width,
            height:res.height,
        });
	});
}

參數說明:


屬性名 作用 類型 必填 默認值
isModal 是否為彈窗模式 Boolean true
showChooseBtn 是否顯示選擇圖片按鈕 Boolean true
lockScroll 是否在Dialog出現時將body滾動鎖定 Boolean true
label 默認打開裁剪工具按鈕的顯示文字 String 選擇圖片
boxWidth 裁剪工具寬度 Number 800
boxHeight 裁剪工具高度 Number 400
cutWidth 默認裁剪寬度 Number 200
cutHeight 默認裁剪高度 Number 200
tool 是否顯示工具欄 Boolean true
sizeChange 是否能夠調整裁剪框大小 Boolean true
moveAble 能否調整裁剪區域位置 Boolean true
crossOrigin 是否設置跨域,需要服務器做相應更改 Boolean false
crossOriginHeader 設置跨域信息crossOrigin為true時才生效 String ''
rate 圖片比例 String(例: "4:3") -
cutDown 完成截圖后要執行的方法 Function -
error 錯誤回調 Function -

支持slot,在組件內部使用帶有slot="open"屬性的元素即可自定義打開組件的按鈕

返回值:


屬性名 類型
fileName 文件名
file file類型的文件對象(IE部分版本可能不會返回)
blob blob類型的文件對象(IE部分版本可能不會返回)
dataURL dataURL

相關鏈接

發表評論

经典黑杰克游戏 安徽快3开奖结果查询 网信彩经网登录网址 山东群英会每日预测 滚球比赛比分 重庆彩票网 试玩极速十一选五 app赚钱的软件 时时彩最快开奖 台湾写真麻将手机游戏 时时彩稳赚20%每天 帮公众号推小说怎么赚钱 竞彩胜平负计算器 赚钱棋牌游戏可提现金 江西快3走势图基本图 重庆时时彩存在作弊么 重庆时时开彩结果官网