Copy 6 mini images to clipboard
Per
// ==UserScript==
// @name Dall-e-2 Copy Button Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Copy 6 mini images to clipboard
// @author Jonathan
// @match https://labs.openai.com/e/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// @license CC
// ==/UserScript==
function waitForElm(selector) {
return new Promise(resolve => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(mutations => {
if (document.querySelector(selector)) {
resolve(document.querySelector(selector));
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
(function() {
'use strict';
const addBtn = function() {
const node = document.getElementsByClassName('task-page-generations')[0];
const btn = document.createElement('div');
btn.style['align-self'] = 'center';
btn.style['padding-bottom'] = '10px';
btn.innerHTML = '<button id="copy-btn" class="btn btn-medium btn-filled btn-secondary" type="button" aria-haspopup="true" aria-expanded="false"><span class="btn-label-wrap"><span class="btn-label-inner">Copy</span></span></button>';
btn.addEventListener('click', function() {
console.log('copy button clicked');
const canvas = document.createElement('canvas');
canvas.id = "copy-canvas";
const imSize = 400;
const margin = 8
canvas.width = 3*imSize + (4*margin);
canvas.height =2*imSize + (2*margin) + 50;
const body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
const images = document.getElementsByClassName('generated-image');
const sig = document.getElementsByClassName('image-signature')[0];
for(var i = 0; i < 6; i++) {
const img = images.item(i).firstChild;
const x = (imSize * i + (i%3*margin)) % 1200 + margin;
const y = margin+ (i<3?0:imSize + margin);
ctx.drawImage(img, x, y, imSize, imSize);
ctx.translate(x+imSize-80, y+imSize-16);
for(var p=0;p<sig.children.length;p++) {
const pp = sig.children[p]
const path = new Path2D(pp.getAttribute('d'));
ctx.fillStyle = pp.getAttribute('fill');
ctx.fill(path);
}
ctx.setTransform(1,0,0,1,0,0);
}
ctx.fillStyle = "black";
ctx.font = "12px Charter, Georgia";
ctx.fillText("DALL·E - " + document.getElementsByClassName('image-prompt-input')[0].value, 16, canvas.height-42+12);
canvas.toBlob(function(blob) {
const item = new ClipboardItem({'image/png': blob });
navigator.clipboard.write([item]);
})
document.getElementById("copy-canvas").outerHTML = "";
});
node.prepend(btn);
}
waitForElm('.task-page-generations').then((elm) => {
addBtn();
});
})();