【发布时间】：2018-09-11 21:15:47
【问题描述】：
我正在尝试制作某种反向验证码，最后我希望能够输入长达 500 个字符的长文本行，并运行一些基本的验证码，例如对单词进行混淆，但仍然可读。但我也想要生成可以下载的图像，而不是 svg。
我已经设法为文本创建效果并呈现 svg，并且我找到了一个使用 d3 将其呈现为 datauri 并将 blob 呈现为图像的示例。我一直在尝试将 svg 插入到示例 d3 渲染发生的地方，但我认为我做得不对。
这是我的工作 text2captcha gen 和部分非工作 d3/svg/blob 到图像，我将引用 html
https://codepen.io/anon/pen/zJRLdx
<!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>
^这里是那个js
$(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 to image 的链接。我也会引用这个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>
非常感谢您甚至查看我的帖子，我不是最擅长编码。
【问题讨论】：
标签： javascript html d3.js svg