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

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

Данные отлично хранятся в локальном хранилище, но если я попытаюсь получить значение из функции, т.е. оператора возврата, я получу «неопределенное» значение. Вероятно, функция возвращает значение еще до преобразования в 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;

}


javascript html local-storage html5-canvas data-uri
person Hiral    schedule 13.05.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в том, что вы берете асинхронное значение и пытаетесь вернуть его синхронно. 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, либо запустить прокси-сервер, чтобы изображение выглядело так, как будто изображение поступает с вашего собственного сервера.

person Casey Chu    schedule 13.05.2013