Blog Elements

Half Sized Blog Element (Single Author Style)

Half Sized Blog Element (Multi Author Style)

toDataURL()メソッド利用の際の「Tainted canvases may not be exported」エラーについて

2021年7月21日/カテゴリ: hacks-of-it /作成者: M. Shikishima

1 Google Cloud のStorageからJavaScriptで画像をダウンロードしてCanvasに書き込んだとき，そのCanvas要素の画像をtoDataURL()メソッドでdataURIに変換する際にという […]

Angularでpipeを使って日付データをフォーマットする

2021年7月19日/カテゴリ: hacks-of-it, ionic-angular /作成者: M. Shikishima

1 準備標準機能なので追加のインストールは必要ありません．module.tsで@angular/commonからDatePipeをインストールし，providersに登録します．次に，page.tsファイルで読み込み […]

toDataURL()メソッド利用の際の「Tainted canvases may not be exported」エラーについて

2021年7月21日/カテゴリ: hacks-of-it /作成者: M. Shikishima

Angularでpipeを使って日付データをフォーマットする

2021年7月19日/カテゴリ: hacks-of-it, ionic-angular /作成者: M. Shikishima

Full Sized Blog Element (Big Preview Pic)

toDataURL()メソッド利用の際の「Tainted canvases may not be exported」エラーについて

2021年7月21日/カテゴリ: hacks-of-it /作成者: M. Shikishima

Google Cloud のStorageからJavaScriptで画像をダウンロードしてCanvasに書き込んだとき，そのCanvas要素の画像をtoDataURL()メソッドでdataURIに変換する際に

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

というエラーが出る．直訳すると

「HTMLCanvasElement」で「toDataURL」の実行に失敗しました：汚染されたキャンバスはエクスポートされない可能性があります。

つまり，Corsポリシーに引っかかってしまう．解決するためにはフロントエンドのJavaScriptで任意のドメインからのデータを利用できるように明示的に指定する必要と，生成元からデータを返す際にCorsポリシーを適用しないドメインを明示的に指定する必要がある．

フロントエンドの方法

Canvas要素に描く際に生成元をanounymousに設定すればいい

  download(){
    var gsReference = this.firestorage.refFromURL('gs://my-app.appspot.com/imgs/'+this.authUid +'/'+this.query_img_name)
    const task = gsReference.getDownloadURL().subscribe(dataurl => {
      console.log(dataurl,'tsk');
      const image = new Image();
      image.onload = () => {
        this.canvas.nativeElement.width = image.width;
        this.canvas.nativeElement.height = image.height;
        this.canvas_rendering_context.drawImage(image, 0, 0);
      }
      （→これを追加）image.crossOrigin = "anonymous";
      image.src = dataurl;

    })
  }

生成元の変更

今回はGoogle CloudのStorageから画像をダウンロードしている．従ってStorageの設定をいじる必要がある．

my-cors.jsonなどのファイルを使って設定情報を書いたあと，gsutilコマンドを使ってStorageに反映させればいい．

touch my-cors.json
 nano my-cors.json

my-cors.jsonは下記のように変更しておく

[
    {
      "origin": ["*"],
      "method": ["GET","POST"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

あとはコマンドから反映させる

gsutil cors set ./my-cors.json gs://my-app.appspot.com

参考文献

https://cloud.google.com/storage/docs/configuring-cors

Fix: Tainted canvases may not be exported.

Angularでpipeを使って日付データをフォーマットする

2021年7月19日/カテゴリ: hacks-of-it, ionic-angular /作成者: M. Shikishima

準備

標準機能なので追加のインストールは必要ありません．module.tsで@angular/commonからDatePipeをインストールし，providersに登録します．

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab3Page } from './tab3.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+import { DatePipe } from '@angular/common';

import { Tab3PageRoutingModule } from './tab3-routing.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    RouterModule.forChild([{ path: '', component: Tab3Page }]),
    Tab3PageRoutingModule,
  ],
-  declarations: [Tab3Page]
+  declarations: [Tab3Page],
+  providers: [DatePipe]
})
export class Tab3PageModule {}

次に，page.tsファイルで読み込みます．

import { Component,ElementRef,ViewChild } from '@angular/core';
+import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {

  constructor(
+    private datePipe: DatePipe
  ) {
  }

  ionViewDidEnter(){
  }

}

HTMLでの表示を変えたい場合

import { Component,ElementRef,ViewChild } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
+  time_on_html:any;
  constructor(
    private datePipe: DatePipe
  ) {
  }

  ionViewDidEnter(){
+    this.time_on_html = new Date();
+    console.log(this.time_on_html);
  }

}

そして，HTML側は{{time_on_html | date:”MM/dd/yy” }}で参照します．

tsファイルの中で表示を変えたい場合

import { Component,ElementRef,ViewChild } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  time_on_html:any;
  constructor(
    private datePipe: DatePipe
  ) {
  }

  ionViewDidEnter(){
    this.time_on_html = this.datePipe.transform(new Date(), 'yyyyMMddHHmmss');
    console.log(this.time_on_html);

  }

}

2021/07/19 18:42:52と表示される．

Half Sized Blog Element (Single Author Style)

Half Sized Blog Element (Multi Author Style)

toDataURL()メソッド利用の際の「Tainted canvases may not be exported」エラーについて

Angularでpipeを使って日付データをフォーマットする

toDataURL()メソッド利用の際の「Tainted canvases may not be exported」エラーについて

Angularでpipeを使って日付データをフォーマットする

Full Sized Blog Element (Big Preview Pic)

toDataURL()メソッド利用の際の「Tainted canvases may not be exported」エラーについて

フロントエンドの方法

生成元の変更

参考文献

Angularでpipeを使って日付データをフォーマットする

準備

HTMLでの表示を変えたい場合

tsファイルの中で表示を変えたい場合

ソーシャルメディア

Latest News

カテゴリー

コンタクト

Blog Elements

Half Sized Blog Element (Single Author Style)

Half Sized Blog Element (Multi Author Style)

Full Sized Blog Element (Big Preview Pic)

フロントエンドの方法

生成元の変更

参考文献

準備

HTMLでの表示を変えたい場合

tsファイルの中で表示を変えたい場合

ソーシャルメディア

Latest News

タグ

カテゴリー

コンタクト