为什么画布上下文drawImage在iPhone上失败
Why does canvas context drawImage fail on iPhone
目标是让用户选择在图像和画布元素上显示的照片。
为什么这个代码可以在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>
我们现在了解到两个问题,一个是移动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.
据我所知,给定的Script甚至不适用于IPad
相关文章:
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- 当json解析空响应时,Whatwg-Fetch失败,我该如何防止它
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- JsFiddle在分叉后描述失败
- 可以在响应时隐藏iphone上的“播放”按钮以进行视频播放
- iPhone:固定位置潜水不可见
- 为什么不'当单元测试出现解析错误时,我的因果报应测试会失败
- 当一些承诺失败时,如何继续使用$q.all()
- 失败:等待Protractor与页面同步时出错:“”;在窗口上找不到角度”;
- 在Jquery中单击传播失败
- 网页上失败的javascript会导致所有其他脚本失败
- 带有对象解析的响应javascript ajax失败
- Javascript在IPhone中不起作用
- 一台特定计算机的Ajax请求数据未定义/失败
- iPhone img 加载失败
- 为什么画布上下文drawImage在iPhone上失败
- 如果设备屏幕关闭,Ajax调用将在iPhone上失败
- 媒体查询在iPhone 5上失败
- 为什么我的JSON.parse()在iPhone上失败了?
- 从智能手机(iPhone)加载访问url的资源失败