IMG未显示编码为base64字符串的PNG图像



我有一个Apache Cordova应用程序,该应用程序接收了在基本64字符串中编码的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页面,它将正确显示图像,但是在应用程序中,图像不起作用。

使用以下代码在.NET 4.0中开发的服务器端网络中,将图像编码在base64字符串中:

Convert.ToBase64String(image)

其中图像是字节数组。

我想念什么吗?

这很可能是您的应用程序中的内容安全策略(CSP)问题,浏览器的某些浏览器/版本对浏览器的尊重有所不同,不允许显示Base64编码的图像。

这是我的CSP标头(您也可以执行元标记),它可以对我有效,而它以前不起作用: content-security-policy:default-src 'self'; script-src 'self' ; style-src 'self' 'unsafe-inline' ; img-src * data:; font-src * data:;

这是将图像转换为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;
    }
}

此代码如果知道图像类型(JPG),则将图像'previewimage'转换为流,然后转换为base64:

        var imageStream = new MemoryStream();
        previewImage.Save(imageStream, ImageFormat.Jpeg);
        var base64ImageString = "data:image/jpg;base64,"
            + Convert.ToBase64String(imageStream.ToArray(), 0, imageStream.ToArray().Length);

最新更新