react-core-image-upload 一款輕量級圖片上傳裁剪插件

Lavender 發布于2019-08-21 11:31 / 2826人閱讀

摘要：在不久前，我們把發布了。這次我們保持了完整的遷移到了上。支持了定義，支持了的自定義事件，更新了更加詳細的文檔。如果你需要自定義裁剪彈窗的的樣式，你可以自己寫進行覆蓋

在不久前，我們把vue-core-image-upload 發布了2.0 。這次我們保持了完整的api遷移到了react上。支持了header 定義，支持了 file change 的自定義事件，更新了更加詳細的文檔。

react-core-image-upload 項目地址

Demo

快速開始

使用 npm

npm install react-core-image-upload --save

使用 yarn

yarn add react-core-image-upload

使用ES6 進行開發

import React from "react";
import ReactCoreImageUpload  from "react-core-image-upload";
let App = React.createClass({ 
//...

  render() {
    return(
      
        
        
      
    );
  },
  
  handleRes(res) {
    this.setState({
      // handle response
    })
  }
})

運行DEMO

npm  run start

http://localhost:9000/demo/index.html

Demo Online

配置屬性

Props	Type	Example	Description
url	String	"/crop.php"	服務端上傳的地址
text	String	"Upload Image"	你需要顯示按鈕的文本
inputOfFile	String	"file"	上傳服務端對應表單 name
extensions	String	"png,jpg,gif"	限制的圖片類型
crop	Boolean	true	是否需要裁剪
cropRatio	String	"1:1"	限制裁剪的形狀
cropBtn	Object	{ok:"Save","cancel":"Give Up"}	按鈕文本
maxFileSize	Number	10485760(10M)	文件大小限制
maxWidth	Number	150	限制裁剪圖片的最大寬度
maxheight	Number	150	限制裁剪圖片的最大高度
inputAccept	string	"image/*" / "image/jpg,image/jpeg,image/png"	賦予上傳file的接受類型
isXhr	Boolean	true	是否需要調用系統內自己的上傳功能
headers	Object	{auth: xxxxx}	設置xhr上傳的header

image uploading callback

imageUploaded: 當圖片上傳成功后的響應處理

imageChanged: 當選擇圖片后

imageUploading 圖片上傳過程中

errorHandle圖片上傳中的異常處理

Demo

Demo 代碼

發給服務端的裁剪參數

你使用裁剪的話，會向服務端發送上面的參數如上圖。

如果你需要自定義裁剪彈窗的的樣式，你可以自己寫css進行覆蓋

GPU云服務器云服務器上傳圖片插件 php js上傳圖片壓縮插件圖片裁剪圖片裁剪比例

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

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

JQuery 插件圖片裁剪插件cropper.js使用,上傳

摘要：圖片裁剪，壓縮是上傳圖片一定會遇到的問題。如何獲得裁剪的圖片呢獲取裁剪后的圖片信息首先我們可以獲得裁剪框的節點然后調用圖片質量圖片質量越好圖片大小越大這樣就得到了你裁剪的圖片了可以通過，放到你想要的節點里展示。圖片裁剪，壓縮是上傳圖片一定會遇到的問題。這里把我測試cropper.js這款jquery插件的心得分享一下，可以給新手做參考。引入插件相關文件,你們down到本地也可以。這...

SHERlocked93 2019-08-22 13:46 評論0 收藏0
15個提高編程技巧的JavaScript工具

摘要：官方網站是一組龐大的工具，幾乎任何相關文件都可以處理。該工具是獨立的，并配有類可處理服務器端的操作。官方網站是一個獨立的延遲加載的圖像工具。 JavaScript腳本庫是一個預先用JavaScript語言寫好的庫，它方便了我們開發基于JavaScript的應用程序，特別適合AJAX和其他一些以Web為中心的技術。JavaScript主要用于編寫嵌入或者包含在HTML頁面的函數，從而實現...

LiangJ 2019-08-22 10:56 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0