Develop Reference

React Native Expo Image Resizing

I'm using react native expo to display images of various subjects. The images I'm using have a variety of widths, heights and aspect ratios. The images themselves come from google firebase storage and are retrieved from the currently selected subjects JSON data which contains the firebase storage Image URL.
Some subjects have no images at all, which is fine however I want the content below to therefore move up, so a fixed size/aspect ratio image or view in this case is not appropriate. And as I said Images are of various heights and widths (some landscape / some portrait.
Currently the styling for the image I'm attempting is like so:
Image: {
height: null,
width: "90%",
alignSelf: 'center',
resizeMode: 'contain'
},
Currently with the height set to null the image is not shown at all, and the content below sits above.
The width I want fixed at 90% of the screen's width which it currently is doing, however I'm having issues with the height. I've tried setting the height at 'undefined' and also percentages '40%' etc however this is not appropriate for the subjects missing images.
Another way I have tried is placing the image inside a view like so:
<View style={styles.ImageContainer}>
<Image style={styles.Image} source={{ url: subject.ImageUrl }}/>
</View>
...
// Styling:
Image: {
height: null,
width: "100%", // 100% of the image container which is 90% of screen.
alignSelf: 'center',
resizeMode: 'contain'
},
ImageContainer: {
width: '90%',
alignSelf: 'center',
justifyContent: 'center'
}
What I really want to achieve is setting the image container to the size of the image height, which is resized so it fills 90% of the screens width (without skewing/stretching the image).
Is there are way of doing this within the styling or do I have to attempt using a function? I'm sure I have had success achieving this through styling in the past.

You could use a minHeight for the image to make sure it shows, it should use the actual image height but setting a minimum will allow it to display.
OR
You could use Image.getSize() and use the exact height of the image. However, Image.getSize() is an async function so you would have to await it to get the size until you can display the image.

Html2Canvas: Different image produced by different devices

I am using Html2Canvas to convert the contents of a div to an base64 string.
But, I am struggling to configure it correctly. It is producing different results for different results. My guess is that it's something to do with screen resolution.
Here is my code:
html2canvas(document.querySelector('#dpo_base_image'),
{
height: $('#dpo_base_image').height(),
width: $('#dpo_base_image').width(),
useCORS: true,
allowTaint: true,
}
).then(canvas => {
$('<input>').attr('type', 'hidden').attr('name', 'properties[_DataUrl]').attr('value', canvas.toDataURL()).appendTo('form');
});
Looking at the documentation I have a number of options as below:
Scale: The scale to use for rendering. Defaults to the browsers device pixel ratio.
width: The width of the canvas.
height: The height of the canvas.
windowWidth: Window width to use when rendering Element, which may affect things like Media queries.
windowHeight: Window height to use when rendering Element, which may affect things like Media queries.
There are more detailed here: https://html2canvas.hertzen.com/configuration
I am a back-end developer and don't have the knowledge of things like how screen sizes or resolutions could be affecting this.
Can anyone point me in the direction of consistently getting an image of 2000px wide and 2479px high?
I have tried putting those values in the width/height parameters but I still get different image results.
Thanks for any help.

Javascript: Upload image on bigger background, then crop it

In my application, I need my images to be 500x360. I wanna provide an upload form to allow the user to pick a picture, resize it to the desired format, then send it to the server.
Very simple for widescreen images. I have trouble with the other sizes - more height than width. With every cropping tool I tried, there's no way for me to squeeze the complete image inside the canvas since it is limited by the width.
You can try it here. I don't know how to fit the bottle inside the canvas.
http://codepen.io/anon/pen/ZeLvJm
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 500,
height: 360,
type: 'square'
},
boundary: {
width: 600,
height: 400
},
enforceBoundary: false
});
Load this image: http://www.lcbo.com/content/dam/lcbo/products/000067.jpg/jcr:content/renditions/cq5dam.web.1280.1280.jpeg
I tried many libraries without success: croppie, cropper, angular-image-cropper, ngImgCrop...
I thought about setting a canvas 900x900, upload my image in the middle, then fiddle with it to crop it the way I like, but I am not sure on how I should proceed.
Generic directions / Library would be appreciated (jquery / angular if possible).
Thank you !

Material UI GridTile height

I'm currently working with material ui and I'm running into an issue with GridLists. I have a GridList with multiple GridTiles and I don't see any way to change the height of each GridList separately. We are provided a prop for GridLists that let us specify the GridList cellHeight, but not for individual GridTiles. Does anyone know of a way to accomplish this?
GriList entry on material ui site Material Ui Grid List
I currently have the following (which does not work).
<GridList style={gridListStyle}>
<GridTile style={gridStyle1} titlePosition="bottom">
<div>
stuff
</div>
</GridTile>
<GridTile style={gridStyle2}>
<div>
junk
</div>
</GridTile>
</GridList>

While not an ideal solution, I ended up overriding the height of the GridTile component by adding 100% height !important. This allowed me to set the height to exactly what I needed.
var gridTileStyle= {
position: 'relative',
float: 'left',
width: '100%',
minHeight: '400px',
minWidth: '664px',
overflow: 'hidden',
height: '100% !important'
}
This allowed the component to dynamically resize in the window as the page got smaller, without the GridTile underneathe it overlapping it. Hopefully this helps someone else in the future.

You can also add some flex styling, which could help you with spacing your Tiles appropriately; for examples of flex settings available in Material-UI see https://material-ui.com/layout/grid/ (don't stop just because you see grid - I've successfully implemented these properties in a GridList too!).

Setting minHeight: '100vh'
helped me to get a grid element to height of 100%.
I tried all other elements and variants and did not help.

Force expell library for given div-structure

Given a HTML structure like so:
<div id="canvas">
<div class="group group-normal" id="1">hello world</div>
<div class="group group-infiltrated" id="2">whats up dogue</div>
</div>
I currently use jsPlumb to create a graph from that structure:
$(function() {
jsPlumb.Defaults.Container = $("div#canvas");
jsPlumb.draggable($("div.group"), {
containment: $("div#canvas")
});
var stateMachineConnector = {
connector: "Bezier",
paintStyle: { lineWidth: 2, strokeStyle: "#056" },
endpoint: "Blank",
anchor: "Continuous",
overlays:[ ["PlainArrow", { location: 1, width: 15, length: 12 } ]]
};
jsPlumb.connect({
source: "1",
target: "2"
}, stateMachineConnector);
});
Which already gives me a nice, draggable graph:
The problem is, that when initialising the graph, all the divs are in the upper left corner of the canvas. I learned that this is due that jsPlumb only provides functionality to layout a graph, but not to position it.
I then went on a scavenger hunt and found many useful libraries that deal with positioning, like springy, sigma and alike. The problem is: Most of the don't operate on divs, but rather on some (for me) instransparent SVG/Canvas object graph.
I like jsPlumb very much and would like to keep using it. The only thing I need from other libraries is the initial positioning of all the elements.
How can I make the elements be positioned more evenly over the space available, maybe even in a way that makes them arrange the same way every time the graph is initialized?

Here is the plugin for positioning DIV's which has connectivity: https://github.com/lndb/jsPlumb_Liviz.js
Basically the plugin is derived from graphviz js library.
You need to pass the connectivity information to the library through a textarea(id=dot-src). So whenever you establish a connection, store the connectivity info in a string and later pass it to the Liviz library for positioning it.
str='digraph MyGraph {'; // This string will be set to the textarea at the end.
// Whenever connection is created update the string.
jsPlumb.bind("jsPlumbConnection", function(ci) {
console.log($('#'+ci.sourceId).data("prop").dn+"->"+$('#'+ci.targetId).data("prop").dn);
str+=ci.sourceId+"->"+ci.targetId+";";
});
// At the end set the string and call Liviz function
$('#dot-src').text(str+"}"); // Set the string
w_launch(); // call the library to position the DIV's based on connectivity.
You can explore graphviz for different types of options to customise positioning.