基于 Vue的圖片裁剪插件

dance 發布于2019-08-21 11:41 / 3429人閱讀

摘要：預覽項目地址一些想法網上看了看基于的圖片裁剪的插件很少，剛剛好項目需要使用到圖片裁剪，于是便有了這個插件的誕生。

vue-crpopper

預覽
項目地址

一些想法

網上看了看基于vue的圖片裁剪的插件很少，剛剛好項目需要使用到圖片裁剪，于是便有了這個插件的
誕生。

實現的原理

通過canvas生成新的圖片，可以上傳到后臺保存。

效果圖

安裝 npm install vue-cropper 使用 import VueCropper from vue-cropper

名稱	功能	默認值	可選值
img	裁剪圖片的地址	空	url 地址 \|\| base64 \|\| blob
outputSize	裁剪生成圖片的質量	1	0.1 - 1
outputType	裁剪生成圖片的格式	jpg (jpg 需要傳入jpeg)	jpeg \|\| png \|\| web

內置方法通過this.$refs.cropper 調用

this.$refs.cropper.startCrop() 開始截圖

this.$refs.cropper.stopCrop() 停止截圖

this.$refs.cropper.clearCrop() 清除截圖

this.$refs.cropper.getCropData() 獲取截圖信息

GPU云服務器云服務器 vue插件圖片裁剪圖片裁剪比例圖片裁剪價格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86997.html

立志做一個最好用的移動端圖片裁剪插件

摘要：基于的圖片壓縮裁剪插件功能說明圖片壓縮，圖片裁剪，圖片壓縮，圖片裁剪，，解決了部分機型方向不對的問題，同時可以對圖片進行尺寸和質量的壓縮效果演示調試模式下或者手機打開本地運行使用本項目的文件需要引入在需要使用的頁面直接引入 vue-image-cropper 基于vue的圖片壓縮裁剪插件 1.功能說明圖片壓縮，圖片裁剪，vue圖片壓縮，vue圖片裁剪，vue-image-croppe...

android_c 2019-08-20 17:39 評論0 收藏0
react-core-image-upload 一款輕量級圖片上傳裁剪插件

摘要：在不久前，我們把發布了。這次我們保持了完整的遷移到了上。支持了定義，支持了的自定義事件，更新了更加詳細的文檔。如果你需要自定義裁剪彈窗的的樣式，你可以自己寫進行覆蓋 showImg(https://segmentfault.com/img/bVKj4B?w=1600&h=900); 在不久前，我們把vue-core-image-upload 發布了2.0 。這次我們保持了完整的api遷...

Lavender 2019-08-21 11:31 評論0 收藏0
【收藏】2019年最新Vue相關精品開源項目庫匯總

摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內容早已過期或是很多近期優秀組件未被收錄，所以小肆今天重新更新了內容并新建項目。提交的項目格式如下項目名稱子標題相關介紹如果收錄的項目有錯誤，可以通過反饋給小肆。前言本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內容早已過期或是很多近期優...

williamwen1986 2019-08-23 14:50 評論0 收藏0