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

Question

我正在使用下面的网页将用iPhone选择的照片绘制到画布上，以便以后可以通过ajax将其上传到网页。 该代码还将进行下采样，但为了简化起见，我将其省略了。

该代码在Firefox和Safari中的Mac OSx上可以正常工作，但是当与iPhone一起使用时，当您从iPhone库中选择照片或拍照时，它将出错。 画布中的照片的长宽比错误，并且已颠倒。 但是，如果您将照片从iPhone导入到Mac，然后再通过iTunes重新放回手机，则所选照片会完美显示！ 为什么会这样，我认为一旦将图像导入到Mac后，它可能与旋转图像有关。

基本上，我正在尝试编写脚本，以便用户可以使用iPhone拍摄照片，然后使用画布和JavaScript对照片进行降采样，然后通过ajax上传。 但是问题在于，在拍摄新照片时，画布中的照片无法正确显示。

第一张图片=正确第二张图片=不正确

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

    <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

您的代码看起来不错...

此代码会怎样？

我无法在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);
}

更多信息

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

DEMO

http://jsfiddle.net/2zz76/

全屏ios7

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