2

I have a below script, its working in my windows browser. but this code does not work in Epub ebook (in my iPad iBooks)

<canvas id="e" width="177" height="113"></canvas>
<script>
    var canvas = document.getElementById("e");
    var context = canvas.getContext("2d");
    var myImg = new Image();
    myImg.src = "../Images/box.jpg";
    myImg.onload = function() {
        context.drawImage(myImg, 0, 0); 
    };
</script>
Cerbrus
  • 70,800
  • 18
  • 132
  • 147
karthi
  • 33
  • 3

2 Answers2

0

Yes, that’s correct. It seems iBooks supports a lot of canvas, but not the drawImage function. I submitted this to Apple a month or two ago and have yet to receive a response as to whether this is a bug or expected behavior. It’s possible there’s some security reason this doesn’t work, but that would seem odd considering it does in mobile Safari.

Derrick Schultz
  • 1
0

First, a question to Derrick Schultz. How did you submit a bug report to Apple?

Well, here's my own findings.

Platform: iPad iBooks. EPUB. Javascript.

Canvas. drawImage() function.

Does not work. Not even when the page is "refreshed" (or re-paginated? By rotating the iPad). This solution is a complete no-go.

A previous solution now seems to be the only partial workaround.

So, yes. Canvas and drawImage() does not work in iPad.

Hidden elements, rendered onscreen first

I created elements for all the images I wanted to display via interactivity (Javascript).

Critical step. I ensured that all images are rendered (visible) onscreen first. I had to do a setTimeout() for this.

Question: What is the iBooks event that lets me know all images are rendered onscreen? windows.onLoad doesn't work. Even onLoad for all the individual images doesn't work.

I then hid (display: none) all images, and displayed them upon user input.

Works.

The only problem is that big pictures that don't all fit onscreen (because I have to display them all first) won't work. They are not rendered onscreen. You can verify this theory by turning on Scrolling View on iBooks. When Scrolling View is on, all images, no matter how big, can be rendered onscreen.

PS: Wow. Stackoverflow does not allow comments (to seek clarification) on answers (need 50 reputation points). But it allows me to post an answer?