跨平台的 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: 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各種組件的應用，