JavaScript从HTML中获取图像？答案

【问题标题】：JavaScript taking image from HTML?JavaScript从HTML中获取图像？
【发布时间】：2017-10-10 03:52:07
【问题描述】：

我有这个代码：

var img = document.createElement("img");
img.src = "Images/test.png";
console.log(img);
img.addEventListener("load", start(img));

它应该创建一个新图像并通过“start()”将其显示到画布元素内的图案上。但它显示一个绿色框而不是图像。让它工作的唯一方法是在 HTML 中定义具有相同源的图像。当我试图使该图像不可见时，画布上的图像也变得不可见。这很令人困惑，因为我的代码是为了创建一个新元素而编写的，但由于某种原因，它与页面上的现有元素相关联。有没有办法解决这个问题？

完整代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Canvas Library</title>
    </head>
    <style type="text/css">
        .invisible {
            display: none;
        }
    </style>

    <body>
        <p id="text">Unknown</p>
        <canvas width="400" height="400" id="canvas"></canvas>
        <img src="Images/test.png" class="invisible"></img>
        <script type="text/javascript">
var Canvas = document.getElementById("canvas");
var label = document.getElementById("text");

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

console.log("" + rgbToHex(255, 100, 50));

var distance = function(x1, y1, x2, y2) {
    var a = Math.pow(x2 - x1, 2);
    var b = Math.pow(y2 - y1, 2);
    return Math.sqrt(a + b);
};

//Declare the Canvas Object
var canvasObj = function(src) {

    //Function to see if a line is colliding with a certain point Has an accuracy of about 1 pixel
    this.lineIsColliding = function(startX, startY, endX, endY, testX, testY) {
        const v1 = {
            x: endX - startX,
            y: endY - startY
        };
        const l2 = v1.x * v1.x + v1.y * v1.y;
        if (l2 === 0) {
            return false;
        } // line has no length so can't be near anything
        const v2 = {
            x: testX - startX,
            y: testY - startY
        };
        const u = (v1.x * v2.x + v1.y * v2.y) / l2;
        return u >= 0 && u <= 1 && Math.abs((v1.x * v2.y - v1.y * v2.x) / Math.sqrt(l2)) < 1;
    };
    var self = this;
    //The Canvas to draw on
    this.src = src;
    //The context of source(used for drawing)
    this.ctx = this.src.getContext("2d");
    //The Mouse Move Function
    this.showCoordinates = function(e) {
        console.log(e);
        label.innerHTML = "<b>x: </b>" + e.offsetX + " <b>y: </b>" + e.offsetY + ", " + self.lineIsColliding(358, 277, 365, 268, e.offsetX, e.offsetY);
    };
    //Show coordinates variable
    this.showCoordinatesBool = true;
    //The boolean to tell if we should use stroke
    this.useStroke = true;
    //The fill style and stroke style(can be color, pattern, or gradient)
    this.fillStyle = "#000000";
    this.strokeStyle = "#000000";
    //The Line cap style (can be butt, square, or round)
    this.lineCap = "butt";
    //The Stroke Weight (how wide the strokes are)
    this.strokeWeightVar = "default";
    //The corner style (how the corners are drawn)
    this.cornerStyle = "miter";
    //The Shadow Color
    this.shadowColorVar = "#000000";
    //The shadow Blur
    this.shadowBlurVar = 0;
    //The shadow Offsets
    this.shadowOffsetX = 0;
    this.shadowOffsetY = 0;
    //The style of the current font
    this.fontStyle = "normal";
    //The variant of the current font
    this.fontVariant = "normal";
    //The thickness of the current font
    this.fontThickness = "normal";
    //The height/size of the current font
    this.fontSize = 10;
    //The family of the current font
    this.fontFamily = "sans-serif";
    //Function to set the fill style
    this.fill = function(style) {
        this.fillStyle = style;
        this.ctx.fillStyle = style;
    };

    //Function to set the stroke style
    this.stroke = function(style) {
        this.useStroke = true;
        this.strokeStyle = style;
        this.ctx.strokeStyle = style;
    };

    //Function to delete the stroke
    this.noStroke = function() {
        this.useStroke = false;
    };

    //Function to draw a rectangle
    this.rect = function(x, y, width, height) {
        this.ctx.fillRect(x, y, width, height);
        if (this.useStroke) {
            this.ctx.strokeRect(x, y, width, height);
        }

    };

    //Function to draw a corner
    this.corner = function(style, centerX, centerY, x1, y1, x2, y2) {
        this.ctx.lineJoin = style;
        this.cornerStyle = style;
        this.ctx.beginPath();
        this.ctx.moveTo(x1, y1);
        this.ctx.lineTo(centerX, centerY);
        this.ctx.lineTo(x2, y2);
        this.ctx.stroke();
    };

    //Function to draw a hollow rectangle
    this.hollowRect = function(x, y, width, height) {
        this.ctx.strokeRect(x, y, width, height);
    };

    //Function to set the canvas background 
    this.background = function(style) {
        this.fillStyle = style;
        this.ctx.fillStyle = style;
        this.ctx.fillRect(0, 0, this.src.width, this.src.height);
    };

    //Function to draw a line
    this.line = function(startX, startY, endX, endY) {
        this.ctx.beginPath();
        this.ctx.moveTo(startX, startY);
        this.ctx.lineTo(endX, endY);
        this.ctx.stroke();
    };

    //Function to change line style
    this.lineCap = function(mode) {
        this.ctx.lineCap = mode;
        this.lineCap = mode;
    };

    //Function to change stroke weight
    this.strokeWeight = function(weight) {
        this.useStroke = true;
        this.ctx.lineWidth = weight;
        this.strokeWeightVar = weight;
    };

    //Function to clear a certain area
    this.clearArea = function(x, y, width, height) {
        this.ctx.clearRect(x, y, width, height);
    };
    //Turn the show coordinate function on
    this.enableCoordinates = function() {
        this.showCoordinatesBool = true;
        this.src.addEventListener("mousemove", this.showCoordinates);
    };
    /*Shadows*/

    //Set the shadow color
    this.shadowColor = function(color) {
        this.shadowColorVar = color;
        this.ctx.shadowColor = color;
    };
    //Set the shadow blur
    this.shadowBlur = function(blur) {
        this.shadowBlurVar = blur;
        this.ctx.shadowBlur = blur;
    };
    //Set the shadow offset
    this.shadowOffset = function(offsetX, offsetY) {
        this.shadowOffsetX = offsetX;
        this.shadowOffsetY = offsetY;
        this.ctx.shadowOffsetX = offsetX;
        this.ctx.shadowOffsetY = offsetY;
    };
    //Remove shadows
    this.noShadow = function() {
        this.shadowOffset(0, 0);
        this.shadowColor("#000000");
        this.shadowBlur(0);
    };

    //Function to see if a rectangle is colliding with a specific point
    this.rectIsColliding = function(rectX, rectY, rectWidth, rectHeight, testX, testY) {
        this.ctx.rect(rectX, rectY, rectWidth, rectHeight);
        return this.ctx.isPointInPath(testX, testY);
    };
    //Function that returns a custom linear gradient
    this.linearGradient = function(startX, startY, endX, endY, colorStops) {
        var gradient = this.ctx.createLinearGradient(startX, startY, endX, endY);
        for (var i = 0; i < colorStops.length; i++) {
            gradient.addColorStop(colorStops[i].location, colorStops[i].color);
        }
        return gradient;
    };
    //Function that returns a custom radial gradient
    this.radialGradient = function(x0, y0, r0, x1, y1, r1, colorStops) {
        var radialGradientVar = this.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
        for (var i = 0; i < colorStops.length; i++) {
            radialGradientVar.addColorStop(colorStops[i].location, colorStops[i].color);
        }
        return radialGradientVar;
    };
    //Function that allows you to create a pattern
    this.pattern = function(image, mode) {
        var pat = this.ctx.createPattern(image, mode);
        return pat;
    };
    //Function that allows you to make text. Optional width parameter to limit the width of the text. Optional font parameter if you would like to set it manually.
    this.text = function(text, x, y, width, font) {
        if (font) {
            this.ctx.font = font;
        }
        else {
            this.ctx.font = this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily;
            console.log(this.ctx.font);
            console.log(this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily);
        }
        if (width) {
            this.ctx.fillText(text, x, y, width);
            if (this.useStroke) {
                this.ctx.strokeText(text, x, y, width);
            }
        }
        else {
            this.ctx.fillText(text, x, y);
            if (this.useStroke) {
                this.ctx.strokeText(text, x, y);
            }
        }

    };
    //Function that allows you to make hollow text. Optional width parameter to limit the width of the text. Optional font parameter if you would like to set it manually. Font Size MUIST be an INTEGER if you do not specify the font parameter
    this.hollowText = function(text, x, y, width, font) {
        if (font) {
            this.ctx.font = font;
        }
        else {
            this.ctx.font = this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily;
            console.log(this.ctx.font);
            console.log(this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily);
        }
        this.ctx.strokeText(text, x, y, width);
    };
    this.textWidth = function(text) {
        return this.ctx.measureText(text).width;
    };
};
//The following code is for testing purposes ONLY!
var start = function(image) {
    //Create a new canvas
    var myCanvas = new canvasObj(Canvas);
    //Set the Background Color
    myCanvas.background("#ff0000");
    //Set the fill color
    myCanvas.fill("#0000ff");
    //Set the Stroke Color
    myCanvas.stroke("#00ff00");
    //Draw a rectangle
    myCanvas.rect(164, 153, 50, 100);
    //Draw a hollow rectangle
    myCanvas.hollowRect(300, 300, 50, 50);
    //Disable the Stroke
    myCanvas.noStroke();
    //Draw a rectangle with no stroke
    myCanvas.rect(21, 18, 50, 50);
    //Change the Stroke color
    myCanvas.stroke("#ffff00");
    //Change the stroke weight
    myCanvas.strokeWeight(10);
    //Change the line cap
    myCanvas.lineCap("round");
    //Draw a line
    myCanvas.line(350, 30, 250, 80);
    //Draw a corner
    myCanvas.corner("miter", 50, 135, 100, 185, 100, 110);
    //Enable the Coordinates
    myCanvas.enableCoordinates();
    //Clear a space from the canvas
    myCanvas.clearArea(6, 245, 100, 100);
    //Set the Shadow Color
    myCanvas.shadowColor("black");
    //Set the shadow Blur
    myCanvas.shadowBlur(20);
    //Set the shadow offset
    myCanvas.shadowOffset(10, 0);
    //Set the stroke
    myCanvas.noStroke();
    //Set the fill color
    myCanvas.fill("orange");
    //Draw a rectangle
    myCanvas.rect(268, 167, 30, 30);
    //Remove the shadow
    myCanvas.noShadow();
    //Test if the rectangle is colliding with a specific point
    if (myCanvas.rectIsColliding(268, 167, 30, 30, 290, 170)) {
        myCanvas.fill("green");
        myCanvas.rect(358, 0, 50, 46);
    }
    else {
        myCanvas.fill("yellow");
        myCanvas.rect(362, 0, 50, 46);
    }


    //Test if a line is colliding with a certain point
    console.log("function returned: " + myCanvas.lineIsColliding(358, 277, 365, 268, 362, 271));
    if (myCanvas.lineIsColliding(358, 277, 365, 268, 362, 271)) {
        console.log("line is colliding!");
        myCanvas.line(358, 277, 365, 268);
    }
    else {
        console.log("line is not colliding!");

    }

    myCanvas.line(0, 0, 50, 10);

    //Color stop used for creating gradients
    var colorStop = function(location, color) {
        this.location = location;
        this.color = color;
    };

    console.log(distance(0, 0, 50, 10));

    myCanvas.fill(myCanvas.linearGradient(259, 77, 359, 127, [new colorStop(0.0, "green"), new colorStop(1.0, "blue")]));
    myCanvas.rect(259, 87, 100, 50);
    myCanvas.fill(myCanvas.radialGradient(309, 225, 10, 309, 225, 50, [new colorStop(0.0, "yellow"), new colorStop(1.0, "green")]));
    myCanvas.rect(259, 200, 100, 50);
    var pattern = myCanvas.pattern(image, "repeat");
    myCanvas.fill(pattern);
    myCanvas.rect(132, 81, 50, 100);

    myCanvas.fill(rgbToHex(0, 0, 0));
    //Setup text
    myCanvas.fontSize = 50;
    myCanvas.fontStyle = "oblique";
    myCanvas.fontVariant = "small-caps";
    myCanvas.fontThickness = 900;
    myCanvas.fontFamily = "sans";
    //Draw text
    myCanvas.text("Test", 200, 200);
    console.log(myCanvas.textWidth("Test"));
};


var img = document.createElement("img");
img.src = "Images/test.png";
console.log(img);
img.addEventListener("load", start(img));
</script>
    </body>

</html>

【问题讨论】：

我们看不到任何画布，也看不到任何其他现有图像？！

标签： javascript html image html5-canvas

【解决方案1】：

您尝试在加载之前使用img，因为您立即执行start 函数。

使用

img.addEventListener("load", function(){start(img);});

换句话说，您需要将一个函数作为参数传递给addEventListener，但您需要调用一个函数并传递结果

【讨论】：

【解决方案2】：

当您以这种方式创建图像时，您将其创建为 DOM 元素。然后，您需要将其添加到 DOM 中您希望它显示的位置。

例如可能：

document.body.appendChild(img)

这将导致图像被加载，随后您的start() 函数将被调用。

现在我不确定你是如何加载图像以供 Canvas 渲染的，但它应该能让你更进一步。

【讨论】：