, имея проблемы с моей загрузкой изображения на iphone

Question

Вот скрипка моей проблемы.

http://jsfiddle.net/5S389/

код прекрасно работает с моим андроида, но не на моем iPhone 4.

После того как я выбрать образ для загрузки, предварительный просмотр изображения составляет около 50px высота и ширина 640px. Я использовал предупреждение для каждой расчетной операции, и я вижу, что числа верны. Однако изображение, показанное в конце, очень ошибочно.

У кого-нибудь есть идеи, что происходит?

HTML:

<div id="files"> 
    <input type="file" id="imageLoader" name="imageLoader" /> 
</div> 

<div id="cont"> 
    <canvas id="canvas"></canvas> 
</div> 

<button type="button" id="rotate" >Rotér 90°</button> 

<input type="button" id="saveButton" value="LAGRE" onclick="SavePost()" /> 

JS:

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var imgWidth = 640; 
var imgHeight = 480; 
var imageLoader = document.getElementById('imageLoader'); 
imageLoader.addEventListener('change', handleImage, false); 
var size = { 
    width: imgWidth, 
    height: imgHeight 
}; 
var rotation = 0; 
var deg2Rad = Math.PI/180; 
var img; 
var fileName = ""; 
var img; 

function handleImage(e) { 
    var reader = new FileReader(); 
    reader.onload = function (event) { 
     img = new Image; 
     img.onload = draw; 
     img.src = event.target.result; 
     imgWidth = img.width; 
     imgHeight = img.height; 
     size = { 
      width: imgWidth, 
      height: imgHeight 
     }; 
    }; 
    reader.readAsDataURL(e.target.files[0]); 
    fileName = e.target.files[0].name; 
} 

function draw() { 
    var maxWidth = 640; 
    var scale = 1.00; 
    if (size.width > maxWidth) { 
     scale = maxWidth/size.width; 
    } 
    canvas.width = size.width * scale; 
    canvas.height = size.height * scale; 
    // calculate the centerpoint of the canvas 
    var cx = canvas.width/2; 
    var cy = canvas.height/2; 

    // draw the rect in the center of the newly sized canvas 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.save(); 
    ctx.translate(cx, cy); 
    ctx.rotate(rotation * deg2Rad); 
    ctx.scale(scale, scale); 
    ctx.drawImage(img, -imgWidth/2, -imgHeight/2); 
    ctx.restore(); 
} 

document.getElementById("rotate").addEventListener("click", resizeClicked, false); 

function resizeClicked(e) { 
    rotation += 90; 
    newSize(imgWidth, imgHeight, rotation); 
    draw(); 
} 

function newSize(w, h, a) { 
    var rads = a * Math.PI/180; 
    var c = Math.abs(Math.cos(rads)); 
    var s = Math.abs(Math.sin(rads)); 
    size.width = h * s + w * c; 
    size.height = h * c + w * s; 
} 

function SavePost() { 
     var canvas = $('canvas')[0]; 
     var dataURL = canvas.toDataURL(); 
     console.log(dataURL); 
} 

Answer 1

Проблема не с iPhone в-се, но что вы пытаетесь возможно, прежде чем читать ширину и высоту изображения он загружен. Если изображение находится в кеше, браузер может или не сможет его декодировать, прежде чем читать его свойства размера. Это становится для него случайным и зависит от того, как отдельные браузеры обрабатывают загрузку изображений.

Ошибка однако в коде из-за того, как обрабатывается загрузка изображения (а не с браузером/устройства) - Вы можете попробовать это вместо:

function handleImage(e) { 
    var reader = new FileReader(); 
    reader.onload = function (event) { 
     img = new Image; 
     img.onload = draw; 
     img.src = event.target.result; 
     // image is (maybe) still not loaded here so width = height = 0 
    }; 
    reader.readAsDataURL(e.target.files[0]); 
    fileName = e.target.files[0].name; 
} 

function draw() { 
    /* Now the size can be read - but this is really 
     redundant here as the image is available and can 
     be read directly. Inserting it here for compatibility. 
    */ 
    size = { 
     width: this.width, 
     height: this.height 
    }; 

    var maxWidth = 640; 
    var scale = 1.00; 
    if (size.width > maxWidth) { 
     scale = maxWidth/size.width; 
    } 
    canvas.width = size.width * scale; 
    canvas.height = size.height * scale; 

    ... 

Другая возможная вещь, которую вы можете проверить, если размер по-прежнему не соответствует пропорции пикселей. Вы можете использовать это с расчетом:

var ratio = window.devicePixelRatio || 1; 

canvas.width = size.width * scale * ratio; 
canvas.height = size.height * scale * ratio; 

canvas.style.width = (size.width * scale) + 'px'; 
canvas.style.height = (size.height * scale) + 'px'; 

Если экран сетчатки глаза, то соотношение будет 2. Для того, чтобы держать холст в заданном пространстве вы можете добавить CSS, чтобы заставить размер в то время как разрешение растрового изображения остается двойной ,

Надеюсь, это поможет.