跨平臺的NodeJS 組件如何解決.NetCore不支持System.Drawing圖形功能的若干問題

這篇文章給大家介紹跨平臺的NodeJS 組件如何解決.NetCore不支持System.Drawing圖形功能的若干問題，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

問題

• 生成縮略圖

• 生成驗(yàn)證碼

• 生成二維碼

• 給圖片加水印

外部引用

• Node  不解釋  https://nodejs.org/en/download/

• sharp 高性能縮略圖  https://github.com/lovell/sharp

• qr-image  二維碼  https://github.com/alexeyten/qr-image

• captchagen  驗(yàn)證碼  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;

        }

    }

效果

生成驗(yàn)證碼代碼
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)

}

效果


生成二維碼代碼

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

效果

安裝Node引用組件時(shí)費(fèi)了不少時(shí)間主要是因?yàn)闆]細(xì)看作者給出的各種環(huán)境下的安裝說明。

加水印目前還沒做好，主要是要修改源碼實(shí)現(xiàn)支持stream類型輸出

拋磚引玉，希望更多朋友分享 Node各種組件的應(yīng)用.

關(guān)于跨平臺的NodeJS 組件如何解決.NetCore不支持System.Drawing圖形功能的若干問題就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。