base64で書かれたリンクをJavaScriptで開けるようにするには

HTMLのリンク先にスクレイピングで取得した画像のURLを入れています。
そのURLがbase64方式で書かれているためクリックしても、"400 bad request"のページが開かれ、検証画面のコンソールには"not allowed to navigate top frame to data url data:image/jpeg;base64〜"
というエラーが出てき、開くことができません。

base64で書かれたURLを開く方法、またはbase６４で書かれたURLを開くことができるURLに変更できる方法を教えていただきたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

Data URIのURLを開こうとした場合の動作は、ブラウザに依存するとのことです（Qiita）。

投稿2019/03/31 13:08

maisumakun

総合スコア145183

matchi6

2019/03/31 13:35

コメントありがとうございます。 Qiitaの記事を書かれた方と同じく、img要素をクリックしたら、img要素の画像を別タブウィンドウで表示したいのですが、結論としましてはData URIで書かれているものはChromeでは開くことができないということでしょうか。

maisumakun

2019/03/31 13:37

そうですね、どうにか回避する方法があるかもしれません（どうすればいいか、パッとは思いつかないです）。

matchi6

2019/03/31 14:05

かしこまりました。回答ありがとうございました。数日経って、解決策が見つけれなければベストアンサーにさせていただきます。

行動規範の内容に同意します

すでに解決済みとなっている質問ですが、解決案を思いついたため、またこれの他に解決案が特に挙げられていないため、回答します。

同じドメインに<canvas>要素を置いた別のページを用意し、そのページをwindow.openで開き、canvasにbase64を読み込ませるのが良さそうです。これであれば、ブラウザごとに違う挙動になることもなくなります。

別ページ（/canvas-page）

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
6    <title>Canvas</title>
7    <style>
8      body {
9        background: #222;
10        display: flex;
11        justify-content: center;
12        vertical-align: middle;
13      }
14    </style>
15  </head>
16  <body>
17    <canvas id="image" width="1" height="1"></canvas>
18  </body>
19</html>

メインのページで読み込むJSのサンプル

js
1var getImageByBase64 = async base64 => {
2  var img = new Image();
3  img.src = base64;
4  return await new Promise(r => (img.onload = e => r(img)));
5};
6
7var CanvasPageOpener = async img => {
8  var win = window.open('/canvas-page');
9  var doc = await new Promise(r => (win.onload = e => r(win.document)));
10  var canvas = doc.querySelector('#image');
11  canvas.height = img.naturalHeight;
12  canvas.width = img.naturalWidth;
13  canvas.getContext('2d').drawImage(img, 0, 0);
14  return canvas;
15};
16
17// main
18(async () => {
19  var base64 = 'data:image/png;base64,...';
20  var image = await getImageByBase64(base64);
21  var canvas = await CanvasPageOpener(image);
22})();