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

Question

我正在尝试使用数据URI在canvas元素中绘制图像。我正在使用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 }}"

这给了我最后一行的javascript错误“SyntaxError：unterminated string literal”。我读到这个错误通常是因为换行而发生的。在检查页面源时，看起来在那里有换行符：

然后我尝试删除换行符：

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...
----------------------------------^

我是否需要进行某种逃避，如果是这样，我该怎么办呢？

更新

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

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元素的大小，这似乎不是问题。

更新＃2

原来画布尺寸是个问题。 canvas元素的宽度和高度需要大于或大于图像的宽度和高度，我在创建Image对象时没有设置。接受的答案和json.dumps（"警告）都可以解决原始问题。

Answer 1

我这样做：

img.src = "1234 ... 56789" + //
   "01234567 ... 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 %}
    "";

但是你必须事先在每个元素中设置包含100个字符的图像数据块的photo_data_lines数组。 （或者无论你想要多长时间。）