DataURL не возвращает значение

Question

Я создал функцию, которая хранит DataURI изображения в локальном хранилище.

Данные хранятся отлично в локальном хранилище, но если я попытаюсь получить значение из функции i.e. return, то я получаю значение «undefined». Возможно, функция возвращает значение даже до преобразования в dataURL.

Вам нужна ваша помощь.

Вот мой код:

function getImageDataURL(local_name,w,h,i){  
var data, canvas, ctx; 
var img = new Image(); 
img.onload = function(){  
    canvas = document.createElement('canvas'); 
    canvas.width = w; 
    canvas.height = h; 
    ctx = canvas.getContext("2d"); 
    ctx.drawImage(img,0,0,w,h); 
    try{ 
     data = canvas.toDataURL("image/png"); 
     localStorage.setItem(local_name,data); 
    }catch(e){ 
     console.log("error "+e) 
    } 
} 
try{ 
    img.src = i; 
}catch(e){} 
return data; 

}

Answer 1

Проблема заключается в том, что вы принимаете асинхронное значение и пытаетесь вернуть его синхронно. img.onload называется способ после возвращения функции. Общий шаблон в JavaScript, чтобы передать функции другой функции для вызова, когда его сделали:

function getImageDataURL(local_name, w, h, i, callback) {  
    var data, canvas, ctx; 
    var img = new Image(); 
    img.onload = function(){  
     canvas = document.createElement('canvas'); 
     canvas.width = w; 
     canvas.height = h; 
     ctx = canvas.getContext("2d"); 
     ctx.drawImage(img,0,0,w,h); 

     callback(canvas.toDataURL("image/png")); 
    } 
    img.src = i; 
} 

getImageDataURL('image', 100, 100, 'image.png', function (data) { 
    localStorage.setItem(local_name, data); 
    console.log(data); 
}); 

Одна из проблем, вы можете столкнуться функция безопасности между доменами. Если вы нарисуете изображение из чужого домена (то есть другого, отличного от страницы с JavaScript), оно «испортит» холст, и вы больше не сможете получить доступ к данным изображения, используя toDataURL.

Чтобы обойти это, вам нужно будет получить удаленный сервер для реализации одобрения CORS или запуска прокси-сервера, чтобы он выглядел как изображение поступает с вашего собственного сервера.