0

I have to create SPA frontend where I have to upload image and create a thumbnail of it and also create a new version of image mirrored along x-axis. I dont understand what this means and how is it achieved using react.

Can anyone help me to understand this and how it would look like?

Molly Christian
  • 147
  • 1
  • 2
  • 10
  • Does this just need to be a visual thing or do you need to actually produce an altered version of the image? – James Coyle Feb 06 '19 at 13:37
  • You can a) draw the image to a canvas b) use [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) to manipulate pixels c) save the new canvas as image –  Feb 06 '19 at 13:37
  • 1
    Possible duplicate of [Flip / mirror an image horizontally + vertically with css](https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css) – Corné Feb 06 '19 at 13:47
  • @JamesCoyle I need to create a new version of the image. – Molly Christian Feb 06 '19 at 20:00

1 Answers1

0

You can do this with canvas:

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const image = new Image()

image.src = 'https://via.placeholder.com/200/200'
image.addEventListener('load', () => {
  ctx.translate(200, 0)
  ctx.scale(-1, 1)
  ctx.drawImage(image, 0, 0)
})
<canvas id="canvas" width="200" height="200"></canvas>
James Coyle
  • 9,922
  • 1
  • 40
  • 48