HTML5 Canvas ile istemci tarafında görüntü iOS kameradan alınan yeniden boyutlandırmak istiyorum ama ~1,5 mb daha büyük görüntüyü yanlış bir orana sahip olduğu bu tuhaf böcek içinde koşmaya devam ediyorum

Medya yükleme APİ ile masaüstü ama en son iOS olmayan bir sürümü üzerinde çalışıyor.

Burada bir örnek görebilirsiniz: http://jsbin.com/ekuros/1

Lütfen bunu düzeltmek için nasıl bir fikriniz var mı? Bu bellek sorunu var mı?

$('#file').on('change', function (e) {
    var file = e.currentTarget.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var image = $('<img/>');
        image.on('load', function () {
            var square = 320;
            var canvas = document.createElement('canvas');

            canvas.width = square;
            canvas.height = square;

            var context = canvas.getContext('2d');
            context.clearRect(0, 0, square, square);
            var imageWidth;
            var imageHeight;
            var offsetX = 0;
            var offsetY = 0;

            if (this.width > this.height) {
                imageWidth = Math.round(square * this.width / this.height);
                imageHeight = square;
                offsetX = - Math.round((imageWidth - square) / 2);
            } else {
                imageHeight = Math.round(square * this.height / this.width);
                imageWidth = square;    
                offsetY = - Math.round((imageHeight - square) / 2);            
            }

            context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
            var data = canvas.toDataURL('image/jpeg');

            var thumb = $('<img/>');
            thumb.attr('src', data);
            $('body').append(thumb);
        });
        image.attr('src', e.target.result);
    };
    reader.readAsDataURL(file);
});

Eğer hala drawımage fonksiyonu uzun versiyonu kullanmak gerekirse bu değiştirebilirsiniz:

context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

bunun için:

drawImageIOSFix(context, img, sx, sy, sw, sh, dx, dy, dw, dh);

Sadece bu iki işlevi bir yere eklemek gerekir:

/**
 * Detecting vertical squash in loaded image.
 * Fixes a bug which squash image vertically while drawing into canvas for some images.
 * This is a bug in iOS6 devices. This function from https://github.com/stomita/ios-imagefile-megapixel
 * 
 */
function detectVerticalSquash(img) {
    var iw = img.naturalWidth, ih = img.naturalHeight;
    var canvas = document.createElement('canvas');
    canvas.width = 1;
    canvas.height = ih;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    var data = ctx.getImageData(0, 0, 1, ih).data;
    // search image edge pixel position in case it is squashed vertically.
    var sy = 0;
    var ey = ih;
    var py = ih;
    while (py > sy) {
        var alpha = data[(py - 1) * 4   3];
        if (alpha === 0) {
            ey = py;
        } else {
            sy = py;
        }
        py = (ey   sy) >> 1;
    }
    var ratio = (py / ih);
    return (ratio===0)?1:ratio;
}

/**
 * A replacement for context.drawImage
 * (args are for source and destination).
 */
function drawImageIOSFix(ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) {
    var vertSquashRatio = detectVerticalSquash(img);
 // Works only if whole image is displayed:
 // ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio);
 // The following works correct also when only a part of the image is displayed:
    ctx.drawImage(img, sx * vertSquashRatio, sy * vertSquashRatio, 
                       sw * vertSquashRatio, sh * vertSquashRatio, 
                       dx, dy, dw, dh );
}

Bu iOS ya da diğer platformlarda çalıştırmak olup olmadığını iyi çalışır.

Bu stomita tarafından büyük çalışmalarına dayanmaktadır ve işinizi ona kredi gerekir.