Image Occlusion Enhanced [Official Support Thread]

Anki Add-ons
62

I have almost complete the very first prototype of image occlusion for Anki Ecosystem.
Feature: Image occlusion by krmanik · Pull Request #1 · krmanik/anki · GitHub

I noticed that Image Occlusion Enhanced Anki Addon generates two svg file for each label in image. I think it will be decreased by using only one original mask for questions and answer.

The solution I will implement in my image occlusion project and I think it will be useful in Image Occlusion Enhanced also.

  1. Change image src tag for svg to embed and question mask and answer mask fields can be removed.
    Or may be GitHub - iconfu/svg-inject can be used to inject svg using img src tag.
  <embed src="original-mask.svg">
  1. Change scaling and transform to fit on original image in card template.
    var ioorig = document.getElementById("io-original");
    var nw = ioorig.children[0].naturalWidth;
    var w = ioorig.children[0].width;
    var scale = w / nw;
 
    var ioo = document.getElementById("io-overlay");
    ioo.style.transform = "scale("+scale+")";
    ioo.style.transformOrigin = "0 0";
  1. Now on front side the Id (hidden) is same for one shape in original svg file. The id will be used to change fill color on front side and hidden on back side.
    Front side
    document.getElementById("2c91cccc0fa24ec4be409dfaf1cf0a55-ao-1").style.fill = "#FF6E6E"

   Back side

   document.getElementById("2c91cccc0fa24ec4be409dfaf1cf0a55-ao-1").style.display = "none"

It will decrease the sync time and storage. Also less number of files in collection.media.

4 Likes