generate a image from scratch?-CodePudding

how would I go about creating a pixel image from scratch? I am using web technologies (html/css/javascript/react) how would I take some information (such as pixel 1 is #ff5733 color, pixel 2 is #ff3829 color) and generate the corresponding pixel image for that? If anyone could point me in the right direction in generating images at least, that would be awesome.

I can only find information on how to pixelate existing images online. Any help is greatly appreciated. Thank you.

CodePudding user response：

Sketch

One way to dynamically create a siulation of a bitmap pic builds on the dynamic creation of 1x1 divs organized in a tabular grid to represent the pixels of the image to be created and setting their background color according to the value for the respective pixel.

This is neither efficient nor particularly useful - though there is a precedent of a website selling individual pixels for charity purposes ...

Code

The image data are the html color codes for the pixels organized as an array of arrays in row-major fashion. For demo purposes the rendered 'pixels' are set to the size of 16x16.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type"   content="text/html;charset=utf-8">
        <meta http-equiv="expires"        content="0">
        <meta http-equiv="cache-control"  content="private">
        <meta http-equiv="pragma"         content="no-cache">
        <title>SO - Bitmap divs</title>
        <!--
        -->
        <style type="text/css">
            body {
                background-color:   #eee;
            }
            .bitmap {
                display:    table;
            }
            .bitmap > div {
                display:    table-row;
            }
            .pixel {
                width:              16px;
                height:             16px;
                display:            table-cell;
            }
        </style>
        <script type=text/javascript>
            document.addEventListener ( 'DOMContentLoaded', () => {
                // Image definition as pixel bitmap
                let aas_smiley = [
                    [ ['#aaaaaa'], ['#aaaaaa'], ['#000000'], ['#000000'], ['#000000'], ['#aaaaaa'], ['#aaaaaa'], ['#aaaaaa'] ]
                  , [ ['#aaaaaa'], ['#000000'], ['#cccc00'], ['#cccc00'], ['#cccc00'], ['#000000'], ['#aaaaaa'], ['#aaaaaa'] ]
                  , [ ['#000000'], ['#cccc00'], ['#000000'], ['#cccc00'], ['#000000'], ['#cccc00'], ['#000000'], ['#aaaaaa'] ]
                  , [ ['#000000'], ['#cccc00'], ['#cccc00'], ['#cccc00'], ['#cccc00'], ['#cccc00'], ['#000000'], ['#aaaaaa'] ]
                  , [ ['#000000'], ['#cccc00'], ['#cccc00'], ['#000000'], ['#cccc00'], ['#cccc00'], ['#000000'], ['#aaaaaa'] ]
                  , [ ['#aaaaaa'], ['#000000'], ['#cccc00'], ['#cccc00'], ['#cccc00'], ['#000000'], ['#aaaaaa'], ['#aaaaaa'] ]
                  , [ ['#aaaaaa'], ['#aaaaaa'], ['#000000'], ['#000000'], ['#000000'], ['#aaaaaa'], ['#aaaaaa'], ['#aaaaaa'] ]
                  , [ ['#aaaaaa'], ['#aaaaaa'], ['#aaaaaa'], ['#aaaaaa'], ['#aaaaaa'], ['#aaaaaa'], ['#aaaaaa'], ['#aaaaaa'] ]
                ];
                
                let e_table = document.querySelector('.bitmap')
                  ;
                  
                aas_smiley.forEach ( pa_line => { 
                    let e_row = document.createElement('div')
                      ;
                    
                    pa_line.forEach ( (pa_pixel, pn_idx) => {
                        let e_d = document.createElement('div')
                          ;
                          
                        e_d.classList.add('pixel');
                        e_d.setAttribute('style', `background-color: ${pa_pixel[0]};`);
                        e_row.append(e_d);
                    });
                    e_table.append(e_row);  
                });
            });
        </script>
    </head>
    <body>
        <div ></div>
    </body>
</html>

CodePudding user response：

Assuming that you have a two-dimensional array of color values, -- represented below by the variable: mypixels, -- you could use a set of for loops to draw each pixel on a canvas, then convert it to an image:

document.addEventListener('DOMContentLoaded', () => {

 var mypixels = [
  ['#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF'],
  ['#FFF', '#FFF', '#F00', '#FFF', '#F70', '#FFF', '#FFF'],
  ['#FFF', '#FFF', '#F70', '#FFF', '#FF0', '#FFF', '#FFF'],
  ['#FFF', '#FFF', '#FF0', '#FFF', '#0F0', '#FFF', '#FFF'],
  ['#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF'],
  ['#FFF', '#FF0', '#FFF', '#FFF', '#FFF', '#F0F', '#FFF'],
  ['#FFF', '#FFF', '#0F0', '#0FF', '#00F', '#FFF', '#FFF'],
  ['#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF']
 ];

 function createImage(pixels) {
  var canvas = document.createElement('canvas');
  canvas.width = pixels[0].length;
  canvas.height = pixels.length;
  var context = canvas.getContext('2d');
  for(var r = 0; r < canvas.height; r  ) {
   for(var c = 0; c < canvas.width; c  ) {
    context.fillStyle = pixels[r][c];
    context.fillRect(c, r, 1, 1);
   }
  }
  return canvas.toDataURL('image/png');
 }

 document.querySelector('img').src = createImage(mypixels);

});

img {
 width: 200px;
 height: 100px;
 border: 1px dashed black;
 background-color: lightgray;
 image-rendering: pixelated;
 object-fit: contain;
}

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <img/>
 </body>
</html>

For more information on the Javascript Canvas API, MDN Web Docs has a nice reference, and W3Schools has a nice beginner friendly walkthrough. Hopefully this is useful to you!