WeChat에 사진을 찍고 업로드하는 기능을 구현하기 위한 HTML5에 대한 자세한 설명

이 기사에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!