rebootcode / svg-edit

Automatically exported from code.google.com/p/svg-edit
MIT License
0 stars 0 forks source link

Simple image picker from local files #898

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
I made a simple modification that allows picking local images to be used in the 
editor and embedded as data-uris.

It uses the file reader api, here's my code:

in svg-editor.js, in this section:

            // use HTML5 File API: http://www.w3.org/TR/FileAPI/
            // if browser has HTML5 File API support, then we will show the open menu item
            // and provide a file input to click.  When that change event fires, it will
            // get the text contents of the file and send it to the canvas
            if (window.FileReader) {
.... snip ...
                // BEGIN MODIFICATION:
                var inp3 = $('<input type="file">').change(function () {
                    if (this.files.length == 1) {
                        var reader = new FileReader();
                        reader.onloadend = function (e) {
                            svgCanvas.setGoodImage(e.target.result);
                            $("#tool_image").click();
                        };
                        reader.readAsDataURL(this.files[0]);
                    }
                });
                $("#tool_image").show().prepend(inp3);

                // END MODIFICATION
}

That's all. It works in Chrome and Firefox as far as I tested.

Original issue reported on code.google.com by and...@tachyon-labs.com on 26 Jan 2012 at 2:34

GoogleCodeExporter commented 9 years ago
This looks interesting.  Can you prepare a patch?  I would like to see 
browser.js updated with a check for File API support too.

Original comment by codedr...@gmail.com on 22 Feb 2012 at 6:11

GoogleCodeExporter commented 9 years ago
i added in and look like it's work out good.
i don't have any problem with insert.

when i save the svg afterward, then it's crashing on chrome with a 3mb image.
firefox so far work ok with 4 image of 3 mb.
i stop testing since it's failing on chrome.

great find by the way.

i'm now using telerik and made my own image button to overwrite the one from 
editor.
i was able to use jquery with telerik to work with my aspx page.
so far no insert or saving problem.

Original comment by PaulS...@gmail.com on 11 Apr 2012 at 7:13

GoogleCodeExporter commented 9 years ago
Is there an updated version of this for the FileReader?
I think the original code has changed slightly.

Original comment by dezigns...@gmail.com on 4 Jan 2013 at 6:27