weixin_38852958
weixin_38852958
采纳率66.7%
2017-12-07 06:55

canvas转成base64 后生成的图片问题 会有叠影重叠的现象。

5

SVG格式的图片:图片说明
base64放入img src中:图片说明
代码:图片说明
图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • Top123123123321 topoDoc 4年前

    export



    $(".exportImageButton").on("click", function() {
    var svg = document.querySelector("svg");
    var rect = document.querySelector("rect")
    rect.setAttribute("fill", "green")
    var svgData = new XMLSerializer().serializeToString(svg);
    var canvas = document.createElement("canvas");
    var svgSize = svg.getBoundingClientRect();
    canvas.width = svgSize.width * 3;
    canvas.height = svgSize.height * 3;
    canvas.style.width = svgSize.width;
    canvas.style.height = svgSize.height;
    var ctx = canvas.getContext("2d");
    ctx.scale(3, 3);
    var img = document.createElement("img");
    img.setAttribute("src", "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))));
    rect.setAttribute("fill", "red")
    img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var canvasdata = canvas.toDataURL("image/png", 1);

    var pngimg = '<img src="' + canvasdata + '">';
    d3.select("#pngdataurl").html(pngimg);
    
    var a = document.createElement("a");
    a.download = "download_img" + ".png";
    a.href = canvasdata;
    document.body.appendChild(a);
    a.click();
    

    };
    })

    转图片。

    点赞 评论 复制链接分享
  • luantuili4855 xxx_xx1 4年前

    Canvas在每次重新绘制前要先进行清除。

    点赞 评论 复制链接分享
  • u010334329 g-seraph 4年前

    var Svg = chart.getSVG();是highchart获取svg的方法。

    点赞 评论 复制链接分享