diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index e68fa40..cbf1533 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -559,28 +559,59 @@ const delay = ms => new Promise(res => setTimeout(res, ms)); class RandomPixelCanvas { constructor(containerElement, options = {}) { this.container = containerElement; +class RandomPixelPlaceholder { + constructor(parent, options = {}) { + this.container = parent; this.width = options.width || 400; this.height = options.height || 300; this.colors = options.colors || ['#000000', '#ffffff']; this.filter = options.filter || ''; - this.canvas = this.createCanvas(); + this.type = options.type || 'canvas'; // 'canvas' or 'img' + this.element = this.createElement(); - this.fillWithRandomPixels(); + this.addContextToElement(); } - createCanvas() { - const canvas = document.createElement('canvas'); - canvas.width = this.width; - canvas.height = this.height; - canvas.style.filter = this.filter; + createElement() { + if (this.type === 'img') { + const img = document.createElement('img'); + img.style.filter = this.filter; - this.container.appendChild(canvas); + this.container.appendChild(img); - return canvas; + return img; + } else { + const canvas = document.createElement('canvas'); + canvas.width = this.width; + canvas.height = this.height; + canvas.style.filter = this.filter; + + this.container.appendChild(canvas); + + return canvas; + } } - fillWithRandomPixels() { - const ctx = this.canvas.getContext('2d'); + addContextToElement() { + if (this.type === 'img') { + // Create intermediate canvas + const canvas = document.createElement('canvas'); + canvas.width = this.width; + canvas.height = this.height; + + this.fillWithRandomPixels(canvas); + + // Convert canvas to image data URL and set as img src + this.element.src = canvas.toDataURL(); + this.element.width = this.width; + this.element.height = this.height; + } else { + this.fillWithRandomPixels(this.element); + } + } + + fillWithRandomPixels(canvas) { + const ctx = canvas.getContext('2d'); const imageData = ctx.createImageData(this.width, this.height); const data = imageData.data;