{"id":12662,"date":"2024-04-18T02:37:31","date_gmt":"2024-04-18T02:37:31","guid":{"rendered":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/?p=12662"},"modified":"2024-04-18T08:13:21","modified_gmt":"2024-04-18T08:13:21","slug":"javascript-%e3%81%a7%e3%83%aa%e3%83%a2%e3%83%bc%e3%83%88%e3%81%ae%e7%94%bb%e5%83%8f%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e7%ad%89%e3%82%92base64%e3%81%ab%e5%a4%89%e6%8f%9b%e3%81%97%e5%8f%96%e5%be%97","status":"publish","type":"post","link":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/?p=12662","title":{"rendered":"Javascript \u3067\u30ea\u30e2\u30fc\u30c8\u306e\u753b\u50cf\u3001\u52d5\u753b\u3001\u97f3\u58f0\u30d5\u30a1\u30a4\u30eb\u3092Base64\u306b\u5909\u63db\u3057\u53d6\u5f97\u3059\u308b"},"content":{"rendered":"<p>\u3053\u306e\u30bf\u30a4\u30c8\u30eb\u3067\u3001\u5185\u5bb9\u304c\u4e0a\u624b\u304f\u4f1d\u308f\u308b\u304b\u3069\u3046\u304b\u81ea\u4fe1\u304c\u3042\u308a\u307e\u305b\u3093\u304c\u3001WEB\u30da\u30fc\u30b8\u304b\u3089\u3001\u30ed\u30fc\u30ab\u30eb\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u53c2\u7167\u3059\u308b\u5834\u5408\u3001\u4f8b\u3048\u3070\u30d5\u30a1\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b\u3068\u304d\u306a\u3069\u3067\u3059\u304c\u3001HTML\u306e\u6a5f\u80fd\u3084\u3001Javascript \u306e FileReader \u306a\u3069\u3092\u5229\u7528\u3057\u307e\u3059\u3002\u81ea\u5206\u3067\u3082\u3001\u4ee5\u524d<a href=\"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/?p=6423\">\u3053\u3093\u306a\u8a18\u4e8b<\/a>\u3092\u66f8\u304d\u307e\u3057\u305f\u3002\u3053\u306e\u3088\u3046\u306a\u30ed\u30fc\u30ab\u30eb\u306e\u30d5\u30a1\u30a4\u30eb\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3067\u306f\u306a\u304f\u3066\u3001\u30ea\u30e2\u30fc\u30c8\u306e\u30d5\u30a1\u30a4\u30eb\u3092 Javascript \u3067\u6271\u3046\u5834\u5408\u3092\u3001\u3044\u308d\u3044\u308d\u8a66\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>\u4f8b\u3048\u3070\uff0c\u753b\u50cf\u3092WEB\u30da\u30fc\u30b8\u306b\u8868\u793a\u3059\u308b\u3068\u304d\u306b\u306f\u3001img \u30bf\u30b0\u3067\u6307\u5b9a\u3057\u3066\uff0c\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8aad\u307f\u8fbc\u307f\u307e\u3059\u304c\uff0c<\/p>\n<pre><code style=\"color: midnightblue; font-size: 12px; white-space: pre-wrap;\">&lt;img src=&quot;.\/sample.gif&quot; &gt;<\/code><\/pre>\n<p>\u4e0a\u8a18\u306e\u3088\u3046\u306a\u4f4d\u7f6e\u306b\u3042\u308b\u30ea\u30e2\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u5185\u5bb9\u3092 Base64 \u3067\u53d6\u5f97\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u53c2\u7167\u30b5\u30a4\u30c8<\/p>\n<ul>\n<li><a href=\"https:\/\/qiita.com\/yasumodev\/items\/e1708f01ff87692185cd\">[JavaScript] \u753b\u50cf\u5909\u63db\uff1a&lt;img&gt;\u8981\u7d20 \u21d4 Base64\uff08\u76f8\u4e92\u5909\u63db\uff09<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/ja\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL\">HTMLCanvasElement: toDataURL() \u30e1\u30bd\u30c3\u30c9<\/a><\/li>\n<li><a href=\"https:\/\/staxmanade.com\/2015\/11\/how-to-base64-and-save-a-binary-audio-file-to-local-storage-and-play-it-back-in-the-browser\/\">How to Base64 and save a binary audio file to local storage and play it back in the browser<\/a><\/li>\n<li><a href=\"https:\/\/zenn.dev\/nok_c7\/articles\/6276f23aedb679\">[HTML\/JavaScript] FetchAPI\u3067\u97f3\u58f0\u30d5\u30a1\u30a4\u30eb\u3092\u53d6\u5f97\uff06\u518d\u751f\u3057\u305f\u3044[\u5099\u5fd8\u9332]<\/a><\/li>\n<li><a href=\"https:\/\/gray-code.com\/javascript\/load-file-with-fetch-api\/\">Fetch API\u3067\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080<\/a><\/li>\n<\/ul>\n<p>\u6700\u521d\u306b\u3001\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u3093\u3067\u307f\u307e\u3059\u3002<\/p>\n<pre><code style=\"color: midnightblue; font-size: 12px; white-space: pre-wrap;\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;utf-8&quot;&gt;\r\n&lt;title&gt;sample&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\r\nvar tmpDOM = document.createElement('img');\r\n\r\ntmpDOM.onload = function() {\r\n\r\n\tvar b64 = ImageToBase64(tmpDOM, 'image\/jpeg');\r\n\t\r\n\tconsole.log(b64);\r\n\t\r\n\tdocument.body.appendChild(tmpDOM);\r\n}\r\n\r\ntmpDOM.src = '.\/grizzly.jpg';\r\n\r\nfunction ImageToBase64(img, mime_type) {\r\n\r\n\tvar canvas = document.createElement('canvas');\r\n\t\r\n\tcanvas.width  = img.width;\r\n\tcanvas.height = img.height;\r\n\r\n\tvar ctx = canvas.getContext('2d');\r\n\t\r\n\tctx.drawImage(img, 0, 0);\r\n\r\n\treturn canvas.toDataURL(mime_type);\r\n}\r\n\r\n&lt;\/script&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<p>\u753b\u50cf\u304c png \u3067\u3042\u308c\u3070\u3001mime type \u3092\u5909\u66f4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002canvas \u306e\u6a5f\u80fd\uff08canvas.toDataURL\uff09\u3092\u4f7f\u3063\u3066\u3001base64 \u306e\u30c7\u30fc\u30bf\u3092\u5f97\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u6b21\u306b\u52d5\u753b\u3092\u8aad\u307f\u8fbc\u3093\u3067\u307f\u307e\u3059\u3002<\/p>\n<pre><code style=\"color: midnightblue; font-size: 12px; white-space: pre-wrap;\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;utf-8&quot;&gt;\r\n&lt;title&gt;sample&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\r\nvar tmpDOM = document.createElement('video');\r\n\r\ntmpDOM.onloadedmetadata = function() {\r\n\r\n\tvar b64 = videoToBase64(tmpDOM, 'video\/mp4');\r\n\t\r\n\tconsole.log(b64);\r\n\t\r\n\tdocument.body.appendChild(tmpDOM);\r\n\t\r\n\ttmpDOM.controls = true;\r\n}\r\n\r\ntmpDOM.src = '.\/Bootsy.mp4';\r\n\r\nfunction videoToBase64(tmpDOM, mime_type) {\r\n\r\n\tvar canvas = document.createElement('canvas');\r\n\r\n\tcanvas.width  = tmpDOM.videoHeight;\r\n\tcanvas.height = tmpDOM.videoWidth;\r\n\r\n\tvar ctx = canvas.getContext('2d');\r\n\tctx.drawImage(tmpDOM, 0, 0);\r\n\r\n\treturn canvas.toDataURL(mime_type);\r\n}\r\n\r\n&lt;\/script&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>\u4f59\u5206\u306a\u3068\u3053\u308d\u3082\u3042\u308b\u306e\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u753b\u50cf\u3068\u4f3c\u305f\u3088\u3046\u306a\u3084\u308a\u65b9\u3067\u3001base64 \u306b\u5909\u63db\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u7d9a\u3044\u3066\u3001\u97f3\u58f0\u3067\u3059\u3002<\/p>\n<pre><code style=\"color: midnightblue; font-size: 12px; white-space: pre-wrap;\">&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;utf-8&quot;&gt;\r\n&lt;title&gt;sample&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\r\nvar tmpDOM = document.createElement('audio');\r\n\r\nfetch('.\/voa.mp3')\r\n\t.then(response =&gt; response.blob())\r\n\t.then(blobdata =&gt; {\r\n\t\t\r\n\t\tvar reader = new FileReader();\r\n\t\t\r\n\t\treader.addEventListener(&quot;loadend&quot;, function() {\r\n\t\t\r\n\t\t\tvar b64 = reader.result.toString();\r\n\t\t\t\r\n\t\t\tconsole.log(b64);\r\n\t\t\t\r\n\t\t\ttmpDOM.src = b64;\t\t\t\t\t\t\t\t\t\r\n\t\t\tdocument.body.appendChild(tmpDOM);\t\t\t\t\t\t\t\t\t\r\n\t\t\ttmpDOM.controls = true;\r\n\t\t\t\r\n\t\t});\r\n\t\t\r\n\t\treader.readAsDataURL(blobdata);\r\n\r\n\t});\t\t\t\t\t\r\n\r\n\r\n&lt;\/script&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<p>fetch \u3092\u4f7f\u3048\u3070\u3001\u4ed6\u306e\u753b\u50cf\u3082\u52d5\u753b\u3082\u8aad\u3081\u308b\u306e\u3067\u306f\u306a\u3044\u304b\u3068\u3044\u3046\u6c17\u304c\u3057\u307e\u3059\u304c\u3001\u3068\u306b\u304b\u304f\u97f3\u58f0\u304c\u4e00\u756a\u3084\u3084\u3053\u3057\u304b\u3063\u305f\u3002<\/p>\n<p>\u4ee5\u4e0a\u3067\u3059\u3002<\/p>\n<pre><code style=\"color: midnightblue; font-size: 12px; white-space: pre-wrap;\"><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u306e\u30bf\u30a4\u30c8\u30eb\u3067\u3001\u5185\u5bb9\u304c\u4e0a\u624b\u304f\u4f1d\u308f\u308b\u304b\u3069\u3046\u304b\u81ea\u4fe1\u304c\u3042\u308a\u307e\u305b\u3093\u304c\u3001WEB\u30da\u30fc\u30b8\u304b\u3089\u3001 &#8230; <a class=\"more-link\" href=\"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/?p=12662\">Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-12662","post","type-post","status-publish","format-standard","hentry","category-column"],"_links":{"self":[{"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/12662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12662"}],"version-history":[{"count":21,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/12662\/revisions"}],"predecessor-version":[{"id":12683,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/12662\/revisions\/12683"}],"wp:attachment":[{"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12662"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zairyo.susi.oita-u.ac.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}