I am building an app for iOS with React-native, and I use my code to capture a screenshot successfully. The problem is that I want to move the snapshot to the Images folder so it is easily accessible by the user.
I use the following code:
snapshot = async () => {
const targetPixelCount = 1080; // If you want full HD pictures
const pixelRatio = PixelRatio.get(); // The pixel ratio of the device
// pixels * pixelratio = targetPixelCount, so pixels = targetPixelCount / pixelRatio
const pixels = targetPixelCount / pixelRatio;
const result = await Expo.takeSnapshotAsync(this, {
result: 'file',
height: pixels,
width: pixels,
quality: 1,
format: 'png',
});
if (result) {
//RNFS.moveFile(result, 'Documents/snapshot.png');
Alert.alert('Snapshot', "Snapshot saved to " + result);
}
else {
Alert.alert('Snapshot', "Failed to save snapshot");
}
}
Does anybody know how to move the image to the Images Folder?
Thank you
Use the RN CameraRoll Module: https://facebook.github.io/react-native/docs/cameraroll
Related
I'm having some trouble getting svgs loaded from an API to work, some svgs seem to have a viewbox property some don't. Some svgs load correctly and fill the container, others are tiny, and others don't display at all (possibly too large).
The JSON data can be found here: https://snapsite.co/output.json each item contains an svg icon.
Here is how I'm currently displaying the svg:
<SvgCssUri
height="100%"
width="100%"
uri={image}
/>
Here is how it looks
I managed to solve my issue by modifying all the svgs using the following script I cobbled together.
const fs = require("fs");
const path = require("path");
// Get list of icons from the icons directory
const icons = fs.readdirSync(path.join(__dirname, "icons"));
const modifySvg = (filepath) => {
// Load the SVG file
let svg = fs.readFileSync(filepath, "utf8");
// Check if svg has viewbox
const hasViewBox = svg.includes("viewBox");
if (!hasViewBox) {
console.log("No viewBox found");
// Check if width and height are set
const hasWidth = svg.includes("width");
const hasHeight = svg.includes("height");
if (!hasWidth || !hasHeight) {
console.log("No width or height found");
} else {
console.log("Width and height found");
console.log("Adding viewBox");
// Get width property
const widthStr = svg.match(/width="([^"]*)"/)[0];
const width = widthStr.replace(/"/g, "").replace("width=", "");
// Get height property
const heightStr = svg.match(/height="([^"]*)"/)[0];
const height = heightStr.replace(/"/g, "").replace("height=", "");
console.log({ width, height });
// Add viewBox to end of svg tag
const viewBox = `viewBox="0 0 ${width} ${height}"`;
svg = svg.replace(/<svg/, `<svg ${viewBox}`);
// Make width and height are 100%
svg = svg.replace(/width="[^"]*"/, `width="100%"`);
svg = svg.replace(/height="[^"]*"/, `height="100%"`);
// Write the file
fs.writeFileSync(filepath, svg);
console.log(`Saved ${filepath}`);
}
}
};
//Loop icons
icons.forEach((icon) => {
// Get file path
const filePath = path.join(__dirname, "icons", icon);
// Modify svg
modifySvg(filePath);
});
Hope this helps someone!
I'm using react-native-image-resizer in my React Native app.
I've tried giving assetPath, pathURI, and image (see below) to ImageResizer, and always get the same message:
err on ImageResizer Unable to load source image from path
I've verified that uri64 does encode the file, so I know that the file path and URI are correct.
let maxWidth = 24;
let maxHeight = 24;
let compressFormat = "PNG";
let quality = 100; // only used for jpeg
let rotation = 0;
let outputPath = ".";
let options = {};
let keepMeta = false;
const assetPath = "../../../../../assets/Knob-54px.png"
const pathURI = "file://" + assetPath
const uri64 = Base64.encodeURI(pathURI );
const image = 'data:image/jpeg;base64,' + uri64;
console.log("uri64 ", uri64);
console.log("image ", image);
ImageResizer.createResizedImage(pathURI or assetPath or image, maxWidth, maxHeight,
'PNG', quality, rotation, outputPath)
//, keepMeta = false,
//options = {mode: 'contain'})
.then(response => {
console.log("response.uri ", response.uri)
console.log("response.path ", response.path)
console.log("response.name ", response.name)
console.log("response.size ", response.size)
// response.uri is the URI of the new image that can now be displayed, uploaded...
// response.path is the path of the new image
// response.name is the name of the new image with the extension
// response.size is the size of the new image
})
.catch(err => {
console.log("err on ImageResizer", err)
// Oops, something went wrong. Check that the filename is correct and
// inspect err to get more details.
});
Here's the source code on GitHub for the ImageResizer:
https://github.com/bamlab/react-native-image-resizer
I'm converting a tensor returned from a tensorflow camera into a jpeg. I've been able to do so but the jpeg image quality is terrible. This is for a mobile react-native app developed with expo. The library I'm using to convert the tensor to an image is jpeg-js.
This is the code I'm using to transform the tensor into an image:
const handleCameraStream = async (imageAsTensors) => {
const loop = async () => {
const tensor = await imageAsTensors.next().value;
console.log(tensor)
const [height, width] = tensor.shape
const data = new Buffer(
// concat with an extra alpha channel and slice up to 4 channels to handle 3 and 4 channels tensors
tf.concat([tensor, tf.ones([height, width, 1]).mul(255)], [-1])
.slice([0], [height, width, 4])
.dataSync(),
)
const rawImageData = {data, width, height};
const jpegImageData = jpeg.encode(rawImageData, 200);
const imgBase64 = tf.util.decodeString(jpegImageData.data, "base64")
const salt = `${Date.now()}-${Math.floor(Math.random() * 10000)}`
const uri = FileSystem.documentDirectory + `tensor-${salt}.jpg`;
await FileSystem.writeAsStringAsync(uri, imgBase64, {
encoding: FileSystem.EncodingType.Base64,
});
setUri(uri)
// return {uri, width, height}
};
// requestAnimationFrameId = requestAnimationFrame(loop);
!uri ? setTimeout(() => loop(), 2000) : null;
}
The picture in the top half of the image is the camera stream. The picture in the bottom half of the image below is the transformed tensor.
I tried your code with increased resize height and width and was able to get an image with good quality. If that doesn't work, maybe you can post the rest of your code and I'll try to help.
Example Image
<TensorCamera
type={Camera.Constants.Type.front}
resizeHeight={cameraHeight}
resizeWidth={cameraWidth}
resizeDepth={3}
onReady={handleCameraStream}
autorender={true}
/>
I have an app, where i need to get known ratio of picture for resizing it later. User can take pictures horizontal and vertical. And of course, ratio changes. So i need to get two different ratios.
There is problem with updating let horizontalImageRatio = 0;
How can i solve this, any tips?
my code:
Image.getSize(data.uri, (width, height) => { // Pickuping size of the picture
let imageWidth = width;
let imageHeight = height;
let stringImageWidth = '' + imageWidth; // Make double to string for storing to asyncstorage
let stringImageHeight = '' + imageHeight;
let horizontalImageRatio = 0; // this value should be updated
let verticalImageRatio = 0;
// For updating let horizontalImageRatio, but not working outside of this <-- PROBLEM
const horizontalRatioCalc = () => {
horizontalImageRatio = imageWidth/imageHeight;
console.log('horizontal_update', horizontalImageRatio);
};
const verticalRatioCalc = () => {
verticalImageRatio = imageWidth/imageHeight;
console.log('vertical_update', verticalImageRatio);
};
let stringHorizontalImageRatio = '' + horizontalImageRatio;
let stringVerticalImageRatio = '' + verticalImageRatio;
console.log(`Size of the picture ${imageWidth}x${imageHeight}`); // Tells size of the image for the console
horizontalRatio = async () => {
if (imageHeight>imageWidth) {
verticalRatioCalc();
try {
AsyncStorage.setItem("imageVerticalRatio", stringVerticalImageRatio),
AsyncStorage.setItem("asyncimageWidth", stringImageWidth)
AsyncStorage.setItem("asyncimageHeight", stringImageHeight)
console.log(`Vertical ratio saved! It's ${stringVerticalImageRatio}`)
console.log(`Image Width saved! It's ${stringImageWidth}`)
console.log(`Image height saved! It's ${stringImageHeight}`)
} catch (e) {
console.log(`AsyncStorage saving of image vertical ratio cannot be done.`)
}
}else {
horizontalRatioCalc();
try {
AsyncStorage.setItem("imageHorizontalRatio", stringHorizontalImageRatio),
AsyncStorage.setItem("asyncimageWidth", stringImageWidth)
AsyncStorage.setItem("asyncimageHeight", stringImageHeight)
console.log(`Horizontal ratio saved! It's ${stringHorizontalImageRatio}`)
console.log(`Image Width saved! It's ${stringImageWidth}`)
console.log(`Image height saved! It's ${stringImageHeight}`)
} catch (e) {
console.log(`AsyncStorage saving of image vertical ratio cannot be done.`)
}
}
}
horizontalRatio();
So, apparently, you don't have access to horizontalImageRatio inside of horizontalRatioCalc, the method horizontalRatioCalc has a different scope.
What you can do is change horizontalRatioCalc to receive a parameter and return a value, just like I've done in this example: https://stackblitz.com/edit/react-xiysai
This is good because now you have a function that can be tested independently.
Or you can also do it this way:
https://stackblitz.com/edit/react-variable-scope
This way you have access to both the variable and the method.
I'm trying to place a sketch on a building on the map with Leaflet. I succeeded in this as well, I can place and scale an image in svg format on the map. But when I add a new sketch to the map, I want the old sketch to be deleted from the map.
map.removeLayer(sketchLayer)
sketchLayer.removeFrom(map)
map.removeLayer(L.sketchLayer)
i tried these
My codes,
splitCoordinate (value) {
const topLeftCoordinates = value.top_left.split(',')
const topRightCoordinates = value.top_right.split(',')
const bottomLeftCoordinates = value.bottom_left.split(',')
this.initMap(topLeftCoordinates, topRightCoordinates, bottomLeftCoordinates)
},
initMap (topLeftCoordinates, topRightCoordinates, bottomLeftCoordinates) {
let map = this.$refs.map.mapObject
map.flyTo(new L.LatLng(topLeftCoordinates[0], topLeftCoordinates[1]), 20, { animation: true })
const vm = this
var topleft = L.latLng(topLeftCoordinates[0], topLeftCoordinates[1])
var topright = L.latLng(topRightCoordinates[0], topRightCoordinates[1])
var bottomleft = L.latLng(bottomLeftCoordinates[0], bottomLeftCoordinates[1])
var sketchLayer = L.imageOverlay.rotated(vm.imgUrl, topleft, topright, bottomleft, {
opacity: 1,
interactive: true
})
map.addLayer(sketchLayer)
}
Fix:
The error was related to the javascript scope. I defined the sketchLayer in the data and my problem solved.