すでに解決済みとなっている質問ですが、解決案を思いついたため、またこれの他に解決案が特に挙げられていないため、回答します。
同じドメインに<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})();
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/31 13:35
2019/03/31 13:37
2019/03/31 14:05