摘要:基于的圖片壓縮裁剪插件功能說明圖片壓縮,圖片裁剪,圖片壓縮,圖片裁剪,,解決了部分機型方向不對的問題,同時可以對圖片進行尺寸和質量的壓縮效果演示調試模式下或者手機打開本地運行使用本項目的文件需要引入在需要使用的頁面直接引入
vue-image-cropper 基于vue的圖片壓縮裁剪插件 1.功能說明
圖片壓縮,圖片裁剪,vue圖片壓縮,vue圖片裁剪,vue-image-cropper,解決了部分機型方向不對的問題,同時可以對圖片進行尺寸和質量的壓縮
2.效果演示(chrome調試模式下或者手機打開) 3.本地運行git clone https://github.com/Q956164483/vue-image-cropper.git cd vue-image-cropper yarn yarn run dev4.使用
copy本項目的 ./src/components/imageCropper.vue文件 (imageCropper.vue需要引入exif-small.js)
在需要使用的頁面直接引入imageCropper組件并綁定cropperConfig配置參數和裁剪之后的回調函數callback
loadImage (data) { console.log(data) // data為base64字符串 }5.git地址 6.參數說明
cropperConfig: { width: 1, // 裁剪寬度(比例) height: 1, // 裁剪高度(比例) quality: 0.7, // 圖片質量(0~1之間) maxWidth: 750 // 導出的圖片的最大寬度 }目前這個組件已經在我們的多個項目上用到,暫未發現問題,歡迎提問題一起完善,如果幫您解決了問題,請給個star,謝謝啦0.0
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/83756.html
摘要:在裁剪框外拖動鼠標會生成一個新的裁剪框。這個是裁剪框的縱橫比,默認是不限制的。初始化完成后是否自動顯示裁剪框自動顯示的裁剪框的大小。方法的使用格式為手動顯示裁剪框。 插件介紹 這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件,當時想實現用戶資料的頭像上傳功能,并且能夠預覽圖片,和對圖片進行簡單的裁剪、旋轉,花了不少時間才看到了這個插件,感覺功能挺全面,代碼實現起...
摘要:基本需求有一個固定區域,被拆分成個同等大小的碎片,拿走其中一塊,靠近缺口的塊可以向缺口方向移動當拼出原來的圖樣視為完成。左右移動很簡單,序號大的序號小的即可。 先不廢話,請看演示。 showImg(https://segmentfault.com/img/bVyoj2);showImg(https://segmentfault.com/img/bVyoj5); 公司要搞這么個微信活動...
摘要:基本需求有一個固定區域,被拆分成個同等大小的碎片,拿走其中一塊,靠近缺口的塊可以向缺口方向移動當拼出原來的圖樣視為完成。左右移動很簡單,序號大的序號小的即可。 先不廢話,請看演示。 showImg(https://segmentfault.com/img/bVyoj2);showImg(https://segmentfault.com/img/bVyoj5); 公司要搞這么個微信活動...
閱讀 2435·2021-11-23 10:04
閱讀 1510·2021-09-02 15:21
閱讀 901·2019-08-30 15:44
閱讀 1073·2019-08-30 10:48
閱讀 719·2019-08-29 17:21
閱讀 3565·2019-08-29 13:13
閱讀 1991·2019-08-23 17:17
閱讀 1797·2019-08-23 17:04