How to use the canvas.loadImage function in canvas

To help you get started, we’ve selected a few canvas 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.

github drake7707 / paintbynumbersgenerator / src-cli / main.ts View on Github external
console.log("Usage: exe -i  -o  [-c ]");
        process.exit(1);
    }

    let configPath = args.c;
    if (typeof configPath === "undefined") {
        configPath = path.join(process.cwd(), "settings.json");
    } else {
        if (!path.isAbsolute(configPath)) {
            configPath = path.join(process.cwd(), configPath);
        }
    }

    const settings: CLISettings = require(configPath);

    const img = await canvas.loadImage(imagePath);
    const c = canvas.createCanvas(img.width, img.height);
    const ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0, c.width, c.height);
    let imgData = ctx.getImageData(0, 0, c.width, c.height);

    // resize if required
    if (settings.resizeImageIfTooLarge && (c.width > settings.resizeImageWidth || c.height > settings.resizeImageHeight)) {
        let width = c.width;
        let height = c.height;
        if (width > settings.resizeImageWidth) {
            const newWidth = settings.resizeImageWidth;
            const newHeight = c.height / c.width * settings.resizeImageWidth;
            width = newWidth;
            height = newHeight;
        }
        if (height > settings.resizeImageHeight) {
github callmekory / nezuko / src / events / guildMemberAdd.ts View on Github external
const { welcomeChannel, prefix } = JSON.parse(db.get('config') as string)

  const channel = member.guild.channels.get(welcomeChannel) as TextChannel

  /////////////////////////////////////////////////////////////////////
  if (!channel) return

  Canvas.registerFont(path.join(__dirname, '..', 'core', 'images', 'GENUINE.ttf'), {
    family: 'GENUINE'
  })

  const canvas = Canvas.createCanvas(800, 400)

  const ctx = canvas.getContext('2d')

  const background = await Canvas.loadImage(`${__dirname}/../core/images/welcome.png`)
  ctx.drawImage(background, 0, 0, canvas.width + 2, canvas.height + 2)

  ctx.strokeStyle = 'black'
  ctx.strokeRect(0, 0, canvas.width, canvas.height)

  // Greetings
  ctx.font = '50px GENUINE'
  ctx.fillStyle = '#dfdfdf'
  ctx.fillText(`WELCOME:`, 20, 380)

  // Username
  ctx.font = '50px GENUINE'
  ctx.fillStyle = '#a2ba00'
  const textLength = member.user.username.length
  ctx.fillText(member.user.username.toUpperCase(), 280 - textLength, 380)
  ctx.strokeText(member.user.username.toUpperCase(), 280 - textLength, 380)
github CODAIT / max-tfjs-models / image-segmenter / examples / app.js View on Github external
return new Promise(async (resolve, reject) => {
    const img = await loadImage(imageInput)
    let canvas = createCanvas(img.width, img.height)
    let ctx = canvas.getContext('2d')
    await ctx.drawImage(img, 0, 0)
    resolve(canvas)
  })
}
github LeaPhant / skyblock-stats / renderer.js View on Github external
renderArmor: async (type, color) => {
        let canvas = createCanvas(128, 128);
        let ctx = canvas.getContext('2d');

        ctx.imageSmoothingEnabled = false;

        let armor_base = await loadImage(path.resolve(__dirname, 'public', 'resources', 'img', 'textures', 'item', `leather_${type}.png`));
        let armor_overlay = await loadImage(path.resolve(__dirname, 'public', 'resources', 'img', 'textures', 'item', `leather_${type}_overlay.png`));

        ctx.drawImage(armor_base, 0, 0, 16, 16, 0, 0, canvas.width, canvas.height);

        let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

        for(let i = 0; i < imageData.data.length; i += 4){
            let r = imageData.data[i];
            let alpha = r / 255;

            imageData.data[i] = color[0] * alpha;
            imageData.data[i + 1] = color[1] * alpha;
            imageData.data[i + 2] = color[2] * alpha;
        }

        ctx.clearRect(0, 0, canvas.width, canvas.height);
github discordjs / guide / code-samples / popular-topics / canvas / index.js View on Github external
ctx.strokeRect(0, 0, canvas.width, canvas.height);

	ctx.font = '28px sans-serif';
	ctx.fillStyle = '#ffffff';
	ctx.fillText('Welcome to the server,', canvas.width / 2.5, canvas.height / 3.5);

	ctx.font = applyText(canvas, `${member.displayName}!`);
	ctx.fillStyle = '#ffffff';
	ctx.fillText(`${member.displayName}!`, canvas.width / 2.5, canvas.height / 1.8);

	ctx.beginPath();
	ctx.arc(125, 125, 100, 0, Math.PI * 2, true);
	ctx.closePath();
	ctx.clip();

	const avatar = await Canvas.loadImage(member.user.displayAvatarURL);
	ctx.drawImage(avatar, 25, 25, 200, 200);

	const attachment = new Discord.Attachment(canvas.toBuffer(), 'welcome-image.png');

	channel.send(`Welcome to the server, ${member}!`, attachment);
});
github kothic / kothic-js / src / style / gallery.js View on Github external
      .map((image) => loadImage(image).then((data) => self.images[image] = data));