Question

在我的html文件中，我有一个按钮，当我按下时我想获得一个由python脚本生成的验证码图像并在html图像上显示其内容。我认为理想的方法是设置网址html图像到脚本和从脚本打印图像数据到base64但显然这不起作用，因为图像url需要一个特定的图像类型。另一种不太好的方式是使用框架而不是img标签并在python脚本上打印img，如下面的代码所示，这是我不想要的。

总结一下：如何将html图像的内容设置为服务器端脚本生成的内容。

HTML ：

<div id="phone_number">
    <input style="width:150;height:30" type="button" name="answer" value="Εμφάνιση αριθμού" onclick="this.parentNode.innerHTML='<img style=width:150 class=phone_img src=get_phone_captcha.py>'" />
</div>

Python （糟糕的方式）：

phone_number='699243324'
image = ImageCaptcha(fonts=['captcha/data/DroidSansMono.ttf'])
buf = BytesIO()
image.write(phone_number, buf)

print "<img width=150 src='data:image/png;base64,"+base64.b64encode(buf.getvalue())+"' >";

Answer 1

src应该指向一个图像文件，这实际上意味着服务器上返回图像数据的路径，但是您的脚本返回html标记，其中嵌入了数据，而不是只是图像数据：

print base64.b64encode(buf.getvalue())

只会打印生成的图片中的数据，而额外的\n可能会导致问题，这可能会或可能不会更好：

import sys

image.write(phone_number, sys.stdout)

直接将图像数据写入标准输出并将其发送回客户端。

Answer 2

<img src='data:...需要一个字符串，因此您必须在onclick（）函数中对服务器进行AJAX调用。 ...innerHTML='<img style=width:150 class=phone_img src="data:image/png....'+ajaxRet+'">'

HTML将图像的内容设置为由服务器端脚本生成的内容

2 个答案: