1

Here what I am trying to do

<!--HTML-->
 <div class="col-md-11" id="divContent">
    <textarea class="ckeditor form-control" name="editor1" id="editor1" rows="6">
        <p>This is a test image</p>
        <img src="https://www.google.com.au/images/srpr/logo11w.png" />
    </textarea>
 </div>

<!--javascript-->
 <script>
        function parseImages()
        {
            //var html = CKEDITOR.instances.editor1.getData();
            var images = document.getElementById("divContent").getElementsByTagName('img');
            for (i = 0, len = images.length; i < len; i++)
            {
                var newSrc= images[i].src.replace('data:image/png;base64,'+ convertToBase64(images[i].src));
                alert(newSrc);
            }
        }

        //convert image to base 64
        function convertToBase64(URL)
        {
            var img = new Image();
            img.src = URL;
            img.onload = function () {
                var canvas = document.createElement("canvas");
                canvas.width = this.width;
                canvas.height = this.height;

                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0);

                var dataURL = canvas.toDataURL("image/png");

                dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
            }
        }
    </script>

I can't catch images inside my var images. Text area is from ck text editor, I tried taking the images from id="editor1" as well but it didn't work either, if anyone have solution than please advise.

Learner
  • 776
  • 6
  • 14
  • 40
  • 1
    Btw this line is odd ```var newSrc= images[i].src.replace('data:image/png;base64,'+ convertToBase64(images[i].src));``` ```convertToBase64``` doesn't return anything. Just call that pass it the image element and set the ```src``` in there when the image is loaded. And seems like the ```onload``` has the same ```replace``` as this line. – GillesC May 12 '15 at 03:03
  • 1
    The content (value) of the `textarea` will always be a string. You cannot call `getElementsByTagName` on a string. Maybe you could create a new document in memory and populate it with this string as the `innerHTML` and then access the tags as elements. – Kevin Boucher May 12 '15 at 03:05
  • 1
    @KevinBoucher I tried to load the document like this document.create(content), but it change my interface with the new content, which I don't want. And I don't know how to do it in memory, can you please give me an example how to do it or give me any other way how to achieve that, may be finding img tags from string. – Learner May 12 '15 at 03:21
  • 2
    `var content = document.createElement('div');` then `content.innerHTML = [your textbox value]` then `content.getElementsByTagName('img')` -- I think that'll work. – Kevin Boucher May 12 '15 at 03:28
  • 1
    @KevinBoucher Thanks, That worked mate, but now I am having another problem on line var dataURL = canvas.toDataURL("image/png"); as Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. I am not very familiar with this, that would be great if you can please advise. – Learner May 12 '15 at 03:36
  • http://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror, http://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported, etc – Kevin Boucher May 12 '15 at 03:46
  • I think it is because secure http of image source. – Learner May 12 '15 at 03:47

0 Answers0