Преобразование локального изображения в base64 с использованием JavaScript

Я делаю проект в html, только javascript. У меня есть функция, которая конвертирует изображение в base64, см. Код ниже.

function getBase64Image()
{
    p = document.getElementById("picField").value;
    img.setAttribute('src', p);
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    var r = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    base64 = r;
    alert(base64);
}

но проблема в том, что когда я развернул свой веб-сайт, значит, когда я поместил свой html-файл на iis, он не работает, значит, в локальной файловой системе он показывает полный формат base 64, как iVb...., но на iis он дает код base64 как просто "база". так почему он не работает на iis, я не знаю, поэтому, пожалуйста, помогите мне и пришлите мне html-файл, который будет работать и на iis.

Источник

1 ответ

Я вполне уверен, что у вас есть проблема с той же политикой происхождения.

Когда вы запускаете свою страницу в IIS, она запускается в другом контексте, нежели локально: вместо file:// URL, он работает на http:// один.

То, что вы пытаетесь сделать, это получить локальный файл изображения и загрузить его на холст на удаленном сайте. Это невозможно при использовании традиционного JavaScript из соображений безопасности. (Я не уверен, как это работает даже на местном уровне - в моем понимании, это не должно. Но в любом случае.)

Вам нужно будет использовать файловый API HTML 5, который разрешает JavaScript прямой доступ к локальным файлам. Я посмотрю, могу ли я выкопать некоторые связанные с этим вопросы.

Обновление: это должно помочь:

Источник
Другие вопросы по тегам