與jQuery

Question

創建元素我寫這sctipt創建上現有帆布的折線圖：它打開生成的折線圖，畫布在新標籤

var myLineChart = new Chart(ctx).Line(data, options); 

而且在動畫完成：

var options = { onAnimationComplete: function(){ 
        window.open(canvas.toDataURL()); 
       }} 

在這裏你可以測試一下：https://jsfiddle.net/ds53js5u/3/

什T I儘量做到：

是也使用jQuery

我更換生成畫布：

<canvas id="myChart" width="400" height="400"></canvas> 

有了：

var canvas = $('<canvas/>', {id: "myChart", width: 400, height: 400}); 

DEMO：https://jsfiddle.net/ds53js5u/4/

但現在它不再生成DataUrl並在新窗口中打開它！我錯了什麼？

對我來說畫布從來沒有被繪製到文檔上很重要！

THANKS

Answer 1

沒有什麼不對您的元素創建語法。但是你試圖在jQuery對象上執行一個DOM方法。使用方法：

canvas[0].toDataURL(); // => "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQ…mqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC" 

Answer 2

嘗試使用這個腳本：

var canvas = $('<canvas/>', {id: "myChart", width: 400, height: 400}); 

var ctx = canvas[0].getContext("2d"); 


var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "rgba(220,220,220,0.2)", 
      strokeColor: "rgba(220,220,220,1)", 
      pointColor: "rgba(220,220,220,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data: [65, 59, 80, 81, 56, 55, 40] 
     } 
    ] 
}; 

var options = {onAnimationComplete: function(){ 
       window.open(canvas[0].toDataURL());}} 

var myLineChart = new Chart(ctx).Line(data, options); 

Answer 3

的問題是，您所呼叫的jQuery對象的本地HTTPCanvasElement方法，這當然會失敗。你需要解決2個問題。

1. 追加畫布到身體以便使用它。例如，通過使用appendTo方法。

2. 使用HTMLElement作爲canvas變量而不是jQuery收集實例。您可以從jQuery集合中獲取HTMLElement對象作爲此集合的第一個元素（[0]）。

固定碼是：

var canvas = $('<canvas/>', {id: "myChart", width: 400, height: 400}).appendTo('body')[0] 
var ctx = canvas.getContext("2d"); 

演示：https://jsfiddle.net/ds53js5u/5/

Answer 4

一個黑客攻擊的有點繞，保證畫布是從來沒有吸引到元素，但顯示在彈出 - 但它的工作原理，並與JavaScript生成，而不是jQuery。

https://jsfiddle.net/btzqqq9v/

HTML

<div id="canvasContainer" style="position:absolute; visibility:hidden"></div> 

JAVASCRIPT

var s = '<canvas id="myChart" width="400" height="400"></canvas>'; 
var div = document.getElementById('canvasContainer'); 
div.innerHTML = s; 
var canvas = div.firstChild; 
var ctx = canvas.getContext("2d");