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之flexDirection,justifyContent
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') } />