使用Javascript将所选照片绘制到画布

我正在使用下面的网页将一张用iPhone选择的照片绘制到画布上，以便以后可以通过ajax上传到网页上。代码也会有下采样，但为了简化，我省略了它

这段代码在Firefox和Safari中的MacOSX上运行良好，但在iPhone上使用时，从iPhone库中选择照片或拍照时会出错。画布中的照片具有错误的纵横比，并且是颠倒的。但是，如果你将一张照片从iPhone导入Mac，然后用iTunes将其放回手机，那么选中后的照片会完美地显示出来！为什么会这样，我认为这可能与图像导入Mac后被旋转有关

基本上，我正在尝试编写一个脚本，以便用户可以使用iPhone拍照，然后使用画布和javascript对照片进行下采样，然后通过ajax上传。但问题是，在拍摄新照片时，画布上的照片不会正确显示出来

第一个图像=正确 第二个图像=不正确

画布出了问题

---

你的代码看起来不错

这个代码会发生什么

我不能在ios 7上测试

这没有静态值。。。无ImageSmoothingEnabled&将图像附加到主体上，而不是画布上

var MAXWidthHeight=64;
function h(e){
 var fr=new FileReader();
 fr.onload=function(e){
  var img=new Image();
  img.onload=function(){
   var r=MAXWidthHeight/Math.max(this.width,this.height),
   w=Math.round(this.width*r),
   h=Math.round(this.height*r),
   c=document.createElement("canvas");
   c.width=w;c.height=h;
   c.getContext("2d").drawImage(this,0,0,w,h);
   this.src=c.toDataURL();
   document.body.appendChild(this);
  }
  img.src=e.target.result;
 }
 fr.readAsDataURL(e.target.files[0]);
}
window.onload=function(){
 document.getElementById('fileinput').addEventListener('change',h,false);
}

更多信息

演示

ios7的全屏显示

---

不，我担心这在iOS 7上也会发生同样的事情，生成的图像是颠倒的，更重要的是没有正确的高度，看起来被压扁了

var MAXWidthHeight=64;
function h(e){
 var fr=new FileReader();
 fr.onload=function(e){
  var img=new Image();
  img.onload=function(){
   var r=MAXWidthHeight/Math.max(this.width,this.height),
   w=Math.round(this.width*r),
   h=Math.round(this.height*r),
   c=document.createElement("canvas");
   c.width=w;c.height=h;
   c.getContext("2d").drawImage(this,0,0,w,h);
   this.src=c.toDataURL();
   document.body.appendChild(this);
  }
  img.src=e.target.result;
 }
 fr.readAsDataURL(e.target.files[0]);
}
window.onload=function(){
 document.getElementById('fileinput').addEventListener('change',h,false);
}