nodejs图片裁剪、缩放、水印

关于nodejs下图片的裁剪、水印,网上的模块很多,主要如下:

gm:https://github.com/aheckmann/gm

node-canvas:https://github.com/Automattic/node-canvas

node-images:https://github.com/zhangyuanwei/node-images

Cloudinary:http://cloudinary.com/documentation/node_image_manipulation

这里推荐使用gm模块,首先是安装:

先要安装GraphicsMagick或者ImageMagick,因为gm是基于这两种图形处理工具包的。

直接上源码:

var gm = require("gm");
var spawn = require('child_process').spawn; //提供生成node子进程的方法

var config = {};
config.position = {
    NorthWest:"NorthWest",
    North:"North",
    NorthEast:"NorthEast",
    West:"West",
    Center:"Center",
    East:"East",
    South:"South",
    SouthWest:"SouthWest",
    SouthEast:"SouthEast"
};

/**
 * 裁剪图片
 * @param srcImg    待裁剪的图片路径
 * @param width     宽度
 * @param height    高度
 * @param x         x坐标
 * @param y         y坐标
 */
function cropCurrentImg(srcImg,width, height, x, y) {
    gm(srcImg).crop(width, height, x, y).write(srcImg, function (err) {
        if (err) {
            return handler(err);
        }
    });
}

/**
 * 裁剪图片
 * @param srcImg    待裁剪的图片路径
 * @param destImg   裁剪后的图片路径
 * @param width     宽度
 * @param height    高度
 * @param x         x坐标
 * @param y         y坐标
 */
function cropImg(srcImg,destImg,width, height, x, y) {
    gm(srcImg).crop(width, height, x, y).write(destImg, function (err) {
        if (err) {
            return handler(err);
        }
    });
}

cropCurrentImg("../../public/aa.png","../../public/dest.jpg",100,100,50,50);

/**
 * 缩放图片
 * @param srcImg    待缩放的图片路径
 * @param size      缩放后的图片大小(长宽均为size)
 */
function resizeCurrentImg(srcImg, size) {
    gm(srcImg).resize(size, size).write(srcImg, function (err) {
        if (err) {
            return handler(err);
        }
    });
}

/**
 * 缩放图片,默认输出图片质量75%,格式PNG
 * @param srcImg    待缩放的图片路径
 * @param destImg   缩放后的图片输出路径
 * @param size      缩放后的图片大小(长宽均为size)
 */
function resizeImgWithArgs(srcImg, destImg, size) {
    gm(srcImg).resize(size, size).write(destImg, function (err) {
        if (err) {
            return handler(err);
        }
    });
}

/**
 * 缩放图片
 * @param srcImg    待缩放的图片路径
 * @param destImg   缩放后的图片输出路径
 * @param quality   缩放的图片质量,0~100(质量最优)
 * @param width     缩放后的图片宽度
 * @param height    缩放后的图片高度
 * @param imgFormat 缩放后的图片格式
 */
function resizeImgWithFullArgs(srcImg, destImg, quality, width, height, imgFormat) {
    gm(srcImg).resize(width, height).quality(quality).setFormat(imgFormat).write(destImg, function (err) {
        if (err) {
            return handler(err);
        }
    });
}

/**
 * 添加水印
 * @param srcImg    待添加水印的图片路径
 * @param watermarkImg  水印图片路径
 * @param destImg   添加水印后图片输出路径
 * @param alpha     透明度,0~100(为0表示全透明,100不透明)
 * @param position  水印位置,NorthWest, North, NorthEast, West, Center,East, SouthWest, South, or SouthEast
 */
function addWaterMark(srcImg,watermarkImg,destImg,alpha,position){
    var composite = spawn('gm', ['composite', '-gravity', position, '-dissolve', alpha, watermarkImg, srcImg,destImg]);
    composite.on('exit', function (code) {

    });
}

exports.config = config;
exports.resizeCurrentImg = resizeCurrentImg;
exports.resizeImgWithArgs = resizeImgWithArgs;
exports.resizeImgWithFullArgs = resizeImgWithFullArgs;
exports.cropCurrentImg = cropCurrentImg;
exports.cropImg = cropImg;
exports.addWaterMark = addWaterMark;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏进击的君君的前端之路

关于浮动

2354
来自专栏肖蕾的博客

第六章:常用控件日常科普标签(Lable)图片(Image)按钮(Button)

1.控件是用于开发构建用户界面(UI)控件,帮助完成开发中视窗,文本框,按钮,下拉菜单,等界面元素 2.在LibGdx中,提供的控件有 按钮,勾选框,下拉框,...

1182
来自专栏陈仁松博客

UWP基础教程 - RelativePanel

在Windows10 UWP开发中,新增和改变了很多特性,这次给大家介绍下RelativePanel,这个控件其实和RelativeLayout基本一种使用方式...

3555
来自专栏水击三千

android 补间动画

android开发过程中,为了更好的展示应用程序,应用程序添加动画,能够很好地实现这个功能。如果动画中的图像变化有一定的规律,可以采用自动生成图像的方式来生成动...

26410
来自专栏Android小菜鸡

自定义View学习之路(五)————彩虹环

  走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的彩虹环为例。开始系统的学习View的绘制。 彩虹环需求:

1062
来自专栏前端知识分享

第126天:移动端-原生实现响应式模态框

下面采用HTML+CSS+JavaScript实现模态框,并采用Flex布局和多媒体查询实现响应式。

1363
来自专栏杂七杂八

盒子模型

盒模型(box model)是CSS中的一个重要概念,它是元素大小的呈现方式。需要记住的是:"every element in web design is a ...

3019
来自专栏腾讯IVWEB团队的专栏

Canvas 实现 progress 效果

分享下一个简单的Canvas插件 ,Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用javascript用它来绘制图形。

5930
来自专栏极乐技术社区

『Demo』你想开发的页面特效,这里都能找到~

来源 | 微信小程序联盟 作者 | 极乐蜀黍 这期极乐大叔将小程序内各种页面效果实现方法聚合了一下,以便大家能够迅速而方便的使用。 1 文字跑马灯效果: h...

3108
来自专栏向治洪

css3动画从入门到精通

什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3带来了圆角,半透明...

4156

扫码关注云+社区

领取腾讯云代金券