从div获取所有图像并使用javascript将base替换为base64

时间:2015-05-12 02:45:32

标签: javascript html

这是我想要做的事情

<!--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>

我无法捕捉var images内的图像。 文本区域来自ck文本编辑器,我尝试从id =“editor1”获取图像,但它也不起作用,如果有人有解决方案,请告知。

0 个答案:

没有答案