mirror of
https://github.com/aspnet/JavaScriptServices.git
synced 2025-12-22 17:47:53 +00:00
Add image resizing example. Currently used base64 encoded data transfer and the 'jimp' module, neither of which are fast. Will replace these shortly.
This commit is contained in:
@@ -15,6 +15,11 @@ namespace NodeServicesExamples.Controllers
|
||||
return View();
|
||||
}
|
||||
|
||||
public IActionResult ImageResizing()
|
||||
{
|
||||
return View();
|
||||
}
|
||||
|
||||
public IActionResult Error()
|
||||
{
|
||||
return View("~/Views/Shared/Error.cshtml");
|
||||
|
||||
61
samples/misc/NodeServicesExamples/Controllers/ResizeImage.cs
Normal file
61
samples/misc/NodeServicesExamples/Controllers/ResizeImage.cs
Normal file
@@ -0,0 +1,61 @@
|
||||
using System;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.AspNetCore.Hosting;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.AspNetCore.NodeServices;
|
||||
using Microsoft.AspNetCore.StaticFiles;
|
||||
|
||||
namespace NodeServicesExamples.Controllers
|
||||
{
|
||||
public class ResizeImageController : Controller
|
||||
{
|
||||
private const int MaxDimension = 1000;
|
||||
|
||||
private IHostingEnvironment _environment;
|
||||
private INodeServices _nodeServices;
|
||||
|
||||
public ResizeImageController(IHostingEnvironment environment, INodeServices nodeServices)
|
||||
{
|
||||
_environment = environment;
|
||||
_nodeServices = nodeServices;
|
||||
}
|
||||
|
||||
[Route("resize/{*imagePath}")]
|
||||
public async Task<IActionResult> Index(string imagePath, int maxWidth, int maxHeight)
|
||||
{
|
||||
// Validate incoming params
|
||||
if (maxWidth > MaxDimension || maxHeight > MaxDimension || (maxHeight <= 0 && maxWidth <= 0))
|
||||
{
|
||||
return BadRequest("Invalid dimensions");
|
||||
}
|
||||
|
||||
// Locate source image on disk
|
||||
var fileInfo = _environment.WebRootFileProvider.GetFileInfo(imagePath);
|
||||
if (!fileInfo.Exists)
|
||||
{
|
||||
return NotFound();
|
||||
}
|
||||
|
||||
// Invoke Node and convert the base64 result back to bytes
|
||||
var mimeType = GetContentType(imagePath);
|
||||
var resizedImage = await _nodeServices.Invoke<ResizeImageResult>("./Node/resizeImage", fileInfo.PhysicalPath, mimeType, maxWidth, maxHeight);
|
||||
return File(Convert.FromBase64String(resizedImage.Base64), mimeType);
|
||||
}
|
||||
|
||||
private string GetContentType(string path)
|
||||
{
|
||||
string result;
|
||||
if (!new FileExtensionContentTypeProvider().TryGetContentType(path, out result))
|
||||
{
|
||||
result = "application/octet-stream";
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
private class ResizeImageResult
|
||||
{
|
||||
public string Base64 { get; set; }
|
||||
}
|
||||
}
|
||||
}
|
||||
15
samples/misc/NodeServicesExamples/Node/resizeImage.js
Normal file
15
samples/misc/NodeServicesExamples/Node/resizeImage.js
Normal file
@@ -0,0 +1,15 @@
|
||||
var Jimp = require('jimp');
|
||||
|
||||
module.exports = function(cb, physicalPath, mimeType, maxWidth, maxHeight) {
|
||||
Jimp.read(physicalPath, function (err, loadedImage) {
|
||||
if (err) {
|
||||
cb(err);
|
||||
}
|
||||
|
||||
loadedImage
|
||||
.contain(maxWidth > 0 ? maxWidth : Jimp.AUTO, maxHeight > 0 ? maxHeight : Jimp.AUTO)
|
||||
.getBuffer(mimeType, function(err, buffer) {
|
||||
cb(err, { base64: buffer && buffer.toString('base64') });
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<h1>Image Resizing</h1>
|
||||
|
||||
<p>
|
||||
This sample shows how the NPM module <a href="https://www.npmjs.com/package/jimp"><code>jimp</code></a>
|
||||
can be used for dynamic image resizing from within an ASP.NET Core application. There is one copy of the
|
||||
following image on disk, but we can set up an MVC action method that returns it resized to fit within an
|
||||
arbitrary width and height.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<em><a href="https://www.flickr.com/photos/dcoetzee/3572948635">Parrot</a>
|
||||
by <a href="https://www.flickr.com/photos/dcoetzee/">D Coetzee</a>
|
||||
is dedicated to the <a href="http://creativecommons.org/publicdomain/zero/1.0/">public domain (CC0)</a></em>
|
||||
</p>
|
||||
|
||||
<h3>100px wide [<a href="/resize/images/parrot.jpg?maxWidth=100">open</a>]</h3>
|
||||
<img src="/resize/images/parrot.jpg?maxWidth=100" />
|
||||
|
||||
<h3>200px wide [<a href="/resize/images/parrot.jpg?maxWidth=200">open</a>]</h3>
|
||||
<img src="/resize/images/parrot.jpg?maxWidth=200" />
|
||||
|
||||
<h3>400px wide [<a href="/resize/images/parrot.jpg?maxWidth=400">open</a>]</h3>
|
||||
<img src="/resize/images/parrot.jpg?maxWidth=400" />
|
||||
|
||||
<h3>800px wide [<a href="/resize/images/parrot.jpg?maxWidth=800">open</a>]</h3>
|
||||
<img src="/resize/images/parrot.jpg?maxWidth=800" />
|
||||
@@ -8,5 +8,6 @@
|
||||
|
||||
<ul>
|
||||
<li><a asp-action="ES2015Transpilation">ES2015 transpilation</a>
|
||||
<li><a asp-action="ImageResizing">Image resizing</a>
|
||||
</li>
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"babel-core": "^6.7.4",
|
||||
"babel-preset-es2015": "^6.6.0"
|
||||
"babel-preset-es2015": "^6.6.0",
|
||||
"jimp": "^0.2.24"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
samples/misc/NodeServicesExamples/wwwroot/images/parrot.jpg
Normal file
BIN
samples/misc/NodeServicesExamples/wwwroot/images/parrot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Reference in New Issue
Block a user