2

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

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

这工作正常。我现在想用这个替换它：

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

并使用 javascript 在画布中绘制图像。我尝试了这个答案的代码：

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：未终止的字符串文字”。我读到这个错误通常是由于换行符而发生的。在检查页面源时，它看起来像是有换行符：

在此处输入图像描述

所以然后我尝试删除换行符：

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

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

现在，当我调用 removeBreaks 时，我遇到了一个新错误。“语法错误：标识符在数字文字之后立即开始”。

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

我需要做某种逃避，如果是，我该怎么做？

更新

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

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

在 Django 方面和

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

在 Javascript 方面。如果我不替换 s，图像根本不会显示&quot;，当我删除它们时，只显示图像的前三分之一。我尝试调整画布元素的大小，这似乎不是问题。

更新#2

原来画布大小是问题所在。画布元素的宽度和高度需要与图像的宽度和高度一样大或更大，这是我在创建Image对象时没有设置的。接受的答案和 json.dumps （带有&quot;警告）都可以解决原始问题。

4

1 回答 1

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

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

于 2013-07-25T19:50:11.737 回答