1

I'm making a simply camera web app with filters like Snapchat. I'd like download canvas and I'm using following code but image is mirrore because i'm using front camera. Is there a way to flip it before download? Thanks for reply

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

function download_image() {
    var canvas = document.getElementById("jeeFaceFilterCanvas");
    image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    var link = document.createElement('a');
    link.download = "my-image.png";
    link.href = image;
    link.click();
}
54ka
  • 3,501
  • 2
  • 9
  • 24
Marco
  • 27
  • 3
  • 1
    insert your html and css – s.kuznetsov Nov 14 '20 at 10:36
  • What you are looking for is described here: [Exif Orientation: Rotate and Mirror JPEG Images](https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images/20600801#20600801) – 54ka Nov 14 '20 at 10:41
  • Sorry im not very expert with code, can you help to understand what I can do please? – Marco Nov 17 '20 at 20:05

1 Answers1

0

My html:

<body onload="main()">
<canvas width="600" height="600" id='FilterCanvas'></canvas>
<div class='notice'>
<div class="sharethis-inline-share-buttons" id="st-1">
<div class="st-btn st-first"  style="display: inline-block;">

<img style="width: 70%;height: 70%; opacity: 50%" onclick="download_image()"> 
</div>
</div>
</div>
</body>
Marco
  • 27
  • 3
  • Please [edit the question](https://stackoverflow.com/posts/64832610/edit) and insert this code into it, that is where it belongs (this space is for answers; not to extend or clarify the question). And then please delete this answer-that-is-not-an-answer. – Peter B Nov 18 '20 at 09:58