CODEWITHSUNDEEP
javascriptimagebase64nativescript
Zakus
Zakus

Reputation: 3

Nativescript: Black space instead photo thumbnails

Please help, I'm doing a thumbnail of the photos taken with the camera and encode it in base64.

Javascript:

  class Entry {

  get thumbnail() {
        return (this._thumbnail || null);
  }

  set thumbnail(value) {
        let scaledImage = false;
        if (value) {
            if (value.android) {
                const aspectSafeSize = common.getAspectSafeDimensions(value.width, value.height, config.thumbWidth, config.thumbHeight);
                scaledImage = android.graphics.Bitmap.createScaledBitmap(value.android, aspectSafeSize.width, aspectSafeSize.height, true);
            }
            if (value.ios) {
                const cgSize = CGSizeMake(config.thumbWidth, config.thumbHeight);
                UIGraphicsBeginImageContextWithOptions(cgSize, false, 0.0);
                value.ios.drawInRect(CGRectMake(0, 0, config.thumbWidth, config.thumbHeight));
                scaledImage = UIGraphicsGetImageFromCurrentImageContext();
                UIGraphicsEndImageContext();
            }
        }
        if (scaledImage) {
            const scaledImageSource = new ImageSourceModule.ImageSource();
            scaledImageSource.setNativeSource(scaledImage);
            const t = 'data:image/png;base64,' + scaledImageSource.toBase64String('png',100);
            this._thumbnail = t;
        }
    }
}

In XML: 

<Image top="0" left="0" src="{{ thumbnail }}" stretch="aspectFill" visibility="{{ thumbnail ? 'visible' : 'collapsed' }}"/>

But only displays black space:screenshot. Moreover, if the encoded data to get and try to decode them, we get a normal picture

Upvotes: 0

Views: 162

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

If you have CSS property color set for any parent element : this is documented bug in NativeScript 2.3.0 and is scheduled for fixing with the next release (2.4.0). If you want to use the next release at this very moment you can do it with this steps:

tns plugin remove tns-core-modules
tns plugin add tns-core-modules@next

Now you will have the latest modules where the fix is already applied.

Upvotes: 1

Related Questions