@nativescript-community/ui-htmlcanvasapi/lib/elements/HTMLCanvasElement.js

An HTML Canvas API implementation on top of android and iOS native APIs

import { Canvas } from '@nativescript-community/ui-canvas';
import { ImageSource, Observable } from '@nativescript/core';
import { CanvasRenderingContext2D } from '../contexts/CanvasRenderingContext2D';
import { ImageBitmapRenderingContext } from '../contexts/ImageBitmapRenderingContext';
import { SCREEN_SCALE } from '../helpers';
import { OffscreenCanvas } from './OffscreenCanvas';
class NSHTMLCanvasElement extends Observable {
    constructor(nativeElement) {
        super();
        this._nativeElement = nativeElement;
    }
    getContext(contextId, contextAttributes) {
        if (this._isControlledByOffscreen) {
            throw new Error(`Failed to execute 'getContext' on 'HTMLCanvasView': Cannot get context from a canvas that has transferred its control to offscreen.`);
        }
        const self = this;
        if (!this._contexts) {
            this._contexts = new Map();
        }
        if (this._contexts.has(contextId)) {
            return this._contexts.get(contextId);
        }
        let context;
        switch (contextId) {
            case '2d':
                context = new CanvasRenderingContext2D();
                break;
            case 'bitmaprenderer':
                context = new ImageBitmapRenderingContext();
                break;
            default:
                return null;
        }
        Object.defineProperty(context, 'canvas', {
            get() {
                return self;
            },
        });
        this._contexts.set(contextId, context);
        return context;
    }
    transferControlToOffscreen() {
        if (this._contexts != null) {
            throw new Error(`Failed to execute 'transferControlToOffscreen' on 'HTMLCanvasElement': Cannot transfer control from a canvas that has a rendering context.`);
        }
        if (this._isControlledByOffscreen) {
            throw new Error(`Failed to execute 'transferControlToOffscreen' on 'HTMLCanvasElement': Cannot transfer control from a canvas for more than one time.`);
        }
        this._isControlledByOffscreen = true;
        return new OffscreenCanvas(this.width, this.height);
    }
    toDataURL(type, quality) {
        const prefix = 'data:';
        const imgSource = this._toImageSource();
        if (imgSource == null) {
            return prefix;
        }
        const format = type != null ? type.split('/')[1] : 'png';
        const nativeQuality = quality ? quality * 100 : 100;
        const base64String = imgSource.toBase64String(format, nativeQuality);
        return `${prefix + type};base64,${base64String}`;
    }
    _isPixelScaleNeeded() {
        return __ANDROID__ || this._nativeElement.isOffscreenBufferEnabled;
    }
    get width() {
        return this._nativeElement.getActualSize().width;
    }
    set width(val) {
        this._nativeElement.width = val;
    }
    get height() {
        return this._nativeElement.getActualSize().height;
    }
    set height(val) {
        this._nativeElement.height = val;
    }
    get nativeElement() {
        return this._nativeElement;
    }
    get nativeContext() {
        return this._nativeElement.nativeContext;
    }
    _toImageSource() {
        const view = this._nativeElement;
        if (view.isDrawing()) {
            console.warn(`Cannot export canvas content during the drawing process`);
            return null;
        }
        const measuredWidth = view.getMeasuredWidth();
        const measuredHeight = view.getMeasuredHeight();
        if (measuredWidth === 0 || measuredHeight === 0) {
            return null;
        }
        // Image is exported in pixels
        const canvas = new Canvas(measuredWidth, measuredHeight);
        canvas.scale(SCREEN_SCALE, SCREEN_SCALE);
        view.onDraw(canvas);
        const imgSource = new ImageSource(canvas.getImage());
        canvas.release();
        return imgSource;
    }
}
export { NSHTMLCanvasElement as HTMLCanvasElement };
//# sourceMappingURL=HTMLCanvasElement.js.map