长春怎么做网站,建筑模板厂家大全,建湖人才网手机版,网站建设方案预算Jimp 是一个用于在 Node.js 环境下进行图像处理的 JavaScript 库。要在图片上绘制点并控制点的大小和颜色#xff0c;你可以使用 Jimp 库的相关方法来实现。
这里来看介绍吧#xff0c;英文不好的找翻译gpt和度娘应该都不错
GitHub - jimp-dev/jimp: An image processing l…Jimp 是一个用于在 Node.js 环境下进行图像处理的 JavaScript 库。要在图片上绘制点并控制点的大小和颜色你可以使用 Jimp 库的相关方法来实现。
这里来看介绍吧英文不好的找翻译gpt和度娘应该都不错
GitHub - jimp-dev/jimp: An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
jimp - npm
首先确保你已经安装了 Jimp 库。然后你可以按照以下步骤在图片上绘制点
安装 Jimp
如果还没有安装 Jimp可以使用 npm 进行安装
npm install jimp
基本框架
const Jimp require(jimp);Jimp.read(input_image.jpg).then(image {// 图像处理操作}).catch(err {console.error(err);});具体处理操作片段放入上面图像处理模块就行 调整大小
image.resize(300, Jimp.AUTO); // 宽度300像素高度按比例自动调整调整透明度
image.opacity(0.5); // 设置透明度为50%增加亮度
image.brightness(0.5); // 将亮度增加50%裁剪图像
image.crop(100, 100, 200, 200); // 从坐标(100,100)开始裁剪宽高都是200像素添加滤镜
image.greyscale(); // 转换为灰度图像绘制文本
const font await Jimp.loadFont(Jimp.FONT_SANS_16_WHITE);
image.print(font, 10, 10, Hello, World!);绘制圆形
image.circle({ radius: 50, x: 100, y: 100, edge: Jimp.EDGE_HARDNESS });绘制矩形
image.rect(50, 50, 100, 100, 0xFF0000FF); // 50x50 大小的红色矩形保存图像
image.write(output_image.jpg);旋转图像
image.rotate(90) 其他方法参考
/* Resize */
image.contain( w, h[, alignBits || mode, mode] ); // scale the image to the given width and height, some parts of the image may be letter boxed
image.cover( w, h[, alignBits || mode, mode] ); // scale the image to the given width and height, some parts of the image may be clipped
image.resize( w, h[, mode] ); // resize the image. Jimp.AUTO can be passed as one of the values.
image.scale( f[, mode] ); // scale the image by the factor f
image.scaleToFit( w, h[, mode] ); // scale the image to the largest size that fits inside the given width and height// An optional resize mode can be passed with all resize methods./* Crop */
image.autocrop([tolerance, frames]); // automatically crop same-color borders from image (if any), frames must be a Boolean
image.autocrop(options); // automatically crop same-color borders from image (if any), options may contain tolerance, cropOnlyFrames, cropSymmetric, leaveBorder
image.crop( x, y, w, h ); // crop to the given region/* Composing */
image.blit( src, x, y, [srcx, srcy, srcw, srch] );// blit the image with another Jimp image at x, y, optionally cropped.
image.composite( src, x, y, [{ mode, opacitySource, opacityDest }] ); // composites another Jimp image over this image at x, y
image.mask( src, x, y ); // masks the image with another Jimp image at x, y using average pixel value
image.convolute( kernel ); // applies a convolution kernel matrix to the image or a region/* Flip and rotate */
image.flip( horz, vert ); // flip the image horizontally or vertically
image.mirror( horz, vert ); // an alias for flip
image.rotate( deg[, mode] ); // rotate the image counter-clockwise by a number of degrees. Optionally, a resize mode can be passed. If false is passed as the second parameter, the image width and height will not be resized./* Colour */
image.brightness( val ); // adjust the brighness by a value -1 to 1
image.contrast( val ); // adjust the contrast by a value -1 to 1
image.dither565(); // ordered dithering of the image and reduce color space to 16-bits (RGB565)
image.greyscale(); // remove colour from the image
image.invert(); // invert the image colours
image.normalize(); // normalize the channels in an image/* Alpha channel */
image.hasAlpha(); // determines if an image contains opaque pixels
image.fade( f ); // an alternative to opacity, fades the image by a factor 0 - 1. 0 will haven no effect. 1 will turn the image
image.opacity( f ); // multiply the alpha channel by each pixel by the factor f, 0 - 1
image.opaque(); // set the alpha channel on every pixel to fully opaque
image.background( hex ); // set the default new pixel colour (e.g. 0xFFFFFFFF or 0x00000000) for by some operations (e.g. image.contain and/* Blurs */
image.gaussian( r ); // Gaussian blur the image by r pixels (VERY slow)
image.blur( r ); // fast blur the image by r pixels/* Effects */
image.posterize( n ); // apply a posterization effect with n level
image.sepia(); // apply a sepia wash to the image
image.pixelate( size[, x, y, w, h ]); // apply a pixelation effect to the image or a region/* 3D */
image.displace( map, offset ); // displaces the image pixels based on the provided displacement map. Useful for making stereoscopic 3D images.
完整实例1——使用 Jimp 在图片上绘制点
const Jimp require(jimp);// 读取图片
Jimp.read(input_image.jpg).then(image {const x 100; // 点的 x 坐标const y 150; // 点的 y 坐标const color 0xFF0000FF; // 点的颜色这里是红色const pointSize 3; // 点的大小// 在指定的坐标绘制一个点image.setPixelColor(color, x, y);// 通过绘制周围像素来增加点的大小for (let i x - pointSize; i x pointSize; i) {for (let j y - pointSize; j y pointSize; j) {image.setPixelColor(color, i, j);}}// 保存处理后的图片return image.writeAsync(output_image.jpg);}).catch(err {console.error(err);});在上面的示例中
Jimp.read 方法用于读取图片。使用 setPixelColor 方法在指定的坐标上设置颜色。通过循环设置周围像素的颜色以增加点的大小。最后保存修改后的图片。
你可以根据需要更改点的位置、颜色和大小。修改 x、y、color 和 pointSize 变量以获得你想要的效果。
绘制多个点并设置不同颜色
const Jimp require(jimp);const width 500; // 图片宽度
const height 500; // 图片高度// 创建一个空白的图片
new Jimp(width, height, (err, image) {if (err) throw err;// 需要绘制的点的信息坐标、颜色、大小const points [{ x: 100, y: 100, color: 0xFF0000FF, size: 5 }, // 红色大小为5像素{ x: 200, y: 300, color: 0x00FF00FF, size: 7 }, // 绿色大小为7像素{ x: 400, y: 200, color: 0x0000FFFF, size: 10 } // 蓝色大小为10像素// 添加更多点的信息...];// 绘制每个点points.forEach(point {const { x, y, color, size } point;// 绘制点的周围像素来控制大小for (let i x - size; i x size; i) {for (let j y - size; j y size; j) {image.setPixelColor(color, i, j);}}});// 保存图片image.write(output_image.jpg, () {console.log(图片已保存);});
});这个示例创建了一个指定宽度和高度的空白图片并根据 points 数组中的信息在图片上绘制了多个点。points 数组中每个元素都包含了点的坐标 (x 和 y)、颜色 (color) 和大小 (size)。
x 和 y 表示点的坐标位置。color 是点的颜色采用 RGBA 格式 (0xRRGGBBAA)其中 RR 代表红色、GG 代表绿色、BB 代表蓝色、AA 代表透明度。size 表示点的大小。
然后通过双重循环在指定位置绘制了每个点并根据大小设置了颜色。最后将生成的图片保存为 output_image.jpg。
你可以根据需要更改点的位置、颜色和大小以及在 points 数组中添加更多点的信息来达到你想要的效果。
完整实例2——Jimp 合并两张图片并设置透明度
const Jimp require(jimp);// 读取第一张图片
Jimp.read(image1.jpg).then(image1 {// 读取第二张图片return Jimp.read(image2.png).then(image2 {// 调整第二张图片的大小以适应第一张图片image2.resize(image1.bitmap.width, image1.bitmap.height);// 将两张图片叠加并设置透明度image1.composite(image2, 0, 0, {mode: Jimp.BLEND_SOURCE_OVER, // 叠加模式opacitySource: 0.5 // 设置第二张图片的透明度这里为50%});// 保存合并后的图片return image1.writeAsync(output_image.jpg);}).catch(err {console.error(err);});}).catch(err {console.error(err);});在这个示例中
使用 Jimp.read() 方法读取了两张图片。调整了第二张图片的大小以适应第一张图片。使用 composite() 方法将第二张图片叠加到第一张图片上并设置了透明度。最后保存了合并后的图片。
这段代码将两张图片叠加在一起并设置了第二张图片的透明度为50%0.5。你可以根据需要调整透明度的值来达到你想要的效果。
