IMG不显示编码为Base64字符串的PNG图像

Question

我有一个Apache Cordova应用程序，该应用程序接收以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页面，它将正确显示该图像，但是在应用程序中，该图像无法正常工作。

由.NET 4.0中开发的服务器端Web服务使用以下代码将Image编码为Base64字符串：

Convert.ToBase64String(image)

其中image是字节数组。

我想念什么吗？

Answer 1

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

Answer 2

如果您知道图像类型（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);

Answer 3

这很可能是应用程序中的内容安全策略（CSP）问题，某些浏览器/版本的浏览器对此有所不同，不允许显示base64编码的图像。

这是我的CSP标头（您也可以做一个元标记），它在以前不起作用时允许它为我工作： content-security-policy:default-src 'self'; script-src 'self' ; style-src 'self' 'unsafe-inline' ; img-src * data:; font-src * data:; content-security-policy:default-src 'self'; script-src 'self' ; style-src 'self' 'unsafe-inline' ; img-src * data:; font-src * data:;