Drawing selected photo to canvas with Javascript

Question

I am using the webpage below to draw an photo selected with an iPhone to the canvas so it can later be uploaded to a webpage over ajax. The code would also have downsampling but I have omitted that to make it simpler.

This code works fine on Mac OSx in Firefox and Safari but when used with the iPhone it goes wrong when you select a photo from your iPhone library or take a photo. The photo in the canvas has the wrong aspect ratio and is upside down. BUT if you import a photo from the iPhone to your Mac and then put it back on the phone with iTunes that photo when selected comes out perfectly! Why would this be, I think it might have to do with something with the image being rotated once it has been imported to the Mac.

Basically I am trying to write a script so a user can take a photo with the iPhone, the photo gets downsampled using canvas and javascript and then gets uploaded via ajax. But the problem is the photo in the canvas doesn't come out right when taking a fresh photo.

First image = correct Second image = incorrect

Canvas at top is correct Canvas here is incorrect, wrong aspect ratio, upside down, canvas has red background Canvas Gone Wrong

    <style type="text/css">

        #theImage {
            display:block;  
        }

        #cv {
            background-color:#F00;
        }

    </style>
</head>

<body>

    <form id="pageform" method="post" enctype="multipart/form-data" action="">
        <input type="file" name="fileinput" id="fileinput"  accept="image/*"/> 
    </form>

    <canvas id='cv' width="918" height="689"></canvas>

    <img id="theImage" />

    <script type="text/javascript">

    function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#theImage').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

    function another() {

        var cv = document.getElementById('cv');
        var context = cv.getContext('2d');

        context.ImageSmoothingEnabled = true;
        context.webkitImageSmoothingEnabled = true;
        context.mozImageSmoothingEnabled = true;

        var img = document.getElementById('theImage');

        context.drawImage(img,0, 0, 918,689 );

    }

    $(document).ready(function () {

        $('#fileinput').change(function() {

            readURL(this);
            setTimeout(another,2000);

        });

    }); 

    </script>

</body>
</html>

score 1 · Answer 1 · edited May 23 '17 at 11:59

your code looks good...

What happens with this code?

i can't test on ios 7

this has no static values... and no ImageSmoothingEnabled & appends the image on the body and not the canvas.

var MAXWidthHeight=64;
function h(e){
 var fr=new FileReader();
 fr.onload=function(e){
  var img=new Image();
  img.onload=function(){
   var r=MAXWidthHeight/Math.max(this.width,this.height),
   w=Math.round(this.width*r),
   h=Math.round(this.height*r),
   c=document.createElement("canvas");
   c.width=w;c.height=h;
   c.getContext("2d").drawImage(this,0,0,w,h);
   this.src=c.toDataURL();
   document.body.appendChild(this);
  }
  img.src=e.target.result;
 }
 fr.readAsDataURL(e.target.files[0]);
}
window.onload=function(){
 document.getElementById('fileinput').addEventListener('change',h,false);
}

More info

https://stackoverflow.com/a/17502568/2450730

DEMO

http://jsfiddle.net/2zz76/

fullscreen for ios7

http://jsfiddle.net/2zz76/embedded/result/

No I'm afraid this does the same thing on iOS 7, the resulting image is upside down and more importantly does not have the correct height, it looks squished — Tim Jones, Jan 08 '14 at 00:25

Drawing selected photo to canvas with Javascript

1 Answers1