Данные URI, вызывающие ошибки синтаксиса в Javascript

Question

Я пытаюсь нарисовать изображение внутри элемента canvas, используя URI данных. Я использую Django и передаю в шаблон переменную, содержащую кодировку base64 фотографии. В прошлом я использовал это так:

<img src="data:image/jpg;base64, {{ photo_data }}"> 

Это прекрасно работает. Теперь я хочу это заменить:

<canvas id="canvas"></canvas> 

и использовать javascript для создания изображения на холсте. Я попробовал код из this answer:

var canvas = $('#canvas'); 
var ctx = canvas.getContext('2d'); 
var img = new Image; 
$(img).load(function(){ 
    ctx.drawImage(img, 0, 0); 
}); 
img.src = "data:image/jpg;base64, {{ photo_data }}" 

Это дает мне ошибку яваскрипта «SyntaxError: незавершенная строка» на последней строке. Я читал, что эта ошибка обычно происходит из-за разрывов строк. После проверки исходного кода страницы это выглядит как есть разрывы строк там:

Итак, я попытался удалить разрывы строк:

function removeBreaks(data){ 
    return data.replace(/(\r\n|\n|\r)/gm, ""); 
} 

var photo_data = removeBreaks({{ photo_data }}); 

Теперь я получаю новую ошибку, когда я звоню removeBreaks. «SyntaxError: идентификатор начинается сразу после числового литерала».

var photo_data = removeBreaks(/9j/4AAQSkZ... 
----------------------------------^ 

Есть ли какое-то ускорение, которое мне нужно сделать, и если да, то как бы я это сделал?

Update

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

photo_data = json.dumps(<base64 encoded image file>) 

на стороне Django и

var photo_data = "{{ photo_data }}".replace(/"/g,""); 
img.src = "data:image/jpg;base64, " + photo_data; 

на стороне Javascript. Изображение не отображается вообще, если я не заменяю " s, и когда я удаляю их, отображается только верхняя треть изображения. Я попытался изменить размер элемента canvas, что, похоже, не является проблемой.

Update # 2

Оказывается размер холста был вопрос. Ширина и высота элемента холста должны быть такими же большими или большими, как ширина и высота изображения, которые я не устанавливал, когда я создал объект Image. Как принятый ответ, так и json.dumps (с предостережением ") работают для решения исходной проблемы.

Answer 1

Я делаю это так:

img.src = "1234 ... 56789" + // 
    "... 7890" + // 
    ..... 
    "67879878907890"; 

Некоторые люди с которыми я работаю, как поставить + на передней линии, утверждая, что его легче читать.

Предположим, у вас есть данные изображения, base64, закодированные в строке.Этакий псевдо C/Java/JavaScript, как язык будет иметь код что-то вроде этого (так как я не знаю, Python):

String image64 = ... 
String output = "img.src = \"data:image/jpg;base64, "; 

for (int i = 0; i < image64.length ; i += 100) { 
    if (i > 0) { 
     output += "\" + // \n \""; 
    } 
    if (i + 100 < image64.length) { 
     output += image64.substring(i, i+100); 
    } else { 
     output += image64.substring(i); // this gets the rest 
    } 
} 
output += "\";\n"; 

Затем вы пишете значение output туда, где когда-либо вы ставите JavaScript.

Теперь быстрый взгляд на Django и Python материал заставляет меня подозревать, что это будет выглядеть примерно так в шаблоне:

img.src = "data:image/jpg;base64, " + // 
{% for line in photo_data_lines %} 
    "{{ line }}" + // 
{% endfor %} 
    ""; 

Но вы должны настроить photo_data_lines массив с 100 символов ломти данные изображения в каждом элементе заранее. (Или, как долго вы хотите куски.)