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.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
fkei / textavatar / lib / textavatar.js View on Github 
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);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) {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);
});
}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);
}// 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(){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)
});
});
}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,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())} 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,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, JPG, and streams.
