Javascript 为什么canvas context drawImage在iPhone上失败
目的是让用户选择在图像和画布元素上显示的照片 为什么这段代码可以在Firefox、Chrome、IE、iPad上运行，而不能在iPhone上运行？在iPhone3GS或iPhone5上，画布（红色边框）显示为空白，尽管大小正确 它似乎确实适用于iPhone屏幕截图，但不适用于照片。网络检查员什么也没给我们Javascript 为什么canvas context drawImage在iPhone上失败,javascript,ios,html,image,canvas,Javascript,Ios,Html,Image,Canvas,目的是让用户选择在图像和画布元素上显示的照片 为什么这段代码可以在Firefox、Chrome、IE、iPad上运行，而不能在iPhone上运行？在iPhone3GS或iPhone5上，画布（红色边框）显示为空白，尽管大小正确 它似乎确实适用于iPhone屏幕截图，但不适用于照片。网络检查员什么也没给我们 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="width=devic
<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>
html，正文{字体大小：120%；}
#diag{font系列：'Courier New'；}
img{边框：2px纯蓝色；}
画布{边框：2px纯红；}
var reader=new FileReader（）；
var-prev；
函数go（）{
prev=新日期（）；
diag（“”）；
diag（“开始”）；
var imgFile=document.getElementById（'submitfile'）；
if（imgFile.files&&imgFile.files[0]）{
reader.onloadend=函数（）{
diag（'reader.onloadend'）；
diag（'reader.result.length='+（reader.result.length/1024.0/1024.0）.toFixed（4）+“mb”）；
var img=新图像（）；
img.onload=函数（）{
诊断（'img.onload'）；
var cvs=document.createElement（“画布”）；
var ctx=cvs.getContext（“2d”）；
诊断（“图像宽度：+此宽度”）；
诊断（“图像高度：+此高度”）；
cvs.width=此.width；
cvs.height=该高度；
diag（“CV.width:+cvs.width”）；
诊断（“cvs.高度：”+cvs.高度）；
ctx.drawImage（this，0，0）；
ctx.font='18pt Calibri'；
ctx.fillStyle='红色'；
ctx.fillText（“画布副本”，100100）；
document.body.appendChild（cvs）；//新建画布
document.body.appendChild（this）；//img元素
diag（'ctx.drawImage'）；
};
img.src=reader.result；
}
}
reader.readAsDataURL（imgFile.files[0]）；
diag（'reader.readAsDataURL'）；
}
功能诊断（msg）{
var now=新日期（）；
var ms=now.getTime（）-prev.getTime（）；
var current_diag_text=document.getElementById（“diag”）.innerHTML；
var new_diag_text=ms+“ms”+msg+“
”+当前_diag_text；
如果（消息==''）{
document.getElementById（“diag”）.innerHTML=''；
}否则{
document.getElementById（“diag”）.innerHTML=new\u diag\u text；
}
上一个=现在；
}
选择照片：
这两个问题都可以通过使用优秀的百万像素图像渲染库来避免。据我所知，上述脚本甚至不能在IPad上运行