TUI image editor get the element from div

user_15111334 0
Viewed 330

What i am trying to do is I am taking the upload image preview and passing that image to the TUI image editor for that, I am trying something like this :

$(document).ready(function() {



    // GET THE IMAGE.
    var img = new Image();
    img.src = $("#image_upload_preview_profile").attr("src");

    // WAIT TILL IMAGE IS LOADED.
    img.onload = function() {
        create_canvas(img);       // FILL THE CANVAS WITH THE IMAGE.
    }

    function create_canvas(img) {
        //Create canvas
        var canvas = document.createElement('canvas');
        canvas.id = "CursorLayer";
        canvas.width = 1224;
        canvas.height = 768;
        canvas.style.zIndex = 8;
        canvas.style.position = "absolute";
        canvas.style.border = "1px solid";
        document.getElementById('#tui-image-editor').appendChild('canvas');
    }
});

By creating canvas and passing that image by taking it's src in the #tui-image-editor . But in that line I ma getting something like this append child cannot be null. The error is in #tui-image-editor. As we are using library for this so what is happen i am not creating any div through HTML there is only one div :

I browse this through everywhere can you suggest me this what is the proper solution for this. As i tried creating a div but that breaks the entire library.

php jquery javascript
1 Answers

I think the error message you get is :

Uncaught TypeError: Cannot read property 'appendChild' of null

and that's because of this :

document.getElementById('#tui-image-editor')

it should be like this (remove the #) :

document.getElementById('tui-image-editor')

getElementById accepts the ID of the element not a selector

then your code has another issue, you're passing a string to appendChild instead of the canvas element.

the correct code would be something like this :

function create_canvas(img) {
    //Create canvas
    var canvas = document.createElement('canvas');
    canvas.id = "CursorLayer";
    canvas.width = 1224;
    canvas.height = 768;
    canvas.style.zIndex = 8;
    canvas.style.position = "absolute";
    canvas.style.border = "1px solid";
    document.getElementById('tui-image-editor').appendChild(canvas);
}
user_94187100
Related