1. 程式人生 > >React Native 裁剪圖片,乾貨!

React Native 裁剪圖片,乾貨!

import {ImageEditor} from "react-native";
var resolveAssetSource = require('resolveAssetSource');


console.log('Stamp==>componentDidMount')
// 關鍵系統函式,讀取資源圖片並返回URI、圖片寬高資訊
const source = resolveAssetSource(require('./images/big_get_new_business.png'));
cropImage(source.uri, (successURI) => {
     this.setState({resizeImageUrl: successURI})
})

// Make sure you import ImageEditor from react-native!
async function cropImage(uri, succCallback) {
    // Construct a crop data object.
    const cropData = {
        offset: {x: 0, y: 380 - 200},
        size: {width: 352, height: 200},
        //  displaySize:{width:20, height:20}, THESE 2 ARE OPTIONAL.
        //  resizeMode:'contain',
    }
    // Crop the image.
    try {
        await ImageEditor.cropImage(uri,
            cropData, (successURI) => {
                succCallback(successURI)
            },
            (error) => {
                console.log('cropImage,', error)
            }
        )
    } catch (error) {
        console.log('Error caught in this.cropImage:', error)
    }
}

// End of function.

相關推薦

React Native 裁剪圖片乾貨

import {ImageEditor} from "react-native"; var resolveAssetSource = require('resolveAssetSource'); console.log('Stamp==>componentDidMo

Android調用相機實現拍照並裁剪圖片調用手機中的相冊圖片裁剪圖片

!= findview create 圖片剪裁 顯示 parent 學會 true mfile 在 Android應用中,非常多時候我們須要實現上傳圖片,或者直接調用手機上的拍照功能拍照處理然後直接顯示並上傳功能,以下將講述調用相機拍照處理圖片然後顯示和調用手機相冊中的

react-native服務啟動運行項目到安卓模擬器

時間 輸入 nat bundle cmd 模擬器 項目 等待 模擬 1、在CMD中進入要啟動的項目下,輸入react-native start,等待啟動成功。成功之後再瀏覽器中訪問http://localhost:8081/index.android.bundle?plat

React Native打包時報錯 java.lang.NullPointerException (no error message)

FAILURE: Build failed with an exception. what went wrong? java.lang.NullPointerException (no error message)   This Problem created when the

react-native圖片轉化base64字串

1).匯入’react-native-fs’ import RNFS from 'react-native-fs'; 2).通過react-native-fs包中的readFile()獲取b

React Native-5.React Native元件封裝元件傳值例項開發

接上一篇,我們來練習一下元件的封裝和元件的傳值 九宮格例子: 老樣子,我們又圖,沒圖說個xx 預期效果: 先來看看沒有封裝元件前的程式碼 'use strict'; var React = require('react-nati

iOS 實現react-native預載入優化第一次載入白屏問題

專案中存在多個react-native頁面入口,每個入口使用以下方法初始化: - (instancetype)initWithBundleURL:(NSURL *)bundleURL moduleName:(N

React Native 單選複選, 全選功能

簡單寫了一個ListView資料的單選和全選,刪除功能 利用JS的Map物件進行勾選,取消勾選和全選 方法簡單粗暴 單選功能見註釋的 單選邏輯 , 單選功能不做全選 其餘未註釋的程式碼為複選和全選功能 /** * Created by

cropper.js裁剪圖片上傳圖片

//html <img src="{{ Auth::user()['avater'] }}" id="avater" style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute

使用OpenCV2批量裁剪圖片並將裁剪後的圖片儲存至指定資料夾

       在做影象復原的相關工作中,由於資料集的缺失,我們通常需要將圖片裁剪成比較小的crop。比如在做深度學習影象去噪的相關研究的時候,由於影象去噪不太關注整體的影象內容,所以可以先將大的圖片裁剪成小的crop,以次來增加資料量。       具體程式碼如下:

【巨能坑】react-native的大坑不定期更新

注:寫頁面時,當子元件是<Text>時一定不要固定父元件的寬高。 ----------------------------------------------------------------------------------------------

React Native開源圖片縮放處理元件

尊重版權,轉載請註明出處 專案介紹 該元件進行封裝了Android平臺PhotoView和Universal-image-loader元件,進行實現影象縮放等功能。不過只是適配Android平臺 剛建立的React Native技術交流3群(496508742)歡迎各位大牛,React Nati

Ubuntu16.04 安裝 cudnn5.1和安裝tensorflow框架的完整教程乾貨

首先安利一個ubuntu 16.04來截圖的快捷方式:進入keyboard,之後點選Custom Shortcuts。點選‘+’號,在跳出的視窗中,依次輸入“截圖”和“ gnome-screenshot -a ”,效果圖如下:之後就可以按快捷鍵去截圖了。進入正題:在安裝好cu

react native 計算時間差天-時-分-秒

//計算時間var sendTime = this.props.obj.send_time;console.log(sendTime);//當前時間var nowTime = (new Date()).valueOf();console.log(nowTime);//差值v

React-native之flexDirectionjustifyContent

1、flexDirection 佈局中子檢視排放的方向。有兩個值:水平軸(row),豎直軸(column)。預設是豎直軸。 flexDirection:'row' flexDirection:'column' 'use strict'; import React,{C

React Native圖片輪播

圖片輪播在App開發中經常使用,這裡圖片輪播使用的是第三方元件react-native-swiper, 我們啟動npm命令列,在專案的根目錄使用如下命令安裝模組。 $ npm install react-native-swiper --save $ npm

React Native單選多選

20170906150468611759afb0250585a.gif 1.renderShowEditView裡面的2個圖片自己替換一下 2.複製程式碼直接就可以跑 import React, {PureComponent} from 'react' import {View, Text, StyleS

React Native 載入圖片的正確姿勢和遇到的一些么蛾子

一、載入圖片的正確姿勢 做過原生開發和在使用App時比較注重使用者體驗的都會注意到“List中載入過程中會出現跟業務相關的Loading圖,當圖片載入成功之後會消失;當圖片載入失敗之後會展示預設的error圖”,針對這個問題,自己嘗試著在做RN的時候優化一下這

案例原始碼 ] 【分享】APICloud例項原始碼乾貨

//語音讀text裡面的文字    var text=document.getElementById('ready').value;        alert(text);                var obj = api.require('speechRecognizer');           

Android React Native載入圖片資源的正確姿勢

在這篇文章中Android React Native的使用細節問題提到了 圖片使用的問題,也提到了無論用哪種方法都不能載入app內部的圖片資源的問題,當時的程式碼是這樣子的 <Image source={ require('image!icon') } />