IMG未显示编码为Base64字符串的PNG图像
问题描述:
我有一个Apache Cordova应用程序,它接收以Base64字符串编码的PNG图像。IMG未显示编码为Base64字符串的PNG图像
我希望这个Base64字符串成为IMG标签的来源。
据我知道,我可以如下定义一个IMG标签的来源:
<img style="display:block;" src="data:image/png;base64,BASE64_ENCODED_IMAGE”/>
所以,当应用程序接收到Base64编码字符串的标签是:
<img style="display:block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAUnSURBVFhHvZZtTFNnFMfZNNHFLPtgln2YyZYtm/PDtixzODccAVRgQgGlVmZFZdYWRNApOEHX6TppCKy86CAtKNQWSFVggEWwiFjeKQUpfQERDCAMnY7Ji962t//dtlcz/bTQ2l9ycu9znpfzv88597nXyxXSi3OOJ+QcmS9Xlr9PuzzHxZqa99QajTb3fMGsF/AK7fYc5XXK+qnpR9AaTaioUobSbs/Q2Ni4OPF08v3WW+1QNFVAIi/+lu7yDNnZ2UtyLxVO1xuuQVAstHYYOpbTXZ4hNjl5lbr3JtnRr0de8flU2u055JVVBQOTk9AM3kK+tDSWdnsGe/6V6ua/DRMT6B4aQka+xCHgkli84qpC8YZj0MtEKpUuk1ZWzxvvTqBNb0DS8RO+dr+CG3WtbPeWQccgd7OJm+LNOHLmysqvGK/b276+votT0zJijwjS9tjbyXy+t1KptIlzc/QAXrX73EpEoiCafaIQZdW1t2UVVUV8/rmldJeDhqtXuwbvjqO1rw9pItE3tNu91DU1NQ5QQYpUWoQeEsmoJ11Ed3mpj3JtUxfF0OX8jPyTJz+m3e5FUlYurO4axG9VXTha3ABO4qE1dJdXfb7o4bhUhLZU3kxm5sHXaLd7YTKZiwITMmXnVD1oN91CQ0cnkSs+x/s1K+uta51ac5txAOX1Kjk9/OWgUCgW/SLK/WF46h50o2No0/UjM1/SOUS1tcPDqKhXVVLFuIRKj3s/TiMjI0tZLNY679WrU/aG+fxRXVkK+0HUPzYGZUs7BiYmqTPhNn7PPYUfd/mDF/7ZIG97oDGGw9tGL7FwOJz9fhmp8TMFhxmoSQlAbbI3Lhz2QUuHGrU3VBDLxGjV9aHDNACxMA6VGTvQW3EK92uOgRMZlE4vs3BYkeGJk+pjeKxNw0zv75juLMB4axE0qjKoayW4XiNETUUWqivP4nbLRczUnsBccTBmSzZhT0SAgF5m4bz59ruf9lxmw2bkAJTZ9BwQ3TGYb96JeXUc5tr5mOvNw1xzCmaLNsAsDwBB2cOSMKxasSSGXmbhCEWSVcrCcNhMTgFPzWbYDVLDgK0rBKRpP8junY7AhHy94/qXLAJrP1npugA7BRkhtqc78NTIni2O4A4Bxn1UexeIEn9aRADGCkMRs43pHgGleXssdgF2s9xJh3nqAiw6KqjGKcBmiAPZG/NMgD0N+tOBiGaxNtJLuEZ22pZmkkoBaeTC8o8axH0VrI80sHRHOgXouSBvfo8ncrsAZwraMvyx/J0PP6KXcI0sAbuONHFhnjgL4q6UKsLvYP5TAXMX05kCqjDJPg4twJmC6wJfbI6Kd4+AHVu/zLKa4mCZbsKT4UyQXaEg9AdgeVBH3TNg7Y8BqduLJ/+pgepUH8jlVe4REBLkwzcPxsM8kg6beRTEkBDEpALkYyPM3VGUgF0g+7nPCSg68IV5dHTUPR+mz72/5s72UfnvCoNFnwhCl0A9fQOIUQlViKHU9keDNPCeE5Adu4agp7vO9u3RG/WX6YKz59xxpQJT5vDdZMNqiKUEOIPbLe9g0Aw93XV4PN7KK/lBzwS8aGRvlOMsIEqdOzBeGIwdjHVCerrr2P9+krh+2ns3NsOiiXC8/85doAX0bKUExIMoC4CBev85TD8Zn893778hm81eFrjBn5u8L1iW/VPQZG3eetuDFhYlJgxWLRNWUwJuZG60MfxWJ72UH9MX4XKTPggJWht3LCGs5Iwg/M6p41vVkZuDWXT3/8TL619uw7B/qo1h2QAAAABJRU5ErkJggg==" />
如果我将此图片添加到空白的HTML页面可以正确显示图片,但在应用中图片无法正常显示。
的图像是在一个Base64串通过使用以下代码开发在.NET 4.0的服务器侧web服务编码:
Convert.ToBase64String(image)
当图像是一个字节数组。
我错过了什么吗?
答
这是将图像转换为base64的工作代码。可能是你没有保存图像的格式。
public string ImageToBase64(Image image, System.Drawing.Imaging.ImageFormat format)
{
using (MemoryStream ms = new MemoryStream())
{
// Convert Image to byte[]
image.Save(ms, format);
byte[] imageBytes = ms.ToArray();
// Convert byte[] to Base64 String
string base64String = Convert.ToBase64String(imageBytes);
return base64String;
}
}
答
此代码的图像“previewImage”转换成流转换为Base64如果你知道图像类型(JPG)前:
var imageStream = new MemoryStream();
previewImage.Save(imageStream, ImageFormat.Jpeg);
var base64ImageString = "data:image/jpg;base64,"
+ Convert.ToBase64String(imageStream.ToArray(), 0, imageStream.ToArray().Length);
答
这很可能是一个内容安全策略(CSP)问题在您的应用程序中,某些浏览器/浏览器版本的浏览器尊重不同,不允许显示base64编码图像。
这是我的CSP头(你可以做一个meta标记过),允许它为我工作,当它没有工作之前:content-security-policy:default-src 'self'; script-src 'self' ; style-src 'self' 'unsafe-inline' ; img-src * data:; font-src * data:;