What is the correct method to crop an image captured using the camera to match what the user can view within an overlay that exposes a portion of the screen.
I am using an overlay with showcamera to capture my image.
The transparent overlay has a label across the top, and a view about halfway down the screen (top:315) - so the camera is exposed between the label and view. (see below)
<View class="overlay">
<!-- this view is transparent -->
<View id="View_title_area">
<!-- view height 50 / white background -->
<Label id="Label_title" class="page_title" text="Take Photo"/>
</View>
<!-- Camera is displayed here -->
<!-- Camera is displayed here -->
<!-- Camera is displayed here -->
<!-- Camera is displayed here -->
<View id="View_control_area">
<!-- view top=315 -->
<Label id="Label_instruction" text="{image_aspect_instruction}" />
<Button id="Button_capture" class="button_white" onClick="Button_capture_onClick" title=" Take Photo " />
</View>
</View>
Then I am cropping the image using showCamera, success: function() like this...
var device_width = Ti.Platform.displayCaps.platformWidth;
var camera_height = Math.round((camera_width/4)*3);
var newblob = e.media.imageAsCropped({x: 0, y:51, width : device_width, height : 215 });
$.imagetest.image = newblob;
I realize the basic issue is the camera is capturing an image # 2448w x 3264h and I am using dpi layout dimensions to crop the image. How should this be done?
[INFO] : Ti.Platform.displayCaps.density: xhigh
[INFO] : Ti.Platform.displayCaps.dpi: 480
[INFO] : Ti.Platform.displayCaps.platformHeight: 736
[INFO] : Ti.Platform.displayCaps.platformWidth: 414
[INFO] : Ti.Platform.displayCaps.logicalDensityFactor: 3
Related
I am trying to display images in my Next js project with Material UI here:
<Box display="flex" alignItems="center">
<Image
src={'/images/Profile.svg'}
alt={'Thumbnail-alt'}
width={300}
height={160}
style={{ background: '#252525e6', borderRadius: '6px' }}
/>
</Box>
But all it is showing is the alt tag of the image, not displaying the actual image.
I am using Material UI 5 and Nextjs 12 for this project. Thanks
To load static images, first import the file. E.g
import ProfileSvg from "/images/Profile.svg"
Then in your image.
<Image
src={ProfileSvg}
alt={"Thumbnail-alt"}
width={300}
height={160}
style={{ background: "#252525e6", borderRadius: "6px" }}
/>
I tried with customCallout from react-native-maps library but it is not working on iOS simulator.
in my issue what I was implementing the react-native-map library and i want to display the image in my custom-callout view (custom callout is annotation view in map library which show popup after clicking the marker) but if i put the image tag in that view image is not displaying.
<Callout alphaHitTest tooltip>
<CustomCallout>
<View style={{ flexDirection: "row" }}>
<Icon name="map-marker" size={30} />
<Text style={{ width: "50%" }}>
{this.state.currentAddress} //coordinates
</Text>
<Text>
<Image
source={require("./../assets/images/profile.png")}
/>
</Text>
</View>
</CustomCallout>
</Callout>
I have an image which I want to display in top half of my screen. I'm using flux like this.
<View style={{flex:0.5}}>
<Image
style={{width:null, height:null, flex:1, resizeMode:'stretch'}}
source={require('../../../Images/salad-congo.png')}>
</Image>
</View>
<View style={{flex:0.5, backgroundColor:'yellow'}}>
<Text>Hello</Text>
</View>
Problem:
The problem is my image does not fit for all screen sizes. If I'm opening my app in landscape mode the image is centered instead of covering whole width and height of upper half. In case I use 'resizeMode='stretch'' my whole image is destroyed in pixels, and becomes un viewable. How can I make my image appear big for large screens, and small for small screens obviously covering the whole screen. Is there something I need to do with my image's resolutions? Or provide multiple images? If yes then how to handle them for both android and IOS
Import Dimensions From react native and then use it to set the size of your image
import {Dimensions} from 'react-native'
const SCREEN_WIDTH = Dimensions.get("window").width;
const logo = require("logo.png");
in the return of render:
<Image source={logo} style={styles.logo} />
const styles = StyleSheet.create({
logo: {
height: SCREEN_WIDTH * 0.65,
width: SCREEN_WIDTH * 0.65,
marginLeft: SCREEN_WIDTH * 0.2
}})
So I solved the issue by creating a single large image of 2056x2056, and then by using Flex properly to obtain the desired result. Tested the result on a couple of phones and tablets. Working Fine.
<View style={{flex:1}}>
<View style={{flex:0.6, alignItems:'stretch'}}>
<Image style={{flex:1, width: null, height: null }}
source={require('../../../Images/salad-congo2056x2056.png')}/>
</View>
<View style={{flex:0.1, backgroundColor:'#ffffff'}}>
// Intentional gap
</View>
<View style={{flex:0.3, backgroundColor:'red'}}>
// Anything here
</View>
</View>
I want an image to appear across the width of the screen, and be scaled so it retains its proportions.
I currently have this
<ScrollView style={styles.background}>
<Text>Some Header Text</Text>
<Image
style={{width: null}}
resizeMode="contain"
source={require("./assets/images/map.png")}
/>
</ScrollView>
which half works. The image is scaled correctly in width. but it is retaining its height, so there is a large border above and below the image.(ie the layout is still using the images height unscaled)
If I add a height: null or replace the width with a height then no image is displayed.
How do I do this (I expect) trivial thing?
(same behavior on ios and android.)
So I have had to calculate things myself.
This scales the image as I want, and the image is re-scaled when the phone is rotated.
I am not sure if componentWillMount is the right event to choose to calculate the width/height ratio. I would be happy for any other code review comments!
import React, {Component} from "react";
import {
StyleSheet,
Text,
View,
ScrollView,
Image,
Button,
Dimensions
} from "react-native";
import resolveAssetSource from "resolveAssetSource";
import {Actions} from "react-native-router-flux";
export default class Main extends Component {
measureView(event) {
this.setState({
width: event.nativeEvent.layout.width,
height: event.nativeEvent.layout.width
});
}
componentWillMount() {
let source = resolveAssetSource(require("./assets/images/map.png"));
this.setState({ratio: source.height / source.width});
}
render() {
return (
<ScrollView
onLayout={event => this.measureView(event)}
>
<Text style={styles.header}>
Some Header Text
</Text>
<Image
style={{
width: this.state.width,
height: this.state.width * this.state.ratio
}}
resizeMode="contain"
source={require("./assets/images/map.png")}
/>
</ScrollView>
);
}
}
I am about to test an app with the appcelerator titanium framework, i have to center a view on the screen :
my index.xml :
<Alloy>
<!-- Anddroid Window -->
<Window id="index" platform="android">
<Require type="view" id="firstscreen" src="firstscreen"/>
</Window>
<!-- iOS Window -->
<NavigationWindow id="nav" platform="ios">
<Window id="win1" backgroundColor="white">
<Require type="view" id="firstscreen" src="firstscreen"/>
</Window>
</NavigationWindow>
the firstscreen xml :
<Alloy>
<ScrollView scrollingEnabled="false" contentWidth="Ti.UI.FILL">
<ImageView class="fullBgImage" image="/images/login/bg2.png" />
<View layout="vertical">
<View id="loginView" class="heightAuto" layout="vertical">
<ImageView id="localImage" image="/images/logo.png" />
<Label class="logoLabel" text="Karma" />
<Label class="logoSlogan" text="Faits confiance à votre Karma pour booster votre carrière" />
<View class="btn btnVert" onClick="openCandidat"><Label class="btnLabel" text="Je recherche un job" /></View>
<View class="btn btnBlanc" ><Label class="btnLabel bleu" text="Je suis recruteur" /></View>
</View>
</View>
</ScrollView>
</Alloy>
The index.js :
The formula to achieve is : viewTopPosition = (platformheight - viewheight)/2
if (OS_ANDROID) {
$.index.addEventListener('open', after_win_load);
$.index.open();
} else {
$.nav.addEventListener('open', after_win_load);
$.nav.open();
}
function after_win_load() {
// Platform height
var platformHeight = Ti.Platform.displayCaps.platformHeight;
// The view
var firstscreen = $.firstscreen;
/* Taille du logo */
firstscreenViewHeight = firstscreen.loginView.size;
/* Centrer la vue verticalement */
firstScreenTop = platformHeight - firstscreenViewHeight.height;
//firstscreen.top = firstScreenTop;
var style = $.createStyle({
classes : 'firstScreenTop',
apiName : 'View',
top : firstScreenTop / 2
});
firstscreen.loginView.applyProperties(style);
}
On iOs it looks great, view is centered vertically, but in android the : Ti.Platform.displayCaps.platformHeight is a too big pixels value = 1920
on my tiapp.xml file i already specified :
<property name="ti.ui.defaultunit" type="string">dp</property>
I know that android is pixels unit but iOs use dp unit, so how i to achieve this please ? someone has an idea?
For now for android i replaced the
var platformHeight = Ti.Platform.displayCaps.platformHeight;
to
var platformHeight = Ti.Platform.displayCaps.dpi;
But i ask myself if it will be good for all android screen resolution? and if this is a best practice?
Thank for your helps.
var densityFactor = OS_IOS ? 1 : Ti.Platform.displayCaps.logicalDensityFactor;
var platformHeight = Ti.Platform.displayCaps.platformHeight / densityFactor;
or you can directly set the top to 50%
var style = $.createStyle({
classes : 'firstScreenTop',
apiName : 'View',
top : "50%"
});