Saturday, April 27, 2019

How to enable image resizing inside contenteditable DIV (aka WYSIWYG editor) in Chrome?

When we put the image inside contenteditable DIV (aka WYSIWYG editor), IE allow resizing by default but Chrome does not. In fact, we can easily implement this features using pure Javascript. I compile DOM handling to mouse, mouseup and other event handler into a sample program.
Source code

GreenRed

Sunday, April 14, 2019

Paste the image into contenteditable div

When we accept the user input data, user input text data most of the time. But for some application, users need to input image and website needs to persist them. With the support of FileReader and clipboardData of paste event, we can easily enable that direct image input. User can directly copy the images from the software like MS-Paint or Web Browser and paste it into our input control (contenteditable div in our scenario).

Sample Text Editor with Image copy-paste support
Show HTML source
SampleImage

Image compression using C#

Sometimes, we need to compress the image files while maintaining the image quality. This can be achieved by the following C# implementation....