JS/PHP Base64 изображение появляется черным

Question

Итак, у меня есть гибридное мобильное приложение на основе AngularJS, и я пытаюсь отправить кодированное изображение Base64 на веб-службу PHP, ведьма ввела его в электронную почту (с помощью PHPMailer). Только проблема - изображение появляется как черный квадрат каждый раз. Я пробовал так много разных способов кодирования/декодирования, но ничего не работает. Вот мой код:

JS:

encodeImageUri: function(imageUri) 
     { 
      var c=document.createElement('canvas'); 
      var ctx=c.getContext("2d"); 
      var img=new Image(); 
      img.onload = function(){ 
       c.width=this.width; 
       c.height=this.height; 
       ctx.drawImage(img, 0,0); 
      }; 
      img.src=imageUri; 
      var dataURL = c.toDataURL("image/jpeg"); 
      return dataURL; 
      } 
      //send dataURL with $http.post() 

PHP:

$postdata = file_get_contents("php://input"); 
    if (isset($postdata)) { 
     $request = json_decode($postdata); 
     $imageData = $request->imageData; 
     $body = ""; 
     if($imageData != ""){ 
      $imageHTML ="<img src=\"".$imageData."\"/>"; 
      $body = $body.$imageHTML; 
     } 
    } 
    //send email with $body with PHP mailer.. 

Вот $ ImageData:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCACWASwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8qqKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/2Q== 

Помогите пожалуйста?

Редактировать: Оказывается, проблема заключалась в кодировании. Я изменил параметры камеры cordova на destinationType: Camera.DestinationType.DATA_URL, ведьчице не требуется кодировка. Работал как шарм.

Answer 1

Короче говоря, URI данных в электронной почте стоит избегать. PHPMailer имеет встроенный конвертер из URI данных во встроенные изображения как часть функции msgHTML, поэтому попробуйте использовать это. С другой стороны, выполнить преобразование самостоятельно - PHP has a built-in data converter вы можете использовать:

$rawimagedata = file_get_contents($imagedata); 
$mail->addStringEmbeddedImage($rawimagedata, 'image1', 'myimage', 'base64', 'image/png'); 

Вы можете обнаружить, что msgHtml() проще, так как она заботится о именовании все и настройки идентификаторов контента.

Что @charlietfl сказал отчасти верно - многие клиенты не поддерживают URIs данных, но почти все поддерживают встроенные изображения - в течение многих лет он был только так, что изображения были поддержаны!