【解決策】[DS]Canvas.toDataURL()の戻り値が違うときの対処方法

フォローする

JavaScriptのCanvasオブジェクトであるtoDataURL()は、canvasで描画したデータを、PNGやJPGのデータURI(Base64エンコードした文字列)で取得するメソッドです。

DesignStudioのデフォルトブラウザに、上記メソッドを動かした場合、通常のIEやChromeなどで使用した時と比べて、取得したデータURIのサイズが大きくなります。

・あるWebページでcanvas.toDataURL(“image/png”)と指定し、取得したデータURIのサイズ

通常のIE:0.05MB

DesignStudioのデフォルトブラウザ:6.68MB

【原因】

デフォルトブラウザではブラウザレンダリングエンジンにWebKitを使用しており、WebKitの仕様によるものです。

参考:Classicエンジン と WebKitエンジンとの違い

【対応策】

・canvas.toDataURL(“image/png”)を“image/jpeg”に変更する。

上記に記載したWebページの場合、jpeg指定することによりサイズが0.14MBと小さくなります。

・Extract Screenshot(スクリーンショット抽出)Stepで代用可能か検討してください。