I have a project I am working on where the user can upload a frame image in PNG format. After they upload the frame they can upload a photo that will be placed behind the frame. The photo can be resized and moved so they can fit their photo into the frame. Once they are happy with their work, they can save their work.
The canvas is a fixed size on the client. This is an ASP.Net MVC4 application and we are using JavaScript / JQuery. I have only worked a little with the System.Drawing library and not sure how this will all fit together, yet. If this can be done easily in using just .Net and JavaScript / JQuery that would be great, but I am not opposed to using a 3rd party .Net library alongside JavaScript / JQuery.
UPDATE
I am goign share the step the user will go through to Resize, Move, and crop the image.
Step 1: The user loads the frame by clicking on some UI and it opens a popup with a working area of 432px x 348px. The frame is a PNG with a transparent center and outer edge. On that window will be an area for the user to upload an image. As you can see in figure 1, the image is loaded at 100% and goes past the window. The user can choose to move the image around and crop or move onto step 2.
Step 2: The user will move the image around to find the handles so they can resize the image. They can chose to crop at this point without resizing, as well, or move onto step 3.
Step 3: The user will resize the image and move it into place. Once they are finished they will crop the uploaded image.
Step 4: This is the final result after the data is sent to the server to be processed.
It can be done in pure .NET. No other libraries have to be used.
In order to add image uploading feature to Your application, take a look at the answer here: Upload Photo To MVC 4 Applications.
If You make user upload the image with a frame in png format with transparency support, You should be able to just draw one image on another, like in a sample code here (a gif is used there): http://www.daniweb.com/web-development/aspnet/threads/112667/how-to-overlay-two-images-in-c.
You can also support frames in other formats (like jpg or bmp), however, in order to support this scenario, You should manually choose which pixels to draw on the original image. One of the easiests solutions would be to make one of the colors a transparency key, so when a pixel is in this color, it won't be drawn in the resulting image. You can choose bright pink or another color that is rarely used (or even allow a user to choose it). It's still not very complex, buy it requires a little bit more code, some additional work to make it fast and a treshold to detect similar pixels in case of bad quality frame images.
If You want some help with the code, let me know.
Related
In my WinRT app I need to draw about 3000 objects on a canvas, where I can translate and zoom the view. Unfortunatley, after adding about 1500 lines to my canvas my Windows 8 App always crashes. What could be the best practice to achieve this?
One solution could be rendering everything on an image (how do I do this?). But then I loose comfort of easy access and editing of every element.
Also my scale and translate is very slow. But since I also need a big overview, it makes no sense to put only the objects of the visible area in the canvas, since on minimum zoom it's still everything and zoomed it's still very laggy cause of add and remove operations.
There are a couple of different things you should employ to have a smooth UX:
Use a Quadtree, whenever you add a shape to your canvas you also put it on your Quadtree. This will be helpful when you will zoom on a portion of the image: you will know what objects are in this portion of the image; you will render them again (against using a cached/pixellated version).
To overcome the potentially lengthy drawing process you could do the following:
display the portion of the cached image overview at the right scale
use a progress indicator to let know the user that the program is working render this portion
when the faint rendering is done, blit it on the screen
A concrete example: Google Maps does that.
I'm developing a PivotViewer (Silverlight 5) control that makes use of Semantic Zoom. There are two trading card templates, a "small" template displaying a low-resolution image, and a "big" template displaying a higher-resolution version of the same image and some text.
The low-resolution images are bundled in the XAP file. I'd like to dynamically download and display a trading card's higher-resolution image when the high-res version of that template becomes visible. But the best I've been able to do thus far is downloading the image when the trading card is selected through SelectionChanged, as seen here:
http://www.beerolf.com/pivottest/SilverlightLoadTest.html
(When you click a trading card, you should see text saying "Big!!!" indicating that the high-res image is being used. If you zoom into a trading card before clicking it, the original image remains.)
This is okay, but I don't want to force users to click trading cards to see higher-resolution images. Is there any way to determine which trading cards are currently visible?
The trick with multiple templates is to get the sizing right.
In the example that you gave, the templates are loading fairly large since there are not that many of them. In a case like that, you are most likely going straight to the larger template.
I would put the source url of the high-res in your larger templates, so they will load automatically. Is there a reason you aren't doing this?
this may seem like an odd question, and I don't know the formats of images so I'll just go ahead and ask...
I'm making a minesweeper game (relevant to different things too) which utilizes a grid of buttons, then I'm adding a sprite to the buttons using backgroundImage. If the grid is 9x9 it's fine. 15x15 it slows down and 30x30 you can visibly see each button being loaded.
That raises me to my question: Which image format would load fastest? Obviously, file size takes a part in the loading speed, however, I am enquiring as to if, say, a jpeg - with the same filesize as a gif - will load faster. or a bmp, png, etc.
I'm asking this as to see if I can get my grid to load faster using a different format.
Thanks!
You want an image format that paints faster. There's only one, the one whose pixel format directly matches the video adapter's setting so that the pixel data can be directly copied without needing format adjustments.
On most any modern machine, that's PixelFormat.Format32bppPArgb. It draws ten times faster than all the other ones.
You won't get that format when loading an image from a resource or a file, you have to create it.
Do note that this still won't give you stellar paint speed if every cell in the grid is a control. Particularly if it is a button, they are very expensive to draw since they support transparency effects. You'll only get ahead here if you draw the entire grid in one Paint event handler. Like the form's.
A completely different approach is to cover up the visible delays with this hack.
use the 8-bit PNG or GIF format and reduce the number of colors in the palette. Some image programs such as PhotoShop allow you to save the image for the web and fine-tune the image settings. By reducing the color palette from 256 to something like 32, you greatly reduce the size of the file. The less colors that the image has, the smaller the file size is going to be.
PNG has a similar feature called "Interlaced". You may want to turn this feature off so that the full image downloads quicker.
Because the 8-bit PNG and GIF formats have the potential to result in much smaller image files, try to keep this in mind when creating graphics and illustrations for your application. Try to keep the amount of colors to a minimum and use flat graphics instead of photographs. This way you can create images with palettes of 16 colors, keeping the file size extremely small and fast to load.
Best Regards
Are you reloading the image every time you paint a button? If so, there's your problem - solve it with a cache.
Are you painting the image at its native size? Runtime resampling can create a performance hit.
use PNG or GIF it's faster types of images
I have a ton of pdfs scans that I have converted to images. Most of these scans contain a lot of whitespace around the edges.
What is the best way to go about finding a boundingbox for the actual content and then subsequently removing the whitespace?
I've thought about writing a program that just displays the image, then you drag a box and its saves the image, and moves on to the next one. This would be VERY time consuming, but it would get the job done. I'd like to be able to automate this process somehow using C#.
Either buy just cropping the image or by perhaps by suggesting a bounding box.
Emgu CV (on SourceForge) is a .NET wrapper around OpenCV, which has numerous image manipulation capabilities, including image filters and a bounding box algorithm that could solve this pretty easily.
http://code.google.com/p/aforge/
Aforge is a complete C# library Not a wrapper. OpenCV is very professional tool in compare of AForge.
Are you talking about scanned documents or scanned photos ? What format are your images in ? It sounds like you need an AutoCrop function.
Here is a freeware C# component that has an autocrop function. It should work well on B/W documents. You will need to see if it works the way you want if you are using photos.
http://www.hi-components.com/nievolution_features.asp
This component would also allow you to write code to load your images, draw a bounding box and and then save the cropped images as needed.
I am working on Image Viewer application and planning to build in WPF. My Image size are usually larger than 3000x3500. After searching for week, I got sample code from MSDN. But it is written in ATL COM.
So I am planning to work and build the Image viewer as follows:
After reading the Image I will scale down to my viewer size, viwer is around 1000x1000. Lets call this Image Data as Display Data. Once displaying this data, I will work only this Display data. For all Image processing operation, I will use this display data and when user choose to save the image, I will apply all the operation to original Image data.
My question is, Is is ok to use Display data for showing and initial image processing operations.
Yes of course. It will speed things up. The only drawbacks are:
Having to replicate the operations on the real bitmap, and
Losing quality if the user zooms in while editing.
These are tradeoffs you'll have to weight against the better performance of the smaller bitmap.