使我的图像上传在 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 以强制大小，而位图分辨率保持双倍。

希望这会有所帮助。