小编Val*_*ris的帖子

我正在用白色背景色在画布上绘制图像。我想在画布周围画一个边框，但我无法这样做。这是我的代码：

canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.font = "50px Arial";
context.fillText(chartId, 0, 50);
context.drawImage(image, 0, 0);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);//for white background

在此之后，我希望在整个画布周围出现一个红色边框。

有没有办法将D3 SVG图像保存为高质量图像？如果是,请解释...截至目前我正在使用以下代码将svg保存为图像,但我得到的图像质量不高 -

var canvas1 = document.createElement('canvas');
canvas1.id     = "canvas1";
canvas1.width  = w+50;
canvas1.height = h+50;
document.getElementById('pngcon').appendChild(canvas1);

var html = new XMLSerializer().serializeToString(document.getElementById(chartId).querySelector('svg'));

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);

 var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var canvasdata;
var image = new Image;
image.src = imgsrc;
image.onload = function() {
context.drawImage(image, 0, 0);

  canvasdata = canvas.toDataURL("image/png");

var a = document.createElement("a");
a.id="imagepng"
a.download = chartname+".png";
a.href = canvasdata;
document.body.appendChild(a);
document.getElementById("imagepng").click();

我试图在d3中设计的条形图上应用一些过渡效果.这是我的代码 -

svg.selectAll(".bar")
            .data(data)
            .enter().append("g")
            .attr("class", "bar")
            .append("rect")
            .attr("rx", barRadius)
            .attr("fill","333" )
            // .attr("color_value", "steelblue")
            .attr("index_value", function(d, i) {
                return "index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi');
            })
            .attr("class", function(d, i) {
                return "bars-Bubble-index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi')+div;
            })
            .attr("id", function(d) {
                return d[columns[0]] + ":" + d[measure1];
            })
            .attr("onclick", fun)
            .attr("x", function(d) {
                return x(d[columns[0]]);
            })
            .attr("width",0)
            .transition()
            .duration(2000)//1 second
            .attr("width", x.rangeBand())
            .attr("y", function(d) {
                return y(d[measure1]);
            })
            .attr("height", function(d) {
                return height - y(d[measure1]);
            })

转换似乎工作正常,除了我在浏览器控制台TypeError上收到以下错误:svg.selectAll(...).data(...).enter(...).append(...) .attr(...).追加(...).ATTR(...).ATTR(...).ATTR(...).ATTR(...).ATTR(...). ATTR(...).ATTR(...).ATTR(...)过渡(...)持续时间(......).ATTR(...).ATTR(...).ATTR (...).on不是函数TypeError:bars.append(...).attr(...).attr(...).transition(...).duration(...). ATTR(...).ATTR(...)过渡(...)持续时间(......).ATTR(...).ATTR(...).ATTR(...).ATTR …

我正在尝试使用canvg将svg转换为canvas并将转换后的canvas作为png保存在我的计算机上.这是我正在使用的代码 -

function downloadImage()
{
    saveImage('chart1');
    saveImage('chart2');
    saveImage('chart3');
    saveImage('chart4');
    saveImage('chart5');
    saveImage('chart6');
    saveImage('chart7');
    saveImage('chart8');
}

function saveImage(chartId)
{
    var $container = $('#'+chartId),
    content = $container.html().trim();
    var canvas1 = document.createElement('canvas');
    var w=1366,h=768;
    canvas1.id     = "canvas1";
    canvas1.width  = w;
    canvas1.height = h;
    document.getElementById('pngcon').appendChild(canvas1);

    var canvas = document.getElementById('canvas1');

    canvg(canvas, content);
    var theImage = canvas.toDataURL('image/png');
    var a = document.createElement("a");
    a.id="imagepng"
    a.download = fileName+chartId+".png";
    a.href = theImage;
    document.body.appendChild(a);
    document.getElementById("imagepng").click();
    $("#pngcon").html('');

    $("#imagepng").remove();
}

上面的代码工作正常,并将所有svgs下载为png图像,但正如你所看到的那样,调用saveImage()方法几乎使用8次相同的语句.所以我尝试使用循环像这样做 -

function downloadImage()
   {
       for(i=1;i<=8;i++)
       {
           saveImage('chart'+i);
       }
   }

但是这次svg中的一个被错过了.我对这里发生的事情一无所知.请帮忙......