私は私が書かれているコードを記載しているimage.Belowとしてチャートを保存する機能を書かれている

Question

画像としてチャートを保存することができません： HTML：

<div> <span id="save" onclick="javascript:saveChart1();" style="height:10px;width:40px; color:#000;"> comment</span></div> 
<div id="chart_load"></div> 
<div id="chart_save"> 
    <canvas id="chart_area" height="300px" width="415px"></canvas> 
</div> 

Javescript：

function saveChart1() 
{ 

      var outcan=document.getElementById("chart_area"); 
       var obj=document.getElementsByTagName("canvas");     
       var ctx=outcan.getContext("2d");   
       ctx.drawImage(obj[1],0,0);   
       html2canvas($("#chart_save"), { 
         onrendered: function(canvas) { 
        var a = document.createElement('a'); 
     // toDataURL defaults to png, so we need to request a jpeg, then convert for file download. 
     a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
     a.download = 'ss.jpg'; 
     a.click(); 

        } 
         }); 
} 

保存ボタンをクリックすると以下のエラーが表示されます：

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' 
    at saveChart1 (generatedContent:310) 
    at HTMLSpanElement.onclick 

ここで私は間違っています。

Answer 1

この

var obj = document.getElementsByTagName("canvas"); 
html2canvas(document.getElementById("target"), { 
    onrendered: function (canvas) { 
     var a = document.createElement('a'); 
     // toDataURL defaults to png, so we need to request a jpeg, then convert for file download. 
     a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
     a.download = 'ss.jpg'; 
     a.click(); 
    } 
}); 

Working example