Question

这是我问题的一小部分。

该代码适用于我的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以强制大小，同时位图分辨率保持双倍。

希望这有帮助。

我的图像上传工作在iPhone上有问题

1 个答案: