How to use pureimage - 10 common examples

To help you get started, we’ve selected a few pureimage examples, based on popular ways it is used in public projects.

github fkei / textavatar / lib / textavatar.js View on Github external
function genTextAvatar(text, outputFilePathOrStream, size, callback) {
  var img = PImage.make(size, size);
  var ctx = img.getContext('2d');

  var font = PImage.registerFont(`${__dirname}/../public/font/mplus-1m-regular.ttf`, 'mplus-1m-regular');
  font.load(function () {
    ctx.fillStyle = getColor(text);
    ctx.fillRect(0, 0, size, size);
    var fontSize = size / 1.5
    ctx.font = `${fontSize}pt 'mplus-1m-regular'`;
    ctx.fillStyle = "#FFFFFF";
    var t = text.substring(0, 2).toUpperCase();

    console.log(size , fontSize)
    if (t.length == 2) { // 2
        ctx.fillText(t, (size / 2) - (fontSize / 2), size / 1.4);
    } else if (t.length == 1) { // 1
        ctx.fillText(t, size / 2 - (fontSize / 4), size / 1.4);
github anvaka / playground / graph-to-vector-field / index.js View on Github external
rect.y2 = rect.y1 + width;
    height = width;
  } else {
    rect.x2 = rect.x1 + height;
    width = height;
  }

  // Now it's time to go over every single pixel and build a matrix of
  // velocities. I don['t really care about performance here, as this is
  // just an experiment.
  console.log('Collecting velocities...')
  var velocities = accumulateVelocities(rect, layout);

  // Now that we have all velocities, let's encode them into texture:
  console.log('Rendering vector field...')
  var scene = PImage.make(width, height);

  var ctx = scene.getContext('2d');
  var imgData = ctx.getImageData();

  for (var x = 0; x < width; ++x) {
    for (var y = 0; y < height; ++y) {
      var encodedVelocity = encodeVelocity(velocities[x][y]);
      imgData.setPixelRGBA_i(x, y, encodedVelocity.r, encodedVelocity.g, encodedVelocity.b, encodedVelocity.a);
    }
  }

  // Texture is ready. Dump it onto the file system:
  var textureName = OUT_IMAGE_NAME + '.png';
  PImage.encodePNGToStream(scene, fs.createWriteStream(textureName)).then(()=> {
      console.log('wrote out the png file to ' + textureName);
      if (saveOriginalLayout) {
github anvaka / playground / graph-to-vector-field / index.js View on Github external
console.log('Rendering vector field...')
  var scene = PImage.make(width, height);

  var ctx = scene.getContext('2d');
  var imgData = ctx.getImageData();

  for (var x = 0; x < width; ++x) {
    for (var y = 0; y < height; ++y) {
      var encodedVelocity = encodeVelocity(velocities[x][y]);
      imgData.setPixelRGBA_i(x, y, encodedVelocity.r, encodedVelocity.g, encodedVelocity.b, encodedVelocity.a);
    }
  }

  // Texture is ready. Dump it onto the file system:
  var textureName = OUT_IMAGE_NAME + '.png';
  PImage.encodePNGToStream(scene, fs.createWriteStream(textureName)).then(()=> {
      console.log('wrote out the png file to ' + textureName);
      if (saveOriginalLayout) {
        // This is just for debugging purposes.
        return saveGraphLayoutIntoImage(rect, layout);
      }
  }).catch(e => {
      console.log('there was an error writing', e);
  });
}
github fkei / textavatar / lib / textavatar.js View on Github external
function genTextAvatar(text, outputFilePathOrStream, size, callback) {
  var img = PImage.make(size, size);
  var ctx = img.getContext('2d');

  var font = PImage.registerFont(`${__dirname}/../public/font/mplus-1m-regular.ttf`, 'mplus-1m-regular');
  font.load(function () {
    ctx.fillStyle = getColor(text);
    ctx.fillRect(0, 0, size, size);
    var fontSize = size / 1.5
    ctx.font = `${fontSize}pt 'mplus-1m-regular'`;
    ctx.fillStyle = "#FFFFFF";
    var t = text.substring(0, 2).toUpperCase();

    console.log(size , fontSize)
    if (t.length == 2) { // 2
        ctx.fillText(t, (size / 2) - (fontSize / 2), size / 1.4);
    } else if (t.length == 1) { // 1
        ctx.fillText(t, size / 2 - (fontSize / 4), size / 1.4);
    } else { // 0
        ctx.fillText(t, 0, 0);
    }
github mbchang / dynamics / src / js / demo / js / Demo_minimal.js View on Github external
// let filename = opt.out_folder + '/' + opt.exp_name + '_' + prediction_folder + '_' + opt.batch_name + '_ex' + opt.ex + '_step' + s +'.png'
                let filename = opt.out_folder + '/' + prediction_folder + '_' + opt.batch_name + '_ex' + opt.ex + '_step' + s +'.png'

                // console.log(filename)
                // // console.log(prediction_folder)
                // console.log('outfolder',opt.out_folder)
                // console.log('prediction_folder', prediction_folder)
                // // console.log(opt.out_folder)
                // console.log('exp_name', opt.exp_name)
                // // console.log(opt.batch_name)
                // // console.log(opt.ex)
                // // console.log(s)
                // assert(false)

                // let filename = 'out'+s+'_'+s+'.png'  // TODO! rename
                PImage.encodePNG(demo.render.canvas, fs.createWriteStream(filename), function(err) {
                    console.log("wrote out the png file to "+filename);
                });

            }

            s++;
            if( s < num_steps ){
                if (_isBrowser) {
                    setTimeout( f, 100 );
                } else {
                    setTimeout( f, 0 );
                }
            }
        }
        // setInterval(function(){
github fkei / textavatar / lib / textavatar.js View on Github external
if (t.length == 2) { // 2
        ctx.fillText(t, (size / 2) - (fontSize / 2), size / 1.4);
    } else if (t.length == 1) { // 1
        ctx.fillText(t, size / 2 - (fontSize / 4), size / 1.4);
    } else { // 0
        ctx.fillText(t, 0, 0);
    }

    let writeStream;
    if (typeof outputFilePathOrStream === 'string') {
      writeStream = fs.createWriteStream(outputFilePathOrStream);
    } else {
      writeStream = outputFilePathOrStream;
    }

    PImage.encodePNGToStream(img, writeStream).then(() => {
      winston.debug(`wrote out the png file to ${outputFilePathOrStream}`);
      callback(outputFilePathOrStream)
    }).catch((e) => {
      winston.error("there was an error writing", e);
      callback(outputFilePathOrStream)
    });
  });
}
github ekulabuhov / react-native-canvas / src / Text.js View on Github external
generateFontTexture(callback) {    
    let fnt = PImage.registerFont(this.fontUrl, 'Source Sans Pro');

    this.fontLoading = true;

    fnt.load(() => {
      this.font = fnt.font;
      this.fontScale = 1 / this.font.unitsPerEm * this.fontSize;

      let { img, ctx } = this;

      ctx.clearRect(0, 0, this.textureWidth, this.textureHeight);
      ctx.mode = 'REPLACE'; // replace is used to disable alpha blending
      ctx.setFont('Source Sans Pro', this.fontSize);
      ctx.fillStyle = 'red';

      var charHeight = 20,
        charWidth = 20,
github triplecanopy / b-ber / packages / b-ber-tasks / src / cover / index.js View on Github external
return new Promise(resolve => {
            const img = PureImage.make(this.width, this.height)
            const ctx = img.getContext('2d')
            const font = PureImage.registerFont(path.join(__dirname, this.fontFile), this.fontName)

            return font.load(() => {
                ctx.fillStyle = this.colorBackground
                ctx.fillRect(0, 0, this.width, this.height)

                ctx.font = `${this.fontSize}px '${this.fontName}'`
                ctx.fillStyle = this.colorText

                // add text
                ctx.fillText(this.metadata.title, this.marginLeft, this.getPosY())
                ctx.fillText('', this.marginLeft, this.getPosY())

                ctx.fillText('Creator:', this.marginLeft, this.getPosY())
                ctx.fillText(this.metadata.creator, this.marginLeft, this.getPosY())
                ctx.fillText('', this.marginLeft, this.getPosY())
github vladimiry / ElectronMail / src / electron-main / api / endpoints-builders / tray-icon / lib.ts View on Github external
} as const;
    if (!hslColors.from || !hslColors.to) {
        throw new Error(`Failed to parse some of the Hex colors: ${JSON.stringify({from: fromColor, toColor})}`);
    }

    const hslColorShift = {
        hue: hslColors.to.hue - hslColors.from.hue,
        sat: hslColors.to.sat - hslColors.from.sat,
        lum: hslColors.to.lum - hslColors.from.lum,
    } as const;

    const bitmap = cloneBitmap(source);

    for (let x = 0; x < bitmap.width; x++) {
        for (let y = 0; y < bitmap.height; y++) {
            const [red, green, blue, alpha] = pureimageUInt32.getBytesBigEndian(
                bitmap.getPixelRGBA(x, y),
            );

            // skip transparent / semi-transparent pixels
            if (alpha < 10) {
                continue;
            }

            const hsl = rgbToHsl({red, green, blue});
            if (!hsl) {
                throw new Error(`Failed to form HSL value from RGB color: ${JSON.stringify({red, green, blue})}`);
            }

            const newHsl = {
                hue: hsl.hue + hslColorShift.hue,
                sat: hsl.sat + hslColorShift.sat,
github ngageoint / geopackage-js / test / testGeopackage.js View on Github external
fs.readFile(tilePath, function(err, tile) {
          var result = geopackage.addTile(tile, tableName, 0, 0, 0);
          result.should.be.equal(1);
          var canvas;
          if (typeof(process) !== 'undefined' && process.version) {
            canvas = PureImage.make(256, 256);
          } else {
            canvas = document.createElement('canvas');
          }
          GeoPackage.drawXYZTileInCanvas(geopackage, tableName, 0, 0, 0, 256, 256, canvas)
          .then(function(tile) {
            testSetup.diffCanvas(canvas, tilePath, function(err, equal) {
              equal.should.be.equal(true);
              done();
            });
          });
        });
      });

pureimage

Pure JS image drawing API based on Canvas. Export to PNG streams.

MIT
Latest version published 3 months ago

Package Health Score

72 / 100
Full package analysis

Similar packages