On safari iOS 9.1, draw image on the canvas was wrong ratio

268 Views Asked by At

I need to draw image on the canvas by JavaScript. On other devices it works well, but photos captured by iOS 9.1 mobile will be rendering is wrong. It was scaled like image below.

unexpected scale image on canvas iOS9.1

I tried to use https://blueimp.github.io/JavaScript-Load-Image/. It's also occurred.

I thinks it relate to exif data in image (because I tried to remove exif data in image by use paint in windows and it works well). So what is the solution for this problem?

This is my code:

    $(document).ready(function(){
        $('#inpImage').change(function(){
            readURL(this, drawImage);
        });
        function drawImage(img)  {
            var canvas = document.getElementById("myCanvas");
            var cContext = canvas.getContext('2d');

            var size = scaleSize(400, 600, img.width, img.height);
            var width = size[0];
            var height = size[1];

            canvas.setAttribute('width', width);
            canvas.setAttribute('height', height);

            cContext.beginPath();
            cContext.rect(0, 0, width, height);
            cContext.fillStyle = "red";
            cContext.fill();

            cContext.drawImage(img, 0, 0, width, height);
        };
    });
    function readURL(input, drawImage) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image();
                img.onload = function(){
                    drawImage(img);
                };
                img.src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function scaleSize(maxW, maxH, currW, currH) {
        var ratio = currH / currW;
        if (currW >= maxW && ratio <= 1) {
            currW = maxW;
            currH = currW * ratio;
        } else if (currH >= maxH) {
            currH = maxH;
            currW = currH / ratio;
        }
        return [currW, currH];
    }
0

There are 0 best solutions below