Question

在我的应用程序中，我使用HTML元素画布生成一个圆圈。

圆圈的生成效果很好：正确渲染圆圈。

问题是我必须将该圆放在一个选项的选项中，据我所知，不可能在选项中放置画布，因此我可能必须将画布转换为base64图像所以我应该能够将它用作选项的背景图像。

但是，从canvas到base64图像的转换不起作用，因为浏览器正在渲染空白图像。

我为故障排除创建了一个小提琴：https://jsfiddle.net/4hfmp0cs/

下面你可以看到小提琴的javascript代码。

function foo()
{
       var circle = getStateCircle("opened");
      //var gl = circle.getContext("webgl", { preserveDrawingBuffer: true });
      var dataUrl = circle.toDataURL("image/png");

      var img = document.createElement("img");
      img.src = dataUrl;
      document.getElementById("container").appendChild(img);
}



function getStateCircle(state)
{
                var stateCircle;

                if(state === "opened")
                {
                    stateCircle = new Circle("#ffcc00", "20px");
                }

                else if(state === "accepted")
                {
                    stateCircle = new Circle("#33cc33", "20px");
                }

                else if (state === "refused")
                {
                    stateCircle = new Circle("#ff3300", "20px");
                }

                else if (state === "closed")
                {
                    stateCircle = new Circle("black", "20px");
                }

                else
                {
                    throw new Error("The state of the offer is unknown");
                }

                stateCircle.buildCircle();
                var circle = stateCircle.getCircle();


                return circle;
}

function Circle(color, size)
{
    this._color = color;
    this._size = size;

    this._circle;

    this.buildCircle = function()
    {
        var style = {
            borderRadius: "50%",
            backgroundColor: this._color,
            height: this._size,
            width: this._size
        }

        this._circle = new ElementBuilder("canvas").withStyleObject(style).getElement();
    }

    this.buildCircleAndAppendTo = function(father)
    {
        this._buildCircle();
        father.appendChild(this._circle);
    }

    this.getCircle = function()
    {
        return this._circle;
    }
}

function ElementBuilder(elementName) {
    var This = this;
    this.element = document.createElement(elementName);

    this.withName = function (name)
    {
        this.element.setAttribute("name", name);
        return this;
    };

    this.withAttribute = function (attributeName, attributeValue)
    {
        this.element.setAttribute(attributeName, attributeValue);
        return this;
    };

    this.withId = function (id)
    {
        this.element.setAttribute("id", id);
        return this;
    }

    this.withClass = function (className)
    {
        this.element.setAttribute("class", className);
        return this;
    }

    this.addClass = function (className)
    {
        this.element.className = this.element.className + " " + className;
        return this;
    }

    this.withTextContent = function (text)
    {
        this.element.textContent = text;
        return this;
    }

    this.withValue = function (value)
    {
        this.element.value = value;
        return this;
    }

    this.getElement = function ()
    {
        return this.element;
    };

    this.withChild = function (child)
    {
        this.element.appendChild(child);
        return this;
    };

    this.withEventListener = function (type, func)
    {
        this.element.addEventListener(type, func);
        return this;
    };

    this.withClickEventListener = function (func)
    {
        this.element.addEventListener("click", func);
        return this;
    }

    this.withDoubleClickEventListener = function (func)
    {
        this.element.addEventListener("dblclick", func);
        return this;
    }

    this.withStyle = function (styleAttribute, value)
    {
        this.element.style[styleAttribute] = value;
        return this;
    }

    this.withStyleObject = function (styleObject)
    {
        ensureIsAnObject(styleObject);

        var keys = Object.keys(styleObject);

        keys.forEach(function (elt) {
            This.withStyle(elt, styleObject[elt]);
        });

        return this;
    }
}



function ensureIsAnObject(value, argumentName) {
    if (!(typeof value == "object")) {
        throw new Error("The argument '" + argumentName + "' should be an object, but it's type is --->" + typeof value);
    }
}

HTML代码

<div id="container">

</div>

<button onclick="foo()">Append image</button>

Answer 1

你实际上没有在画布上画画，只是用css设计它，它与画布分开渲染。您可以使用div或任何其他块元素替换画布，然后将其附加到文档以获得正确的效果。

Answer 2

将画布转换为图像

function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

或登记入住 http://jsfiddle.net/simonsarris/vgmFN/

我尝试将HTML画布转换为HTML图片，但我得到的是空白图片

2 个答案: