Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Posts: 9
Registered: ‎03-05-2011
My Device: 9800

data:image/png;base64.... - No longer works on OS5 browsers after updating to WebWorks 2.0 API

[ Edited ]

Hey all - We had an odd thing happen - We have had an app out for a couple months that gets images from a JSON web service, streamed as Base64.  We use the following to add it :

 

 

var imageNode = document.createElement("img");
imageNode.setAttribute("src", "data:image/jpeg;charset=utf-8;base64," + image);

 

Has worked wonderfully for these few months.  Today we update our WebWorks API to the 2.0, and recompile with no code changes.  On the Torch (And simulator) it works fine.  On the Bold and Storm simulators (And devices) we get red X icons where all the images should be (Like you get with an invalid image tag).

 

 

We have changed no code.  And the browsers support for this obviously didnt change, so all I can guess is that somehow the packager is doing something different here?  Anyone else see the same activity?

 

I have tried changing the encoding to other formats like GIF and PNG, and changing the format of teh JSON stream, no effect.  Yet all this still works on the 6 browser.  Help!  WW 2.0 fixed a lot of our other bugs, only to have this one now plague us :smileyhappy:

 

Thanks in advance!

 

 

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: data:image/png;base64.... - No longer works on OS5 browsers after updating to WebWorks 2.0 API

Hi rsmerker,

 

Can you add some more about how and where you are retrieving the data for the "image" variable?  Something must have changed in the 2.0 framework that is affecting the way you are retrieving that data

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 9
Registered: ‎03-05-2011
My Device: 9800

Re: data:image/png;base64.... - No longer works on OS5 browsers after updating to WebWorks 2.0 API

I did some more digging, and I dont believe it is the data (Which comes from a WCF Service).  I went as far as doing a getAttribute("src") after we do the set (So I could see the results of the data that was actually set into the structures, in case it was getting corrupted), and I compared the results of the returned byte array on both OS6 simulators and OS5, and the data that gets set is byte identical - There is *no* difference in the data.

 

I can even create a static javascript byte array with the contents of the image, and if I attempt to set the base64 data directly in the tag of an image (heck I even tried setting it as the background-image of a div using the same method) it now fails on OS5 simulators, but still works on 6.  And its officially the same hard-coded byte data. 

 

Now this makes zero sense to me either.  I cant for the life of me believe that a version of webworks packaging could possibly effect how dom image data is interpreted by a DOM element (Unless v2.0 uses a different webkit framework than the 1.5 packager did?)

 

At any rate, I will try to get a very simple hard coded code sample together to prove the outcome (as crazy as it is) and although our app ran great for months before the recompile, I will re-test it with 1.5 by uninstalling and re-installing the 1.5 bbwp.

New Contributor
Posts: 9
Registered: ‎03-05-2011
My Device: 9800

Re: data:image/png;base64.... - No longer works on OS5 browsers after updating to WebWorks 2.0 API

Tim, I successfully replicated the problem in a simple test/environment and it is indeed the WebWorks version which causes the issue.  Here is the code :

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no" />
<title>Untitled Page</title>
</head>
<body>
Welcome to the Image Test<hr />
Raw Image From File : <br />
<img id="rawImage" src="rich.jpg" />
<hr />
Base64Data Image : <br />
<img id="base64Image" src="" />
</body>

<script language="javascript">
var myImage = "data:image/jpeg;charset=utf-8;base64,/9j/4AAQSkZJRgABAgEAAAAAAAD/7gAOQWRvYmUAZAAAAAAB/+wAEUR1Y2t5AAEABAAAAB4AAP/bAEMAEAsLCwwLEAwMEBcPDQ8XGxQQEBQbHxcXFxcXHx4XGhoaGhceHiMlJyUjHi8vMzMvL0BAQEBAQEBAQEBAQEBAQP/bAEMBEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoaJjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/AABEIAGQAUAMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAADAAECBAUGB//EADAQAAEDAwIFBAEBCQAAAAAAAAEAEQIhAwQxEkFRIhMFYXGBoTIUkbHR4fFSYoIG/8QAGQEBAAMBAQAAAAAAAAAAAAAAAAECAwQF/8QAJREAAgEEAAQHAAAAAAAAAAAAAAECESExA0GBkQRRcRIiMkJS/9oADAMBAAIRAxEAPwDL7DASf4U+yCHIomd6I0R01K0MwM7JIFEDtGqvGXSyGxJrQICr2mqVKFv0dkacIjTihuyALbbcyISGoq8ZkFPK4IiqAn6qO+rc0I3tw9FGAlOXIICwIEBxV9FOEzoRUcFZlYMYgQ1GiiLcmeevNABcjVNjWM7yM5W8O2GgWnclSMU0yWPAhdb4PGjj+PtRbqmN8zzlKqy2yaSS4m2iCk23ehzN3wHmosR2zz6j+5Zt+GZiXe3mQEaOJxrFehXgD7Ll/wDpjAY8adRJYrCOySlSp0y1QcW6XMEzmSkZTkzpsUGdtzzKP26sutXRwuzaGhFwiwp7qEQQU0rotn1UkG0dQgXpsSyBPKnA1qhXsjf1RLHigI3JEzbgdV1eLezRct2hbEceI2EkhwI0BZcpSRBkeVV1d3OMWFsASYGJnpIrDuPrzOrtFX1chZA8lK5clbuR2AtCBdiPVlm+Qx717CuDJA3l9jenFW8POui9MZM4b5UjCGn2ULyF8EF1zXsdbSuYUbFuzYgRxcSehcaoMpgKzkXBciBR4hgB9qhKhXbBNRVcnnbXF7G44JiRJoVExeTmqgNXUtxeisULUpCfvyQTAbmlRN3BKg15oF7OAltjHfKNCeClshJlypIDdPBaWF5eELkMe7MGMIkSk9YjgVzF3Kv3Pykw4RjQKWDdFm4X1mYxjx6pFgqSSnZ9TXXKUHVM6rK8zj2yBjS7hBBnIncT6BZeX5GczvnSRqIcT7+ilmWrWOYRibcJ3CwZ6n0BWdkiMLchE7pEtKRVIaK+52S6s2nvbxdsjh5cZSlauyYkkwkdPZWZCpceyytoYqVu/dtjpk8f7TULRSOdxNB2UZSYKuMyMvyDH6U5y3Rpx4qalaD3pCFvcC0jQKoAwRb0nIiUPVVeS0cDHmtDxWLC9ImekJxlu5dsblQAotrwcTtqOk7j7l9oUx4+RLAXLf6jNu3pCRuA7be7SI5uq+dCFucbcHYByJFzX2WpcG3LuCgjCMQG9XKxr9zu3pz5mnstJNLWvGRCywMhShYcVFlIhy3LVMzVKxLETFPC4bQoacQnd/lCnyCEBrswbpI0dh8JRQpEguf2J4SL1QBg5oNToF1OFjfpbEbJjRhGUuO78qfOnwud8ba7+bZgdN24/wCtV1MpSIJId+m4P8hofn+ClAxcyXbGTMFzOW2J+AKfaySQA6u+RuAtEaSlOfLUlZ5Ln0CtseF+YoIcMBXU1KFO91bRonkQq5PWVQFgHjyCgXKUDQ+pTyoEBCTcX3cHUrbukkgNfwWz9VPe79s7W9wuhk7ncz7B3eT/ANH+kklZA5XM39wbtdo/n9qp1V90kkn8mERkq8vyKSSqAsX2/KkXaqSSA//Z";
document.getElementById("base64Image").src=myImage;

</script>
</html>

 

 

The test consists of 2 <IMG> tags.  The first gets its src from a file system file.  The second has a blank SRC attribute which is populated via javascript from a hard coded variable containing the base64 contents of the file system file.

 

With the Blackberry Webworks 2.0 API installed, here is what I see in the torch and bold simulators :

Torch Webworks 2Bold Webworks 2

 

installed 2

 

Now I uninstall the 2.0 Webworks SDK and reinstall the 1.5 that comes with the VS Plugin and get the correct result :

 

 

So You should be able to easily reproduce this above with no problem.  Its not only IMG tags, it is any tag or style you attempt to do a "data:image/xxx;charset=utf-8;base64" assignment with.  Including background-images, etc.  I have verified that it is not corrupted data (As easily tested above) - and eliminated the communication of the data as any sort of problem.

 

Any ideas?  This is killing our apps.  We upgraded WebWorks SDK versions to fix issues with FilterExpressions not working, but I fear we will have to back off of the 2.0 until this gets fixed or we find a workaround.  And Our company (Raytheon) is in a critical stage right now of demoing and convincing our community to adopt this webworks technology.  Thanks!

 

 

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: data:image/png;base64.... - No longer works on OS5 browsers after updating to WebWorks 2.0 API

I've sent this to the development team to see if they can make any sense of what you're seeing.. it is definitely strange
Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: data:image/png;base64.... - No longer works on OS5 browsers after updating to WebWorks 2.0 API

I have no feedback from the team yet.. but I'm wondering if the "src" attribute is being compared against the whitelisting... I'll follow up more with the team

data:image/jpeg;charset=utf-8;base64
Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 9
Registered: ‎03-05-2011
My Device: 9800

Re: data:image/png;base64.... - No longer works on OS5 browsers after updating to WebWorks 2.0 API

Incidentally, I have tried (for kicks) adding data:image/ to the whitelisted domains, and even wildcarding everything in hopes that would give us a workaround, but no-go.  If we could even get a way around it somehow that would be awesome.  I look forward to the teams response - thank you!