2

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

为什么这段代码可以在 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>
4

2 回答 2

2

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

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

于 2013-09-05T02:08:12.430 回答
-2

据我所知,上面给出的脚本甚至不能在 iPad 上运行

于 2015-11-19T07:52:57.437 回答