JavaScriptによるbase64エンコードで正しい文字列が出力されない

###JavaScriptによるbase64エンコードで正しい文字列が出力されない
HTML内のimgタグに設定した画像をbase64エンコードして、
ボタンが押されると、その文字列をHTML内のtextareaに出力したいと思っています。
しかし、出力はされるのですが文字列の中にやたらと"A"が多く、正しい文字列が出力されません。
正しい文字列が出力される実装方法を教えてください。
###textareaに出力される文字列

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAH0AfQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAn/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//9k=

###該当のソースコード

JavaScript
1function getBase64() {
2            //img要素オブジェクトを取得する
3            var obj = document.getElementById("img1");
4
5            //canvas要素を生成してimg要素を反映する
6            var cvs = document.createElement('canvas');
7            cvs.width = obj.width;
8            cvs.height = obj.height;
9            var ctx = cvs.getContext('2d');
10            
11            //canvas要素をBase64化する
12            var data = cvs.toDataURL("image/jpeg");
13
14            //textareaに書き出す
15            document.getElementById("base64").innerText = data;
16        }

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>
6        無題ドキュメント
7    </title>
8    <script type="text/javascript" src="JavaScript/base64.js"></script>
9</head>
10<body>
11    <img id="img1" src="images/tiger.jpg" width="500" height="500">
12    <input type="button" id="btn1" value="変換" onclick="getBase64()">
13    <textarea id="base64"></textarea>
14</body>
15</html>

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

回答1件

ベストアンサー

img要素をcanvas要素に描いていないからです.

JavaScript
1function getBase64() {
2            //img要素オブジェクトを取得する
3            var obj = document.getElementById("img1");
4
5            //canvas要素を生成してimg要素を反映する
6            var cvs = document.createElement('canvas');
7            cvs.width = obj.naturalWidth;
8            cvs.height = obj.naturalHeight;
9            var ctx = cvs.getContext('2d');
10            ctx.drawImage(obj, 0, 0);//<===
11
12            //canvas要素をBase64化する
13            var data = cvs.toDataURL("image/jpeg");
14
15            //textareaに書き出す
16            document.getElementById("base64").innerText = data;
17        }

投稿2017/11/26 02:43

編集2017/11/26 02:44

defghi1977

総合スコア4756

defghi1977

2017/11/26 02:53

なお, canvas要素を用いずともfecth→Blob→FileReaderで画像をdataURIスキーム(base64)形式に変換する方法もあります.

Yuito4952

2017/11/26 09:32

ctx.drawImage(obj, 0, 0); の一文を記入すると、「Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at getBase64」というエラーが出てきました。

defghi1977

2017/11/26 09:49

異なるオリジン(サイト)の画像をcanvas要素に描いた場合は, セキュリティの観点からエラーが発生します. 参考 https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy https://developer.mozilla.org/ja/docs/Web/HTML/CORS_enabled_image

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