LoginSignup
1
2

More than 3 years have passed since last update.

p5jsで画像をbase64にして使う

Last updated at Posted at 2020-01-24

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

1. まず画像をbase64にする

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

2. loadImageで読み込む

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

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

あとは描画してください

image(img,0,0,100,100);
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2