Alarich.WebPaint
1.0.0.1
See the version list below for details.
dotnet add package Alarich.WebPaint --version 1.0.0.1
NuGet\Install-Package Alarich.WebPaint -Version 1.0.0.1
<PackageReference Include="Alarich.WebPaint" Version="1.0.0.1" />
paket add Alarich.WebPaint --version 1.0.0.1
#r "nuget: Alarich.WebPaint, 1.0.0.1"
// Install Alarich.WebPaint as a Cake Addin
#addin nuget:?package=Alarich.WebPaint&version=1.0.0.1
// Install Alarich.WebPaint as a Cake Tool
#tool nuget:?package=Alarich.WebPaint&version=1.0.0.1
WebPaint
A NET Framework 4.8-based Custom ASP.NET Server Control for image manipulation.
Current Capabilities
- Load
- Save
- Scale
- Rotate
- Draw rectanges
Getting Started
- Download and install the <a href="https://www.nuget.org/packages/Alarich.WebPaint/">NuGet Package</a>.
- Add the Control to Your website of choice:
//... <%@ Register Assembly="Alarich.WebPaint" Namespace="Alarich" TagPrefix="AHE" %> //... <AHE:WebPaint ID="webPaint" runat="server" Width="500" Height="500" Visible="false" Language="EN" />
- Add Buttons for loading an image and saving the result:
<asp:Button ID="btnLoadImage" runat="server" OnClick="btnLoadImage_Click" Text="Load" /> <asp:Button ID="btnSaveImage" runat="server" OnClientClick="saveImageData();" OnClick="btnSaveImage_Click" Text="Save" />
protected void btnLoadImage_Click(object sender, EventArgs e) { webPaint.DisplayImage("https://picsum.photos/200/300"); webPaint.Visible = true; } protected void btnSaveImage_Click(object sender, EventArgs e) { string path = Server.MapPath("~/Images"); string fileName = DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png"; string fullPath = path + "\\" + fileName; webPaint.UploadImage(fullPath); webPaint.Visible = false; }
- In case steps 2-3 fail: Refer to the exaple projects "TestSite" (vb) or "TestSiteCS" (C#).
Usage
- Load an image and make the control visible:
webPaint.DisplayImage("https://picsum.photos/200/300"); webPaint.Visible = true;
- The user interacts with the control (rotate image, scale image, add rectangles)
- Save the image:
The js function
saveImageData()
stores the currently displayed image as a Base64 string into the hidden field "imageData". The functionUploadImage(string path)
can be used to store that string as an image on the server.
Postbacks
If a postback is unavoidable make sure to save the image data first by calling the js function saveImageData()
, then save the image itself and display it again by calling the method DisplayImage(string imageURL)
.
Resolution
The properties Width
and Height
refer to the resolution of the displayed image. An uploaded image is automatically scaled if neccesary while keeping its resolution. When using the trim
tool the given resolution is enforced aswell.
License
Distributed under the MIT License. See LICENSE.txt
for more information.
Roadmap
- Handle onmouseout
- Add Customization options
- custom css
- disable proportion enforcement
- test ...
Changelog
[1.0.0.1] - 2022-08-05
Rework resulting in better results regarding "rotation" and "undo" functions.
[1.0.0] - 2022-08-04
Initial Release
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET Framework | net48 is compatible. net481 was computed. |
This package has no dependencies.
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Initial release