@angular/platform-browser#SafeUrl TypeScript Examples

/**
   * Transform
   *
   * @param value: string
   * @param type: string
   */
  transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value)
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value)
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value)
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value)
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value)
      default:
        return this._sanitizer.bypassSecurityTrustHtml(value)
    }
  }

public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
      case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
      case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
      case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default: throw new Error(`Invalid safe type specified: ${type}`);
    }
  }

public transform(
    value: any,
    type: string
  ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case "html":
        return this.sanitizer.bypassSecurityTrustHtml(value);
      case "style":
        return this.sanitizer.bypassSecurityTrustStyle(value);
      case "styleUrl":
        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
        return this.sanitizer.bypassSecurityTrustStyle(`url(${value})`);
      case "script":
        return this.sanitizer.bypassSecurityTrustScript(value);
      case "url":
        return this.sanitizer.bypassSecurityTrustUrl(value);
      case "resourceUrl":
        return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        throw new Error(`Invalid safe type specified: ${type}`);
    }
  }

public transform(
    value: any,
    type: string
  ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this.sanitizer.bypassSecurityTrustHtml(value)
      case 'style':
        return this.sanitizer.bypassSecurityTrustStyle(value)
      case 'script':
        return this.sanitizer.bypassSecurityTrustScript(value)
      case 'url':
        return this.sanitizer.bypassSecurityTrustUrl(value)
      case 'resourceUrl':
        return this.sanitizer.bypassSecurityTrustResourceUrl(value)
      default:
        throw new Error(`Invalid safe type specified: ${type}`)
    }
  }

private generateIframeUrl(config: GrafanaIframeConfig): Observable<SafeUrl> {
    return this.grafana.getDasbhboardUrlFromUri(config.dashboardUri).pipe(
      catchError(error => {
        this.graphLoadError = error;
        return throwError(error);
      }),
      map((url: string) => {
        // replace /d/ with /d-solo/
        let iframeUrl = url.replace('/d/', '/d-solo/');

        // add the query params
        iframeUrl = `${iframeUrl}?orgId=${this.grafana.orgId}`;
        iframeUrl = `${iframeUrl}&panelId=${config.panelId}`;
        iframeUrl = `${iframeUrl}&refresh=${config.refresh}s`;
        iframeUrl = `${iframeUrl}&theme=light`;

        for (const key in config.vars) {
          if (config.vars.hasOwnProperty(key)) {
            iframeUrl = `${iframeUrl}&${key}=${config.vars[key]}`;
          }
        }

        return this.sanitizer.bypassSecurityTrustResourceUrl(iframeUrl);
      }),
    );
  }

public iframeUrl: SafeUrl;

getSafeUrl(url: string): SafeUrl {
    this.customerPortrait = url;
    return this.domSanitizer.bypassSecurityTrustUrl(url);
  }

getSafeUrl(url: string): SafeUrl {
    this.objectUrl = url;
    return this.domSanitizer.bypassSecurityTrustUrl(url);
  }

safeUrl: SafeUrl;

getSafeUrl(url: string): SafeUrl {
    this.objectUrl = url;
    return this.domSanitizer.bypassSecurityTrustUrl(url);
  }

async crop(): Promise<ImageCropData> {
    let blob: Blob, src: string | SafeUrl;

    // 此处需要调用imageCropper的一些私有方法，使用 any 绕过编译器检查
    const imageCropper = this.imageCropper as SafeAny;
    // 如果支持离屏画布，并且当前允许裁剪
    if (
      'OffscreenCanvas' in window &&
      imageCropper.sourceImage?.nativeElement &&
      imageCropper.transformedImage
    ) {
      const worker = new Worker(new URL('../../../workers/image-cropper.worker', import.meta.url), { type: 'module' });

      // 解构出需要的属性/方法
      const {
        format,
        cropper,
        transform,
        transformedSize,
        backgroundColor,
        transformedImage,
        containWithinAspectRatio,
        maintainAspectRatio,
        aspectRatio,
      } = imageCropper;

      const imagePosition = imageCropper.getImagePosition();
      const width = imagePosition.x2 - imagePosition.x1;
      const height = imagePosition.y2 - imagePosition.y1;

      let imageBitmap: ImageBitmap;
      try {
        imageBitmap = await lastValueFrom(this.imageService.createImageBitmap(transformedImage));
      } catch (e) {
        worker.terminate();
        return { blob, src };
      }

      return new Promise<ImageCropData>((resolve, reject) => {
        worker.onmessage = ({ data }) => {
          blob = data.blob;
          src = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(blob));
          this.imageCropper.imageCropped.emit(data);
          worker.terminate();
          resolve({ blob, src });
        };

        worker.onerror = () => {
          worker.terminate();
          reject({ blob, src });
        }

        worker.postMessage({
          format,
          cropper,
          transform,
          aspectRatio,
          imageBitmap,
          resizeCanvas,
          imagePosition,
          backgroundColor,
          transformedSize,
          maintainAspectRatio,
          containWithinAspectRatio,
          quality: imageCropper.getQuality(),
          resizeRatio: imageCropper.getResizeRatio(width, height),
          offsetImagePosition: imageCropper.getOffsetImagePosition(),
        }, [imageBitmap]);

        this.imageCropper.startCropImage.emit();
      });
    }

    const { base64 } = this.imageCropper.crop();

    blob = base64ToFile(base64);
    src = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(blob));

    return { blob, src };
  }

/**
   * 关闭自己
   * @param data 需要传回一个image src
   */
  dismiss(data?: SafeUrl) {
    super.dismiss(data);
  }

readonly src$ = new ReplaySubject<SafeUrl>(1);

albumArtSrc: SafeUrl = ''

sanitizeImageUrl(imageUrl: string): SafeUrl {
    return this.sanitizer.bypassSecurityTrustUrl(imageUrl);
}

safeImgDataUrl?: SafeUrl | string;

src: SafeUrl;

getSafeUrl(image: string): SafeUrl {
      return image.substr(0, 10) === 'data:image' ?
          image : this.sanitization.bypassSecurityTrustUrl(image);
  }

captchaImageResource: SafeUrl;

bypassSecurityTrustUrl(value: string): SafeUrl {
    throw new Error('Method not implemented.');
  }