Embedded Base64 Image Won't Display in Dolphin or Android Stock Browser
I have been googling this problem all afternoon and can't seem to find any search anywhere where the words Dolphin and Base64 Image or Data URL appear together. But when I find articles about just embedding base64 images in general, they pretty much all 开发者_Go百科say it works on almost every browser but IE. Of course I can't just view the darn page source or any error consoles on the device either (Samsung Galaxy Tab Gingerbread) to see what the page is interpreting. All I get are ? where the image should be. Works on Chrome and Opera, but neither Dolphin or the stock browser work.
Basically, I have a third party signature pad control whose signature image is returned to me as a base64 encoded string. I am then taking that base64 encoded string, converting it toDataURL and assigning it as the src to my img control. Works like a charm on Chrome and Opera, but not on either of the mobile browsers I need it to work on.
var canvas = signaturestr.toDataURL("image/png") //Have also tried jpg and bmp
$("#image").attr("src", canvas)
This gives me ? where the images should be. So either I need a way to take a data url and make it acceptable to these browsers, or I need to be able to use the raw base64 code to generate an image. Also important to note, this is an offline application and I need all solutions to be in javascript or jquery.
Edit: Found that base64 images from other websites (including avatars from stackoverflow forums) do appear on these browsers. Have tried reducing the size of my image, and still no luck. Still get the alt text and ?. Size is definitely not the issue. Reduced my image to a smaller size than that of the avatar that works. Genuinely at a loss as to why this image doesn't work on these browsers. Seems like the exact same thing as the images that work.
I had a similar problem and found this:
When you attempt to load a JPEG
file, the dataURL
is wrong... it starts with data:base64
instead of data:image/jpeg;base64
. I got around the problem with:
var image = new Image();
image.onload = doSomethingElse();
image.src = myDataURL.replace('data:base64', 'data:image/jpeg;base64');
PNG files seem to work ok though.
I tested using Android 4 (Ice Cream Sandwich) and it works great - even loads large photos straight from the device.
Was able to simply redisplay captured signature on new instance of disabled control rather than converting to an image and displaying that way. Works just the same.
精彩评论