Рисование выбранной фотографии на холст с помощью Javascript

Я использую веб-страницу ниже, чтобы нарисовать фотографию, выбранную с iPhone, на холст, чтобы впоследствии ее можно было загрузить на веб-страницу поверх ajax. Код также имел бы понижающую дискретизацию, но я пропустил это, чтобы сделать его более простым.Рисование выбранной фотографии на холст с помощью Javascript

Этот код отлично работает на Mac OSx в Firefox и Safari, но при использовании с iPhone он не так, когда вы выбираете фотографию из своей библиотеки iPhone или делаете снимок. Фотография на холсте имеет неправильное соотношение сторон и перевернута. НО, если вы импортируете фотографию с iPhone на свой Mac, а затем вернете ее на телефоне с iTunes, эта фотография, когда выбрано, будет отлично! Почему бы это было так, я думаю, что это может быть связано с чем-то, когда изображение поворачивается после его импорта на Mac.

В основном я пытаюсь написать сценарий, чтобы пользователь мог сфотографироваться с iPhone, фотография сбрасывается с использованием холста и javascript, а затем загружается через ajax. Но проблема в том, что фотография на холсте не получается сразу, когда вы делаете свежую фотографию.

Первое изображение = правильное Второе изображение = некорректный

Canvas at top is correct Canvas here is incorrect, wrong aspect ratio, upside down, canvas has red background Холст Унесенные Неправильный

<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>

источник

2014-01-07 Tim Jones

ваш код выглядит хорошо ...

Что происходит с этим кодом?

я не могу проверить КСН 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/

источник

2014-01-07 16:19:51 cocco

Нет. Я боюсь, что это делает то же самое на iOS 7, результирующее изображение перевернуто и, что более важно, не имеет правильной высоты, оно выглядит сплющенным –

Рисование выбранной фотографии на холст с помощью Javascript

ответ

Смежные вопросы