Question

我正在尝试进行某种形式的反向验证码，最终我希望能够输入长行文本（最多500个字符），并对单词进行一些基本的验证码（例如混淆），但仍然可读。但是我也想要生成一个可以下载的图像，而不是一个svg。

我设法为文本创建效果并渲染svg，并且找到了一个使用d3将其渲染为datauri和blob到图像的示例。我一直在尝试将svg插入示例d3渲染正在发生的位置，但是我认为我做的不正确。

将我正常工作的text2captcha gen和无法正常工作的d3 / svg / blob转换为图像，我将引用html

    <!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  stroke: #000;
  fill-opacity: .8;
}

</style>
<body>
  <center>
  <h1>text2Captcha gen</h1>
  </br>
  <textarea placeholder="put your text here please"></textarea>
  </br>
  <button id="gen">gen</button>
  </br>
    <div id="svg"></div>
    <button id="save">Save as Image</button>
    <div id="svgdataurl"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>


  <svg width="250" height="75">
    <text x="25" y="45" fill="black" id="text" filter="url(#warp)" style="font-size:34px;">test</text>
    <filter id="warp">
      <feMorphology radius="3" operator="dilate" />
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0.75 0.2" />
      </feComponentTransfer>
      <feMerge result="text">
        <feMergeNode/>
        <feMergeNode in="SourceGraphic" />
      </feMerge>
      <feTurbulence type="fractalNoise" baseFrequency="0.023" numOctaves="2" result="warp" id="turb" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="60" in="text" in2="warp" id="sdm" />
    </filter>
  </svg>

<script>
  var svg = d3.select("#svg").append("idm")

d3.select("#save").on("click", function(){
  var html = d3.select("svg")
        .attr("version", 1.1)
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .node().parentNode.innerHTML;

  //console.log(html);
  var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
  var img = '<img src="'+imgsrc+'">'; 
  d3.select("#svgdataurl").html(img);

});
</script>

^此处是用于此的

$(function () {
  var rnum, rnum2
  $("button").click(function () {
    $("#text")
      .text($("textarea")
            .val());
    rnum = Math
      .floor((Math.random() * 80) + 40);
    $("#sdm").attr("scale", rnum
                   .toString());
    rnum2 = Math
      .floor((Math.random() * 4) + 1);
    $("#turb")
    .attr("numOctaves", rnum2
          .toString());
  });  
});

，这里是指向有效d3 Blob到图像的链接。我也会引用这个html。 https://codepen.io/anon/pen/jvZpLX

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  stroke: #000;
  fill-opacity: .8;
}

</style>
<body>
    <div id="svg"></div>
    <button id="save">Save as Image</button>
    <h2>SVG dataurl:</h2>
    <div id="svgdataurl"></div>

    <h2>SVG converted to PNG dataurl via HTML5 CANVAS:</h2>
    <div id="pngdataurl"></div>

    <h2>SVG converted to PNG dataurl via HTML5 CANVAS and then converted into a filename using :</h2>
    <div id="pngdataurl"></div>

    <canvas width="960" height="500" style="display:none"></canvas>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var m = 5, // number of series
    n = 90; // number of values

// Generate random data into five arrays.
var data = d3.range(m).map(function() {
  return d3.range(n).map(function() {
    return Math.random() * 100 | 0;
  });
});

var x = d3.scale.linear()
    .domain([0, n - 1])
    .range([0, width]);

var y = d3.scale.ordinal()
    .domain(d3.range(m))
    .rangePoints([0, height], 1);

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

var area = d3.svg.area()
    .interpolate("basis")
    .x(function(d, i) { return x(i); })
    .y0(function(d) { return -d / 2; })
    .y1(function(d) { return d / 2; });

var svg = d3.select("#svg").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("path")
    .data(data)
  .enter().append("path")
    .attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; })
    .style("fill", function(d, i) { return color(i); })
    .attr("d", area);




d3.select("#save").on("click", function(){
  var html = d3.select("svg")
        .attr("version", 1.1)
        .attr("xmlns", "http://www.w3.org/2000/svg")
        .node().parentNode.innerHTML;

  //console.log(html);
  var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
  var img = '<img src="'+imgsrc+'">'; 
  d3.select("#svgdataurl").html(img);

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

    var image = new Image;
    image.src = imgsrc;
    image.onload = function() {
      context.drawImage(image, 0, 0);

      //save and serve it as an actual filename
    binaryblob();

      var a = document.createElement("a");
      a.download = "sample.png";
      a.href = canvas.toDataURL("image/png");

       var pngimg = '<img src="'+a.href+'">'; 
       d3.select("#pngdataurl").html(pngimg);

      a.click();
    };

});


function binaryblob(){
    var byteString = atob(document.querySelector("canvas").toDataURL().replace(/^data:image\/(png|jpg);base64,/, "")); //wtf is atob?? https://developer.mozilla.org/en-US/docs/Web/API/Window.atob
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var dataView = new DataView(ab);
    var blob = new Blob([dataView], {type: "image/png"});
    var DOMURL = self.URL || self.webkitURL || self;
    var newurl = DOMURL.createObjectURL(blob);

    var img = '<img src="'+newurl+'">'; 
  d3.select("#img").html(img);
}
</script>

非常感谢即使查看我的线程，也不是最擅长编码。

Answer 1

您的选择是错误的。执行时

var html = d3.select("svg")
    .attr("version", 1.1)
    .attr("xmlns", "http://www.w3.org/2000/svg")
    .node().parentNode.innerHTML;

parentNode是<center>元素，它的innerHTML是页面上的所有内容，而不仅仅是<svg>元素。您可以使用XMLSerializer界面更简洁地完成整个过程：

var svgNode = d3.select('svg').node();
var html = new XMLSerializer().serializeToString(svgNode);

这还将处理xmlns属性（不需要version）。

第二部分是btoa()不是文件转换器，而是编码器。区别在于浏览器甚至在显示之前就将其解码回SVG。这与您要实现的目标背道而驰。您可以使用以下示例中的代码，也可以查看this example，该细节在细节上有所不同，但基本实现相同，即将SVG转换为光栅图像。

使用D3和Blob将svg渲染到图像

1 个答案: