有問題，使我的圖片上傳iPhone上工作

Question

這是我的問題的小提琴。

http://jsfiddle.net/5S389/

的代碼與我的Android的偉大工程，但不是在我的iPhone 4

後，我選擇一個圖像上傳，圖像預覽約爲50像素高度，寬度640像素。我已經對每個計算操作都使用了警報，並且我可以看到這些數字是正確的。然而，最終顯示的圖像是非常錯誤的。

任何人都有線索怎麼回事？

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迫使大小，而圖分辨率停留在雙。

希望這會有所幫助。