이 기사에서는 주로 WeChat 촬영 및 사진 업로드 기능의 HTML5 구현, HTML5 Canvas 휴대폰 촬영 구현 및 사진을 로컬로 압축하고 업로드할 때 발생하는 문제에 대한 해결책을 소개합니다.
위챗용 HTML5 사진 업로드 기능을 만들었는데 문제가 많았네요...
프런트엔드 코드
$(':file').on('change',function(){ var file = this.files[0]; var url = webkitURL.createObjectURL(file); /* 生成图片 * ---------------------- */ var $img = new Image(); $img.onload = function() { //生成比例 var width = $img.width, height = $img.height, scale = width / height; width = parseInt(800); height = parseInt(width / scale); //生成canvas var $canvas = $('#canvas'); var ctx = $canvas[0].getContext('2d'); $canvas.attr({width : width, height : height}); ctx.drawImage($img, 0, 0, width, height); var base64 = $canvas[0].toDataURL('image/jpeg',0.5); //发送到服务端 $.post('upload.php',{formFile : base64.substr(22) },function(data){ $('#php').html(data); }); } $img.src = url; });
백엔드 코드
$base64 = $_POST['formFile']; $IMG = base64_decode( $base64 ); file_put_contents('1.png', $IMG );
실제 테스트:
PC 버전
Chrome 버전 29, 업로드 성공, 원본 이미지 3M, 압축 1024* 비율, 약 250kb 통과!
모바일 단말기
안드로이드 버전 4+, WeChat, 업로드 클릭 시 응답 없음, 모바일 브라우저에서 열고 업로드, 약 3M- 촬영, 압축 1024* 비율, 약 3M-, 전혀 압축이 없습니다! ! ! 실패했습니다!
iphone4 및 4s 버전 6+ WeChat, 촬영 약 3M, 1024* 비율로 압축, 약 250kb 통과!
iphone5 버전 6+ WeChat, 캔버스 변형 생성. 실패했습니다!
요약: 시스템 수준 BUG, 해결책 없음... 이제 어떻게 해야할지 모르겠습니다...
- ---- -------- 후속 보고서 2013년 9월 12일---- ---- -------------------
훌륭한 분이 작성한 JavaScript를 찾아보세요. jpg 컴파일을 위한 플러그인, javascript_jpeg_encoder.
안드로이드가 이미지를 압축할 수 없는 문제를 해결하려면 이 방법을 사용하세요.
현재 시스템 수준 BUG가 2개 남았습니다.
1. WeChat 안드로이드 버전은 업로드 제어 입력 스타일=파일에 응답할 수 없습니다.
2. iPhone5가 캔버스를 생성하지 못하고 사진이 왜곡됩니다.
-------------------------------------------- 팔로우- up 보고서 2 2013년 10월 10일------------------------------- ----
iPhone5+의 화면 왜곡 문제를 해결한 ios-imagefile-megapixel 플러그인도 있습니다.
현재 시스템 수준 BUG가 1개 남았습니다.
WeChat 안드로이드 버전은 업로드 제어 입력 스타일=파일에 응답할 수 없습니다.
------------------------- - ------------- 후속보고서 3 2014년 5월 16일--------------- -----
현재 모든 문제가 해결되었습니다. 플러그인이 필요한 경우 플러그인을 다운로드할 수 있습니다. 그런데 시간이 참 빨리 가네요.
위 내용은 WeChat에 사진을 찍고 업로드하는 기능을 구현하기 위한 HTML5에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!