跨平台的 NodeJS 组件解决 .NetCore 不支持 System.Drawing图形功能的若干问题

问题

• 生成缩略图
• 生成验证码
• 生成二维码
• 给图片加水印

外部引用

• Node  不解释  https://nodejs.org/en/download/
• sharp 高性能缩略图  https://github.com/lovell/sharp
• qr-image  二维码  https://github.com/alexeyten/qr-image
• captchagen  验证码  https://github.com/contra/captchagen
• node-images  轻量级跨平台图像编解码库 https://github.com/zhangyuanwei/node-images
  
  

生成缩略图代码
resizeImage.js

var sharp = require('sharp');

module.exports = function (result, physicalPath, mimeType, maxWidth, maxHeight) {
    // Invoke the 'sharp' NPM module, and have it pipe the resulting image data back to .NET
    sharp(physicalPath)
        .resize(maxWidth || null, maxHeight || null)
        .pipe(result.stream);
}

ResizeController.cs

public class ResizeController : Controller
    {
        private const int MaxDimension = 1000;
        private static string[] AllowedMimeTypes = new[] { "image/jpeg", "image/png", "image/gif" };

        private IHostingEnvironment _environment;
        private INodeServices _nodeServices;

        public ResizeController(IHostingEnvironment environment, INodeServices nodeServices)
        {
            _environment = environment;
            _nodeServices = nodeServices;
        }

        [Route("resize_{maxWidth}_{maxHeight}/{*imagePath}")]
        public async Task<IActionResult> Index(string imagePath, int maxWidth, int maxHeight)
        { 
            imagePath = imagePath;
            // Validate incoming params
            if (maxWidth < 0 || maxHeight < 0 || maxWidth > MaxDimension || maxHeight > MaxDimension
                || (maxWidth + maxHeight) == 0)
            {
                return BadRequest("Invalid dimensions");
            }

            var mimeType = GetContentType(imagePath);
            if (Array.IndexOf(AllowedMimeTypes, mimeType) < 0)
            {
                return BadRequest("Disallowed image format");
            }

            // Locate source image on disk
            var fileInfo = _environment.WebRootFileProvider.GetFileInfo(imagePath);
            if (!fileInfo.Exists)
            {
                return NotFound();
            }

            // Invoke Node and pipe the result to the response
            var imageStream = await _nodeServices.InvokeAsync<Stream>(
                "./Node/resizeImage",
                fileInfo.PhysicalPath,
                mimeType,
                maxWidth,
                maxHeight);
            return File(imageStream, mimeType);
        }

        private string GetContentType(string path)
        {
            string result;
            return new FileExtensionContentTypeProvider().TryGetContentType(path, out result) ? result : null;
        }
    }

效果

生成验证码代码
captchagen.js

var captchagen = require('captchagen');
module.exports = function (result, width, height, text) {
    // optional object arg with keys: height, width, text, font
    var captcha = captchagen.create({  width, height: height, text: text||'8888'});
    captcha.generate(); // Draws the image to the canvas
    /* call `generate()` before running the below */
    captcha.stream().pipe(result.stream); // outputs an image stream. type can be either png or jpeg (png is the default)
}

效果


生成二维码代码

var qr = require('qr-image');
module.exports = function (result, size, url) {
    qr.image(url, { type: 'png', size: size, margin: 1 })
      .pipe(result.stream);
}

效果


总结

安装Node引用组件时费了不少时间主要是因为没细看作者给出的各种环境下的安装说明。

加水印目前还没做好，主要是要修改源码实现支持stream类型输出

抛砖引玉，希望更多朋友分享 Node各种组件的应用，