使用Javascript將選定的照片繪制到畫布上
[英]Drawing selected photo to canvas with Javascript
問題描述
我正在使用下面的網頁將用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>
1 個解決方案
解決方案1
1 2014-01-07 16:19:51
您的代碼看起來不錯...
此代碼會怎樣？
我無法在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
全屏ios7
用JavaScript在畫布上繪圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.