使用jQuery和PhoneGap在Android中无法显示图像，但在iPhone中可以使用

Question

It took me for the whole day to figure out this problem. I am working on a webapp (using Phonegap + HTML + jQuery + CSS). It consists of one screen, which displays user signatures. I used the same .js file which is used in iPhone and in that the signature image is appearing without any problem, but the same code is not working on Android (I tried using Android 2.2.1, 2.3.3, 3.0 and 4.0) But nothing works. Following is the code snippet from my .js file :

SignatureButtonThumbComponent.prototype.setInitialValue = function () {
       var date, value;
       value = this.record.valueForField(this.config.key);
       //value = window.btoa(this.record.valueForField(this.config.key)); // Not Working
       console.log("Signature Value :  " + value);
       console.log("Signature Date value : " + date);
       date = this.record.valueForField(this.config.key_date);
       if (value !== 'undefined') {
          this.el.append("<button class='captured_signature_button'><img src='" + value + "'/></button>");
        if (date) {
             return this.el.append("<div class='signature_date'>" + (Formatter.timeFormattedNicely(date)) + "</div>");
                    }
                } else {
                    return this.el.append("<button class='big blue arrow_button' id='get_patient_signature'><span>" + this.config.button_label + "</span><span class='icons arrow_right'></span></button>");
                }
            };

EDIT: Following is my logcat output :

09-21 12:01:19.562: D/PhoneGapLog(1362): Signature Date value : undefined
09-21 12:01:19.672: D/PhoneGapLog(1362): Signature Value :  undefined

After Figuring little more, What Now I am getting in logcat is this : 09-21 16:33:27.947: D/PhoneGapLog(948): file:///android_asset/www/new_mobile.js: Line 15790 : Signature Value : data:,

Answer 1

Finally after the whole day's run, I found the solution. Basically Android does not support canvas of HTML5, though it claims for the same. Whenever I tried to save paint of canvas object, I got data:, meaning null as an output. Here is a nice js, which you can use to override the default method of canvas.toDataURL() . The only drawback to this js is that its comparatively slow to save your graphic. But as of my situation, its well suited and I integrated it in my jquery. You can find this js here : http://code.google.com/p/todataurl-png-js/