首页 > 编程语言 >在nodejs环境里使用canvas和sharp生成图片

在nodejs环境里使用canvas和sharp生成图片

时间:2023-12-28 17:44:20浏览次数:37  
标签:canvas const nodejs URL Canvas window sharp

1.安装依赖包

npm install jsdom canvas

2.实例代码

const {JSDOM} = require('jsdom');
const {createCanvas} = require('canvas');

// 创建一个虚拟DOM环境
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
const window = dom.window;
const document = window.document;

// 在虚拟DOM环境中创建Canvas
const canvas = createCanvas(300, 200);
const context = canvas.getContext('2d');

// 在Canvas上绘制一些内容(这里绘制一个简单的红色矩形)
context.fillStyle = 'red';
context.fillRect(0, 0, 300, 200);

// 从Canvas获取Data URL
const dataUrl = canvas.toDataURL('image/png');

console.log('Data URL:', dataUrl);

// 可以将Data URL传递给其他地方进行处理,比如使用Sharp库转换为图像
// 以下是一个使用Sharp的示例
const sharp = require('sharp');

sharp(Buffer.from(dataUrl.split(',')[1], 'base64'))
    .toFile('output.png', (err, info) => {
        if (err) {
            console.error(err);
        } else {
            console.log('Image saved:', info);
        }
    });

3.运行测试

node test.js

  

标签:canvas,const,nodejs,URL,Canvas,window,sharp
From: https://www.cnblogs.com/navysummer/p/17933221.html

相关文章

  • canvas操作图片像素点保证你看的明明白白
    开场白今天遇到一个场景;就是更改一个图片的颜色;当听到这个。我直呼好家伙;这个是要上天了呀。但是仔细一思考;借助canvas好像也能实现;于是下来研究了一下,并不难;我们下面来看看怎么实现的基本思路主要是获取图片的像素点;ctx.getImageData()然后去更改图片的像素点;最后绘制在画布......
  • sharp
    sharpThetypicalusecaseforthishighspeedNode-APImoduleistoconvertlargeimagesincommonformatstosmaller,web-friendlyJPEG,PNG,WebP,GIFandAVIFimagesofvaryingdimensions.ItcanbeusedwithallJavaScriptruntimesthatprovidesupp......
  • moment js/nodejs/typescript TypeError: moment_1.default is not a function报错解
    引入问题造成的,改一下就好了importmomentfrom'moment'改为constmoment=require('moment');测试一下letret=moment(1617678420000).format('YYYY年MM月DD日hh时mm分ss秒')console.log('日期')console.log(ret)......
  • 前端学习笔记202310学习笔记第一百贰拾贰天-nodejs-命令行操作29
    ......
  • 前端学习笔记202310学习笔记第一百贰拾贰天-nodejs-命令行操作29
    ......
  • [CSharpTips]C# 设置应用程序开机自启动
    C#设置应用程序开机自启动主要是通过动态生成vbs脚本,放置在系统自启动目录下,系统开机时会自动执行vbs脚本启动应用程序开机自启动,自动生成vbs脚本 using(StreamWriterfile=newStreamWriter($@"{Environment.GetFolderPath(Environment.SpecialFolder.Startup)}\StartU......
  • 改变进程优先级,Nodejs的os.setPriority()方法
    改变进程优先级,Nodejs的os.setPriority()方法os.setPriority()方法是os模块的内置应用程序编程接口,在nodejsv10.10之后的版本中有效,用于设置pid和优先级指定的进程的调度优先级。语法:os.setPriority(pid,优先级)参数:此方法有两个参数,如上所述,如下所述:pid:这是一个可选参数。它指定要......
  • nodejs-练手项目中get post需求
    这段时间查看微信小程序,看着上面的好多的接口不能用,就想着弄个小接口先用这,顺便复习一下node首先我们要有必要的npm,node,等基本环境条件基本的代码书写:/*express是node中的服务器软件通过express可以快速的在node中搭建一个web服务器-使用步骤:1.......
  • canvas操作图片像素点保证你看的明明白白
    开场白今天遇到一个场景;就是更改一个图片的颜色;当听到这个。我直呼好家伙;这个是要上天了呀。但是仔细一思考;借助canvas好像也能实现;于是下来研究了一下,并不难;我们下面来看看怎么实现的基本思路主要是获取图片的像素点;ctx.getImageData()然后去更改图片的像素点;最后绘制......
  • knex——nodejs连接数据库
    前言:最近用到了新工具knex——nodejs连接数据库,感觉很不错的库,记录一下使用过程。 一、介绍  二、配置importdotenvfrom'dotenv'dotenv.config()constConfig={client:'pg',connection:process.env.DB_URL,acquireConnectionTimeout:5000,pool:......