p5jsで画像をbase64にして使う

codepenとかp5jsのweb editorで画像の埋め込み方がわからん時、画像を文字列(base64)にして読み込むやりかたがあります。そうじゃないときにも使うと思いますが。。

# 1. まず画像をbase64にする

画像を適当にbase64にします。私は以下のページを使わせてもらいました。
https://lab.syncer.jp/Tool/Base64-encode/

# 2. loadImageで読み込む

ただ普通に、loadImageの中に、１でできた文字列を突っ込みます。

```
let img = loadImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHcAAAB3CAIAAAC2W0jdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUI0NjhBNEQzNEY1MTFFQTkxRjE4NUNENzdBRUZGNUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUI0NjhBNEUzNEY1MTFFQTkxRjE4NUNENzdBRUZGNUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1QjQ2OEE0QjM0RjUxMUVBOTFGMTg1Q0Q3N0FFRkY1QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1QjQ2OEE0QzM0RjUxMUVBOTFGMTg1Q0Q3N0FFRkY1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu0zmGEAAAixSURBVHja7F1P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");
```

あとは描画してください

```
image(img,0,0,100,100);
```