Question

目标是让用户选择在图像和画布元素上显示的照片。

为什么此代码适用于Firefox，Chrome，IE，iPad但不适用于iPhone？在iPhone 3GS或iPhone 5上，画布（红色边框）显示为空白，尽管尺寸正确。

它似乎适用于iPhone屏幕截图，但不适用于照片。 Web Inspector什么都没给我们。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title></title>
    <style type="text/css">
    html, body{font-size:120%;}        
    #diag{ font-family:'Courier New';}
    img{border:2px solid blue;}
    canvas{border:2px solid red;}
    </style>
    <script type="text/javascript">
    var reader = new FileReader();
    var prev;
    function go() {
        prev = new Date();
        diag('');
        diag('start');
        var imgFile = document.getElementById('submitfile');
        if (imgFile.files && imgFile.files[0]) {
        reader.onloadend = function () {
            diag('reader.onloadend');
            diag('reader.result.length=' + (reader.result.length / 1024.0 / 1024.0).toFixed(4) + "mb");
            var img = new Image();
            img.onload = function () {
              diag('img.onload');
              var cvs = document.createElement("canvas");
              var ctx = cvs.getContext("2d");
              diag("img.width:" + this.width);
              diag("img.height:" + this.height);
              cvs.width = this.width;
              cvs.height = this.height;
              diag("cvs.width:" + cvs.width);
              diag("cvs.height:" + cvs.height);
              ctx.drawImage(this, 0, 0);
              ctx.font = '18pt Calibri';
              ctx.fillStyle = 'red';
              ctx.fillText('CANVAS COPY', 100, 100);
              document.body.appendChild(cvs); // new canvas
              document.body.appendChild(this); // img element
              diag('ctx.drawImage');
            };
            img.src = reader.result;
        }
        }
        reader.readAsDataURL(imgFile.files[0]);
        diag('reader.readAsDataURL');
    }
    function diag(msg) {
        var now = new Date();
        var ms = now.getTime() - prev.getTime();
        var current_diag_text = document.getElementById("diag").innerHTML;
        var new_diag_text = ms + "ms " + msg + "<br/>" + current_diag_text;
        if (msg === '') {
        document.getElementById("diag").innerHTML = '';
        } else {
        document.getElementById("diag").innerHTML = new_diag_text;
        }
        prev = now;
    }
    </script>
</head>
<body>
    <form name="Upload" action="#" enctype="multipart/form-data" method="post">
    <p id="diag"></p>
    <p>Choose Photo: <input type="file" name="submitfile" id = "submitfile" />
    <input type="button" value="Send" onclick="go();" /></p>
    </form>
</body>
</html>

Answer 1

我们现在已经了解了两个问题，一个是https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15中描述的移动Safari的内存限制。这可以通过将图像的一部分添加到画布而不是一次性完成来克服。下一个限制是移动safari缩放生成的画布图像的问题。

使用优秀的百万像素图像渲染库@ https://github.com/stomita/ios-imagefile-megapixel可以避免这两个问题。

Answer 2

据我所知，脚本甚至没有在IPad上工作

为什么在iPhone上画布上下文drawImage失败

2 个答案: