Question

我有一个应用程序，显示在设置路线后，在屏幕上移动的彩色点。有一个保存按钮可将当前屏幕保存为.png格式。

我遇到的问题是，如果我多次单击保存图像按钮，图像不仅会显示该点击的当前位置，它们会显示点击保存按钮时的所有先前位置。例如。如果点击1，则点位于位置1，单击2，位于位置2.图像2将显示位置1和2.第三个图像将显示位置1,2和3.

显然，分层或不清除画布存在问题，但我看不出问题。

保存代码（包含在AngularJS应用程序中）是：

$scope.saveImage = function() {

                var stageWidth = jQuery("#mainStage").width();
                var stageHeight = jQuery("#mainStage").height();
                var html = d3.select("#mainStage")
                        .attr("version", 1.1)
                        .attr("xmlns", "http://www.w3.org/2000/svg")
                        .attr("width",stageWidth)
                        .attr("height",stageHeight)
                        .node().parentNode.innerHTML;

                var imgsrc = 'data:image/svg+xml;base64,' + btoa(html);
                jQuery("#canvas").height(stageHeight);
                jQuery("#canvas").width(stageWidth);

                var canvas = document.getElementById("canvas");
                var context = document.querySelector('canvas').getContext("2d");

                var image = new Image;
                image.src = imgsrc;
                image.onload = function() {

                    context.drawImage(image,0,0);
                    var canvasdata = canvas.toDataURL("image/png");

                    var pngimg = '<img src="' + canvasdata + '">';

                    var a = document.createElement("a");
                    console.log(a);
                    a.download = "sample.png";
                    a.href = canvasdata;
                    a.click();
                };

            }

提前致谢。

Answer 1

这意味着它还没有通过摘要循环。混合jQuery和AngularJs的常见问题。添加观察者。

HTML5 Canvas和隐藏较低层

1 个答案: