Add image with URL in canvas HTML/JavaScript-CodePudding

I made canvas where you can add movable texts and image(from local disk). I want to have input field where user types in image URL and than it appears on canvas. But for some reason it's not showing up. I think it's because I made canvas with new fabric. I don't know what it does but I think my code doesn't get along with this new fabric. I don't really understand what it does because I'm currently begginer. Here's my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <input id="imgURL"  type="text" placeholder="Link to image" />
  <input id="imgFile" type="file" accept="image/*" />
  <div  style="display: flex;">
    <div >
      <textarea placeholder="Type something" id="text"></textarea>
      <input type="color" id="color">
      <button id="addText">Add Text</button>
    </div>
    <div id="canvasWrapper">
      <canvas id="canvas"></canvas>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/460/fabric.js"
        integrity="sha512-d5yqsvICrC8y0ivNsNizSCHXjzireXYU6LmzAvcrL97GMwEn0VKx1vclEwvtsh/yPD2EcATnUG1oEtJuFcTE3Q=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        const canvas = new fabric.Canvas('canvas', {
            width: 500,
            height: 500,
            backgroundColor: '#00000'
        });
        var canvasWrapper = document.getElementById('canvasWrapper');

        document.getElementById('imgURL').oninput = function (ev) {
            image.src = this.value;
        }

        document.getElementById('imgFile').onchange = function (ev) {
            let img = document.getElementById('imgFile').files[0];
            if (!img) {
                return;
            }
            let reader = new FileReader();

            reader.onload = function (e) {
                let data = reader.result;
                fabric.Image.fromURL(data, function (img) {
                    if (img.width > canvas.width) {
                        img.scaleToWidth(canvas.width);
                    }
                });
                console.log(data);
            }

            reader.readAsDataURL(img);
        }

        let addTextBtn = document.getElementById('addText');
        let text = document.getElementById('text');
        let color = document.getElementById('color');

        addTextBtn.addEventListener('click', function () {
            let _text = new fabric.Text(text.value, {
                left: 100,
                top: 100,
                fontSize: 20,
                fill: color.value
            });
            canvas.add(_text);
        });

        window.addEventListener('keydown', function (e) {
            if (e.key == "Delete") {
                canvas.remove(canvas.getActiveObject());
            }
        });
    </script>
</body>

</html>

CodePudding user response：

The following are the points I observed in your code:

Regarding the image: oninput listener fabric is missing while initiating image source fabric.image.src = this.value;

Another point is by default canvas color and the text default color is black, when you add text with default color then the text will not appear even the text is added. If you select different color then you can see the text in the canvas. Seems there is no issue in adding text to the canvas.

CodePudding user response：

Your code only prints when the image is larger than the canvas.

if (img.width > canvas.width) {
     img.scaleToWidth(canvas.width);
     canvas.add(img);
}else
   canvas.add(img);