Upload image - but save image directly in jHtmlArea

Feb 16, 2014 at 9:08 AM
Edited Feb 17, 2014 at 2:52 AM
Having tried several ways to upload and save images in jHtmlArea, I ended up with this solution.
The image is uploaded to the server and converted to data to insert in the src attribute of the <img/> object.

All image data are hereafter in the jHtmlArea document.

The solution is inspired by Eric Bidelman's solution here:

Try the demo here:

OBS! There is a problem with Safari - please help me!

Get the demo here:
Update 01/17/2014:
New download - Safir problem fixed; image resize implemented

Image

Check the jHtmlArea html-content using the left button in the toolbar.

Image

Next plan is to resize the image before sending data back.
Any suggstions are appreciated.

Hope you like it.
Feb 21, 2014 at 12:36 AM
Now - without upload!

Using HTM5 you can read the local image file and resize it on the client-side. then insert the imageurl directly and the image is embedded in the edited tet. Uploading and saving the image is not required.
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>jHTtmlAreaUpload Example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="js/jHtmlArea-0.7.5.min.js"></script>
    <link rel="Stylesheet" type="text/css" href="css/jHtmlArea.css" />
    <img src="css/jHtmlArea_Toolbar_Group__Btn_Select_BG.png" />
    <script type="text/javascript">

        var resize = true;
        var MAX_WIDTH = 200;
        var MAX_HEIGHT = 100;


        function imgResize(urlImg, MAX_WIDTH, MAX_HEIGHT) {

            var img = document.createElement("img");
            img.src = urlImg
            var canvas = document.createElement("canvas");
            //var canvas = $("<canvas/>");
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);
            var width = img.width;
            var height = img.height;

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
            return canvas.toDataURL("image/png");
        }

        $(document).ready(function () {
            $("#btnRemoveCustomHtmlArea").click(function () {
                $("#txtCustomHtmlArea").htmlarea("dispose");
            });

            $("#txtCustomHtmlArea").htmlarea({
                toolbar: [
                    ["html", "|", "bold", "italic", "underline", "strikeThrough", "superscript", "subscript", "|"],
                    ["justifyLeft", "justifyCenter", "justifyRight", "|"],
                    ["indent", "outdent", "|", "forecolor"],
                    ["p", "h1", "h2", "h3", "h4", "h5", "h6", "increaseFontSize", "decreaseFontSize"],
                    ["cut", "copy", "paste", "link", "unlink", "|"],
                    [{
                        css: "datebutton",
                        text: "Today's Date",
                        action: function (btn) { }
                    }],
                    [{
                        css: "image",
                        text: "Indsæt billede",
                        action: function (btn) {
                            $('#afile').unbind('change')
                                .change(function () {
                                    var file = $('#afile')[0].files[0];
                                    var reader = new FileReader();
                                    reader.onloadend = function (e) {
                                        if (resize) $('#txtCustomHtmlArea').htmlarea("image", imgResize(e.target.result, MAX_WIDTH, MAX_HEIGHT))
                                        else $('#txtCustomHtmlArea').htmlarea("image", e.target.result)
                                    }
                                    reader.readAsDataURL(file);
                                })
                                .click();
                        }
                    }]
                ],
                toolbarText: $.extend({}, jHtmlArea.defaultOptions.toolbarText, {
                    "bold": "fed",
                    "italic": "kursiv",
                    "underline": "understreget"
                }),
                css: "style//jHtmlArea.Editor.css",
                loaded: function () {}
            });
            $("div.jHtmlArea div.ToolBar").append("&nbsp;<span name='pbar'></span>");
        })
    </script>
</head>
<body>
    <textarea id="txtCustomHtmlArea" style="width:100%;height:80%"><h3>Another TextArea</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea>
    <input type="file" name="afile" id="afile" accept="image/*" style="visibility:hidden;"/>
</body>
</html>
Erik