Телефонная щель | преобразование imageuri в base64 | получение черного изображения после загрузки его на сервер с помощью jquery

Мне нужна действительная строка base64 из imageuri. Я использую для этого код ниже, но после загрузки на сервер он получает черное изображение.

function encodeImageUri(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;
}

Я также пробовал другие варианты, но не получил надежного решения для получения действительных данных изображения base64. Я не хочу загружать изображение с помощью метода передачи файлов. Я хочу преобразовать imageuri в простую строку base64. Пожалуйста, предложите мне конкретный ответ на то же самое.

Спасибо


person Pankaj Bhandarkar    schedule 16.03.2017    source источник
comment
Вам нужно удалить все до и включая ,, прежде чем сбрасывать содержимое в изображение на стороне сервера. Что, я думаю, вы пропустили. См.: stackoverflow.com/questions /15153776/ Хотя PHP, но даст достойную идею   -  person Akshay Khandelwal    schedule 16.03.2017
comment
он правильно работает для метода getPicture с navigator.camera.DestinationType.DATA_URL, но я не могу преобразовать uri изображения в строку base64.   -  person Pankaj Bhandarkar    schedule 16.03.2017


Ответы (1)


Обратите внимание, что я не тестировал это в PhoneGap.

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

Существуют различные способы справиться с этим; одна из возможностей — перейти к использованию метода success() для обработки возвращаемого значения, который будет вызываться после загрузки и отрисовки изображения:

function encodeImageUri(imageUri, success)
{
     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);
       success(c.toDataURL("image/jpeg"));       
     };

     img.src=imageUri;
}

Затем вам нужно будет вызвать encodeImageUri с функцией, которая будет обрабатывать конечный результат, например:

encodeImageUri(" < url > ", function (data) {
    console.log(data);
});

В зависимости от модели безопасности, которую использует PhoneGap, вам, возможно, придется обратить внимание на проблемы, связанные с CORS (см. Испорченные холсты нельзя экспортировать).

person Adrian Wragg    schedule 16.03.2017
comment
Имейте в виду, что это ни в коем случае не идеальное решение - в идеале, например, здесь также должен быть обработчик ошибок. - person Adrian Wragg; 16.03.2017