导致Javascript中语法错误的数据URI

我正在尝试使用数据URI在画布元素中绘制图像。我正在使用Django并将一个包含照片base64编码的变量传递给模板。过去，我是这样使用的：

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

这在最后一行给出了javascript错误“SyntaxError:unterminated string literal”。我读到这个错误通常是因为换行。检查页面源时，其中似乎有换行符：

因此，我尝试删除换行符：

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

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

现在，当我调用removeBreaks时，出现了一个新的错误。“SyntaxError:标识符紧跟在数字文字之后启动”

我需要做些什么逃跑的事吗？如果是，我该怎么做

更新

我尝试了评论和答案中的所有建议。到目前为止，最接近工作的事情是做

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

在Javascript方面。如果我不替换

“

s，则图像根本不会显示，当我确实删除它们时，仅显示图像的前三分之一。我尝试调整画布元素的大小，这似乎不是问题所在

更新#2

原来画布大小是问题所在。画布元素的宽度和高度必须与图像的宽度和高度一样大或更大，而我在创建

图像
对象时没有设置图像的宽度和高度。接受的答案和json.dumps（带有
“
警告）努力解决原来的问题。
我是这样做的：

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

与我共事的一些人喜欢把
+
放在行的前面，声称它更容易阅读

假设您有图像数据，base64编码为字符串。一种类似于伪C/Java/Javascript的语言会有这样的代码（因为我不懂Python）：

但是，您必须预先在每个元素中设置包含100个字符的图像数据块的
photo\u data\u line
数组。（或者，不管你想要的块有多长。）
试试
removeBreaks（{{photo_data}}”）我这样做了，这再次出现了“unterminated string literal”错误。您必须转换该文本块，以便将真正的换行符替换为
\n
-一个反斜杠和一个“n”，这是JavaScript希望在字符串中编码换行符的方式。您必须在Django端而不是JavaScript端执行此操作。请尝试使用JSON编码器函数对图像数据进行编码。然后将数据URL头添加到该URL头之前。类似于
img.src=“data:image/jpg；base64，”+{{json.dumps（photo_data）}可能（我不是Python程序员）。您的多行数据字符串导致语法错误。您希望JavaScript通过将其传递给JavaScript函数来清理语法错误的字符串。该JavaScript函数无法运行，因为其调用中存在语法错误（由多行字符串引起）。相反，您必须在生成JavaScript字符串的服务器端代码中解决此问题。Django是一个将线路中断放在首位的系统；Django肯定有一些功能来消除它们吗？在本例中，图像数据不是以文本形式存在的，而是以Python字符串（或类似的形式）存在的。正在生成JavaScript。让Python从图像中写入100个字符，然后
“+/\n\t”
，使其正确写入JavaScript。您正在使用Python编写Javascript，它必须是有效的。是的，这是可行的，但我打赌Python JSON编码器会将嵌入的换行符转换为
\n
转义符。因为这是一种简单的方法，可以使字符串净化以包含在Javascript源代码中。任何语法上有效的JSON都是有效的JavaScript。。。您是否希望在base64图像渲染中包含时髦的字符？字符内容非常有限。
var photo_data = removeBreaks(/9j/4AAQSkZ...
----------------------------------^

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

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

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

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";

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