react-exif-orientation-img - img element wrapper component for React that understands EXIF orientation information and corrects it using CSS transforms

  •        2

img element wrapper component for React that understands EXIF orientation information and corrects it using CSS transforms. All properties will be cleanly passed to the img element including style and onLoad that this component uses under the hood. However, keep in mind that you should be aware that width/height and other dimension manipulations may not work as expected.

https://github.com/rricard/react-exif-orientation-img

Dependencies:

exif-js : ^2.2.1
exif2css : ^1.2.0

Tags
Implementation
License
Platform

   




Related Projects

react-native-orientation - Listen to device orientation changes in react-native and set preferred orientation on screen to screen basis

  •    Objective-C

Listen to device orientation changes in React Native applications and programmatically set preferred orientation on a per screen basis. Works on both Android and iOS. Please note that you still need to manually configure a couple files even when using automatic linking. Please see the 'Configuration' section below. You will also need to restart your simulator before the package will work properly.

exif-orientation-examples - Example images for the various EXIF orientation flags, in both landscape and portrait orientation

  •    Ruby

Example images using each of the EXIF orientation flags (1-to-8), in both landscape and portrait orientations. See here for more information.

Gwenview - Image Viewer for KDE

  •    C++

Gwenview is an image viewer for KDE. Gwenview can load and save all image formats supported by KDE. It can accurately control the way images are scaled. It supports image manipulations like rotation, mirroring, cropping, resizing and red eye reduction. When browsing JPEG images with EXIF information, Gwenview automatically rotates them according to the EXIF Orientation tag.

react-shimmer - 🌠 React <img> component that simulates a shimmer effect while loading.

  •    Javascript

A powerful, customisable, <img> component that simulates a shimmer effect while loading. (with zero dependencies!) Currently compatible with React, but RN compatibility is also on the way. Feel free to send PRs.

react-native-img-cache - Image Cache for React Native

  •    TypeScript

CachedImage component and Cache image manager for React Native. I am no longer maintaining this library but react-native-expo-image-cache which depends on ExpoKit.


react-event-components - 🛰 A set of React components designed to handle global events (interval, keyboard, touch, mouse, etc)

  •    Javascript

A set of components designed as an idiomatic way of working with global, raw input (keyboard, mouse, touch, etc) in React. Call the handler everytime a key event happen.

react-tiny-dom - 🍙 A minimal implementation of react-dom using react-reconciler

  •    Javascript

react-tiny-dom is a minimal implementation of react-dom as custom renderer using React 16 official Renderer API. The purpose of this project is to show the meaning of each method of the ReconcilerConfig passed to react-reconciler, by using a practical yet familiar environment: the browser DOM.

react-useportal - 🌀 React hook for Portals

  •    TypeScript

Need to make dropdowns, lightboxes/modals/dialogs, global message notifications, or tooltips in React? React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component (react docs). This hook is also isomorphic, meaning it works with SSR (server side rendering).

react-simple-img - 🌅 React lazy load images with IntersectionObserver API and Priority Hints

  •    Javascript

Image component working similar with standard img tag and with the following props. This function is only required, when you want to customise intersection observer configuration.

node-exif - A node.js library to extract Exif metadata from images.

  •    Javascript

With node-exif you can extract Exif metadata from images (JPEG). Exif is a format used, for example, by digital cameras and scanners to save additional information about an image in the image file. This information can be the camera model, resolution, where the image was taken (GPS) or when it was taken. Rodrigo Espinosa proposes the npm package exif-cli to execute node-exif from a shell.

PREACT - Fast 3kB alternative to React, with the same ES2015 API

  •    Javascript

PREACT is a fast 3kB alternative to React, with the same ES2015 API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety. Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

vue-picture-input - Mobile-friendly picture file input Vue

  •    Vue

Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more. All contributions are welcome, as long as they are within the scope of the project. Please open a new issue before submitting a pull request.

React - JavaScript library for building user interfaces

  •    Javascript

React is a JavaScript library for building user interfaces. Lots of people use React as the V in MVC. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. React can also render on the server using Node and power mobile apps using React Native.

nerv - A blazing fast React alternative, compatible with IE8 and React 16.

  •    Javascript

Nerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance, tinier package size and better browser compatibility. 💫 Support React 16 features, Error Boundaries, Portals, custom DOM attributes, etc.

react-syntax-highlighter - syntax highlighting component for react with prismjs or highlightjs ast using inline styles

  •    Javascript

Check out a small demo here and see the component in action highlighting the generated test code here. There are other syntax highlighters for React out there so why use this one? The biggest reason is that all the others rely on triggering calls in componentDidMount and componentDidUpdate to highlight the code block and then insert it in the render function using dangerouslySetInnerHTML or just manually altering the DOM with native javascript. This utilizes a syntax tree to dynamically build the virtual dom which allows for updating only the changing DOM instead of completely overwriting it on any change, and because of this it is also using more idiomatic React and allows the use of pure function components brought into React as of 0.14.

react-faux-dom - DOM like structure that renders to React

  •    Javascript

DOM like data structure to be mutated by D3 et al, then rendered to React elements. ReactFauxDOM supports a wide range of DOM operations and will fool most libraries but it isn't exhaustive (the full DOM API is ludicrously large). It supports enough to work with D3 but will require you to fork and add to the project if you encounter something that's missing.

react-native-image-picker - :sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera

  •    Java

This library started as a basic bridge of the native iOS image picker, and I want to keep it that way. As such, functionality beyond what the native UIImagePickerController supports will not be supported here. Multiple image selection, more control over the crop tool, and landscape support are things missing from the native iOS functionality - not issues with my library. If you need these things, react-native-image-crop-picker might be a better choice for you. To use this library you need to ensure you match up with the correct version of React Native you are using.

react-testing-library - 🐐 Simple and complete React DOM testing utilities that encourage good testing practices

  •    Javascript

Simple and complete React DOM testing utilities that encourage good testing practices. You want to write maintainable tests for your React components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

react-flip-move - Effortless animation between DOM changes (eg

  •    Javascript

This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes. CSS transitions only work for CSS properties. If your list is shuffled, the items have rearranged themselves, but without the use of CSS. The DOM nodes don't know that their on-screen location has changed; from their perspective, they've been removed and inserted elsewhere in the document.