p5.jsでクリップボードにコピーする方法

1. テキストのコピー: p5.jsでテキストをクリップボードにコピーするには、createInput()関数を使用して入力フィールドを作成し、select()関数とsetSelectionRange()関数を使用してテキストを選択します。次に、document.execCommand('copy')を呼び出してコピーを実行します。

function setup() {
  let input = createInput('Copy this text');
  input.position(20, 20);

  let button = createButton('Copy');
  button.position(input.x + input.width, 20);
  button.mousePressed(copyToClipboard);
}
function copyToClipboard() {
  let input = document.querySelector('input');
  input.select();
  input.setSelectionRange(0, input.value.length);
  document.execCommand('copy');
}

2. 画像のコピー: p5.jsでキャンバス上の画像をクリップボードにコピーするには、get()関数を使用してキャンバスの画像データを取得し、createImg()関数を使用して一時的な画像要素を作成します。次に、select()関数とsetSelectionRange()関数を使用して一時的な画像を選択し、document.execCommand('copy')を呼び出してコピーを実行します。

function setup() {
  createCanvas(400, 400);
  background(220);
}
function draw() {
  // 何かしらの描画処理
  // クリックされたらキャンバスの画像をクリップボードにコピーする
  if (mouseIsPressed) {
    copyCanvasToClipboard();
  }
}
function copyCanvasToClipboard() {
  let imageData = get();
  let tempImg = createImg(imageData);
  tempImg.hide();
  document.body.appendChild(tempImg.elt);
  tempImg.elt.select();
  document.execCommand('copy');
  document.body.removeChild(tempImg.elt);
}