我試圖將HTML畫布轉換爲HTML圖像，但我得到一個空白圖像

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

轉換畫布上的圖像

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

或檢查 http://jsfiddle.net/simonsarris/vgmFN/

Answer 2

無處你實際繪製到畫布上，只是其樣式，與CSS，這是呈現與畫布分開。您可以用一個div或任何其他塊元素替換畫布，並將其附加到文檔以獲得正確的效果。