Hello. I am trying to add Anki note creation support to my app, and I want to add images to the notes. Checking the url-scheme api, this is only supported for cloud based images but not local images. Would it be possible to add support for Base64 images through the add note parameters?
Thank you.
I’ve added it to the todo list to investigate.
Hi dae! Thank you for the quick reply. I did a little research before posting the suggestion to see if it was technically possible to perform this through url scheme, I should have posted it along with my suggestion!.
I first checked if there was a size limit for url schemes. It seems like there are no limits documented, but in swift core, there is this size check which it seems the limit is 2GB.
// Make sure the URL string isn't too long.
// We're limiting it to 2GB for backwards compatibility with 32-bit executables using NS/CFURL
if ( (urlStringLength > 0) && (urlStringLength <= INT_MAX) )
{
...
Knowing this, I tried to create a note using anki’s url-scheme, using as field value a base64 image string. I did two tests, the first one with a 180KB image and another one with a 5MB image and for both cases the note was created successfully.
For the 180kb image, the edit note screen (even tho a bit laggy) opened correctly
I added start and end string to the base64 string to check that the whole length was being sent correctly.
For the 5mb image, note editor didn’t display (It was frozen with a white screen), but when repping and checking the card’s back side, the base63 text was shown.
Also, when transforming an UIImage to base64 by using .pngData()?.base64EncodedString(options:), the returned string doesn’t contain its format at the beginning like the ones present when using CSS (something like data:image/jpeg;base64), so maybe developers should be encouraged to prepend some kind of flag to let anki know that the field contains a base64 image and it can be parsed correctly:
...&fldImage=base64;<base64-string>
After retrieving the base64 string, Data’s init(base64Encoded:options:) can be used to initialize the image’s data and then UIImage’s init(data:) to initialize the UIImage from it.
I hope this info is helpful!.
Useful info, thank you - I’ve made a note.
After I realised that fields in anki support HTML I tried creating a note where its field value was a <img /> tag where its source is a base64 image and it was exported correctly. After Syncing I checked ankiWeb and anki desktop to see if the created note’s image was shown and it was displayed correctly but the file is not present in the media folder.
Apart from the file not being copied to the media folder, could there be any other drawbacks of this approach?
One drawback could be hitting the maximum collection size pretty quickly, depending upon how many and how large the images you are embedding as base64 are.
https://faqs.ankiweb.net/are-there-limits-on-file-sizes-on-ankiweb.html
I see! Thank you @shallash.
I’d assumed your request was to write the base64 images into the media folder, as they’re not appropriate for storing in fields.
AnkiMobile doesn’t validate that media references exist, so if you have some other way of copying the files into your media folder later, that should work too.
Yes, this is correct. The above attempt was just me trying stuff, but as you comment, storing the image as a field is not appropriate. Users of apps that export to AnkiMobile would expect the files to be detected as media.
is there a possible ETA for this feature?
It’s on the todo list, and will hopefully make the next release.
Sorry it took so long. This will be ready to test in the next beta: Beta Testing - AnkiMobile Manual
That is awesome news! Thank you very much!
I’m getting the same issue. There’s a image in base64 that i create from Desktop, then in Anki Droid it won’t load.
Your issue is different. Please report it in the AnkiDroid section for more visibility.
