weixin_38852958
2017-12-07 06:55
采纳率: 66.7%
浏览 2.9k
已采纳

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

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

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • topoDoc 2017-12-08 08:28
    已采纳

    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();
    

    };
    })

    转图片。

    打赏 评论
  • g-seraph 2017-12-07 07:06

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

    打赏 评论
  • xxx_xx1 2017-12-08 05:58

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

    打赏 评论

相关推荐 更多相似问题