使用Javascript将选定的照片绘制到画布上

Question

I am using the webpage below to draw an photo selected with an iPhone to the canvas so it can later be uploaded to a webpage over ajax. 我正在使用下面的网页将用iPhone选择的照片绘制到画布上，以便以后可以通过ajax将其上传到网页。 The code would also have downsampling but I have omitted that to make it simpler. 该代码还将进行下采样，但为了简化起见，我将其省略了。

This code works fine on Mac OSx in Firefox and Safari but when used with the iPhone it goes wrong when you select a photo from your iPhone library or take a photo. 该代码在Firefox和Safari中的Mac OSx上可以正常工作，但是当与iPhone一起使用时，当您从iPhone库中选择照片或拍照时，它将出错。 The photo in the canvas has the wrong aspect ratio and is upside down. 画布中的照片的长宽比错误，并且已颠倒。 BUT if you import a photo from the iPhone to your Mac and then put it back on the phone with iTunes that photo when selected comes out perfectly! 但是，如果您将照片从iPhone导入到Mac，然后再通过iTunes重新放回手机，则所选照片会完美显示！ Why would this be, I think it might have to do with something with the image being rotated once it has been imported to the Mac. 为什么会这样，我认为一旦将图像导入到Mac后，它可能与旋转图像有关。

Basically I am trying to write a script so a user can take a photo with the iPhone, the photo gets downsampled using canvas and javascript and then gets uploaded via ajax. 基本上，我正在尝试编写脚本，以便用户可以使用iPhone拍摄照片，然后使用画布和JavaScript对照片进行降采样，然后通过ajax上传。 But the problem is the photo in the canvas doesn't come out right when taking a fresh photo. 但是问题在于，在拍摄新照片时，画布中的照片无法正确显示。

First image = correct Second image = incorrect 第一张图片=正确第二张图片=不正确

顶部的画布是正确的此处的画布不正确，宽高比错误，上下颠倒，画布背景为红色 Canvas Gone Wrong 画布走错了

    <style type="text/css">

        #theImage {
            display:block;  
        }

        #cv {
            background-color:#F00;
        }

    </style>
</head>

<body>

    <form id="pageform" method="post" enctype="multipart/form-data" action="">
        <input type="file" name="fileinput" id="fileinput"  accept="image/*"/> 
    </form>

    <canvas id='cv' width="918" height="689"></canvas>

    <img id="theImage" />

    <script type="text/javascript">

    function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#theImage').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

    function another() {

        var cv = document.getElementById('cv');
        var context = cv.getContext('2d');

        context.ImageSmoothingEnabled = true;
        context.webkitImageSmoothingEnabled = true;
        context.mozImageSmoothingEnabled = true;

        var img = document.getElementById('theImage');

        context.drawImage(img,0, 0, 918,689 );

    }

    $(document).ready(function () {

        $('#fileinput').change(function() {

            readURL(this);
            setTimeout(another,2000);

        });

    }); 

    </script>

</body>
</html>

Answer 1

your code looks good... 您的代码看起来不错...

What happens with this code? 此代码会怎样？

i can't test on ios 7 我无法在ios 7上进行测试

this has no static values... and no ImageSmoothingEnabled & appends the image on the body and not the canvas. 它没有静态值...，也没有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);
}

More info 更多信息

https://stackoverflow.com/a/17502568/2450730 https://stackoverflow.com/a/17502568/2450730

DEMO DEMO

http://jsfiddle.net/2zz76/ http://jsfiddle.net/2zz76/

fullscreen for ios7 全屏ios7

http://jsfiddle.net/2zz76/embedded/result/ http://jsfiddle.net/2zz76/embedded/result/

使用Javascript将选定的照片绘制到画布上

问题描述

1 个解决方案

解决方案1
1 2014-01-07 16:19:51

使用Javascript将选定的照片绘制到画布上

问题描述

1 个解决方案

解决方案1 1 2014-01-07 16:19:51

解决方案1
1 2014-01-07 16:19:51