Question

我有一个echos 2 js脚本的php函数，每个脚本创建一个按钮，一旦点击就会绘制图像并下载它。问题是第一个按钮工作（绘制和下载）而第二个按钮不工作（只绘制）虽然它们都是完全相同的代码而且在控制台中没有错误，有人可以帮忙并指出这里有什么问题。

function download_button($mabez_blades)
{

echo <<<TEST
        <script type="text/javascript" src="dygraph-extra.js"></script>


        <img id="img" style="width:1000px; height:300px;" alt="image first"/>
        <canvas id="canvas" width="1000" height="300" >canvas</canvas>
        <button type="button" onclick="saveImage()">save image</button>

        <script type="text/javascript">

           function plotimg() {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                var img = document.getElementById("img");
                Dygraph.Export.asPNG(gSC_2_1, img);
                ctx.drawImage(img, 0, 0);
            };

            function saveImage() {
                plotimg()

                    var link = document.createElement('a');
                    link.download = "test.png";
                    link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    console.log(link.href);
                    link.click();
                    };
        </script>


TEST;

echo <<<KKK

    <img id="img1"  style="width:1000px; height:300px;" alt="image second"/>
    <canvas id="myCanvas" width="1000" height="300">myCanvas</canvas>
    <button type="button" onclick="downloadCanvas()">Download Pictures</button>

    <script type="text/javascript">

    function drawcanvas() {
        var canvas1 = document.getElementById("myCanvas");
        var ctx1 = canvas1.getContext("2d");
        var img1 = document.getElementById("img1")
        Dygraph.Export.asPNG(gSC_2_1, img1);
        ctx1.drawImage(img1, 0, 0);
    };

    function downloadCanvas() {
    drawcanvas() 
    var link1 = document.createElement('b');
    link1.download = "experment.png";
    link1.href = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    console.log(link1.href);
    link1.click();
        };

        </script>
KKK;



}

Answer 1

不一样

var link = document.createElement('a');

VS

var link1 = document.createElement('b');

<a>（锚）元素具有执行某些操作的href attribue

<b>（粗体）元素

两个相同的JavaScript按钮，一个工作，另一个不

1 个答案: