是否可以捕获或打印html画布中显示的图像或pdf？
我想通过画布生成一个图像,并能够从该图像生成一个png.
这是我要Blob对Base64字符串执行的代码的代码段:
这个注释部分有效,当由此生成的URL设置为img src时,它会显示图像:
var blob = items[i].getAsFile();
//var URLObj = window.URL || window.webkitURL;
//var source = URLObj.createObjectURL(blob);
//console.log("image source=" + source);
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);
问题是代码越低,生成的源变量为null
更新:
有没有更简单的方法来使用JQuery从Blob文件创建Base64字符串,如上面的代码？
我正在使用客户端/ javascript函数将现有的D3-SVG图保存或转换为文件.我经常搜索并找到一些建议,主要是使用canvas.toDataURL().
我没有<canvas>在我的页面中,而是使用:d3.select("body").append("svg")....
我也尝试将SVG附加到<canvas>但没有任何反应.
你能帮我解决这个例外:
Uncaught TypeError: Object #<SVGSVGElement> has no method 'toDataURL'
谢谢
好吧,我需要一些关于将.svg文件/图像转换为.png文件/图像的帮助......
我的页面上显示了.svg图像.它保存在我的服务器上(作为.png文件).我需要根据需要将其转换为.png文件(单击按钮)并将.png文件保存在服务器上(我将使用.ajax请求执行此操作).
但问题是转换.
我读了很多关于html5 Canvas的东西,这可能有助于做我现在需要做的事情,但是我找不到任何明确的解决方案来解决我的问题,而且,tbh,我不明白我发现的一切......所以我需要一些明确的建议/帮助我必须这样做.
这是"html idea"模板:
<html>
<body>
<svg id="mySvg" width="300px" height="300px">
<!-- my svg data -->
</svg>
<label id="button">Click to convert</label>
<canvas id="myCanvas"></canvas>
</body>
</html>
和一些js:
<script>
$("body").on("click","#button",function(){
var svgText = $("#myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
});
</script>
然后,我需要将svg绘制到Canvas中,获取base64数据,并将其保存在我的服务器上的.png文件中......但是......怎么样？我读到了很多不同的解决方案,我实际上......迷失了...我正在研究jsfiddle,但我实际上......无处可寻...... http://jsfiddle.net/xfh7nctk/6 / ...感谢您的阅读/帮助
我有一个Web应用程序,它根据用户交互动态在客户端生成内联SVG图形.图形部分由元素属性定义,部分由CSS类和id定义.
我希望能够为客户端提供一个选项,将内联SVG的副本保存为位图或.svg图像文件.从外部CSS样式文件应用所有样式非常重要.我如何提供此功能以保存为.svg或位图(.gif),最好是在浏览器中使用javascript,或者在服务器上使用node.js？
我有一个小项目,用户使用Raphael构建图表,然后将组合图表导出到图像中进行保存.
问题是它必须脱机运行.http://www.nihilogic.dk/labs/canvas2image/不会起作用,因为它需要画布,而不是Raphael生成的SVG.
有没有办法(javascript)我可以从SVG导出图像？
为了正确回答这个问题,我想我会:
<img><img>成一个<canvas><canvas>为PNG数据URL我在这里有一个例子:http:
//phrogz.net/SVG/svg_to_png.xhtml
在Firefox中,我(NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]尝试在步骤3中将图像绘制到画布时得到.
为什么我在Firefox中出现此错误,或者我该如何解决它？
在Chrome中,SECURITY_ERR当我尝试toDataURL()在第4步中调用时,我收到异常.
为什么我会在Chrome中收到此错误,或者我该如何解决？
所述WHATWG规范指出的原点为"从一个数据中产生:在另一文献或在脚本中找到URL"的图象应是相同的文件.此测试中的所有数据均来自同一文档.
有没有人在创建d3.js可视化时尝试使用svg来绘制库？我已经尝试使用canvg.js和d3.js将svg从android 2.3应用程序webview中转换为canvas,但是当我调用时:
svg.selectAll(".axis")
.data(d3.range(angle.domain()[1]))
.enter().append("g")
.attr("class", "axis")
.attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
.call(d3.svg.axis()
.scale(radius.copy().range([-5, -outerRadius]))
.ticks(5)
.orient("left"))
.append("text")
.attr("y",
function (d) {
if (window.innerWidth < 455){
console.log("innerWidth less than 455: ",window.innerWidth);
return -(window.innerHeight * .33);
}
else {
console.log("innerWidth greater than 455: ",window.innerWidth);
return -(window.innerHeight * .33);
}
})
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.text(function(d, i) { return capitalMeta[i]; })
.attr("style","font-size:12px;");
我收到错误:Uncaught TypeError:无法调用setPropertynull的方法http://mbostock.github.com/d3/d3.js?2.5.0:1707
是某种无头浏览器应用程序,还是服务器端js解析器？有没有人遇到过这个？
我在使用jspdf将svg元素渲染为pdf时遇到了麻烦.我使用插件https://github.com/CBiX/svgToPdf.js/来做到这一点.
以下是我的代码
// I recommend to keep the svg visible as a preview
var tmp = document.getElementById("chartContainer");
var svgDoc = tmp.getElementsByTagName("svg")[0];
var pdf = new jsPDF('p', 'pt', 'a4');
svgElementToPdf(svgDoc, pdf, {
scale: 72 / 96, // this is the ratio of px to pt units
removeInvalid: false // this removes elements that could not be translated to pdf from the source svg
});
pdf.output('datauri'); // use output() to get the jsPDF buffer
它正在生成空白pdf.请帮忙
尝试创建
第1步 - 让用户通过Ajax,Raphael和Raphael freetransform上传图像.
步骤2 - 单击按钮以显示合并上载图像中的一个图像.(问题):
我找到了关于转换Raphael svg 1
2
3的类似帖子
,
所以我也使用Canvg但得到console.log :Resource interpreted as image but transferred with MIME type text/html error: image "" not found.
请帮我找到解决方法.或任何线索如何达到相同的目标(将上传的几个Raphael svg图像转换为一个png/jpeg)？
谢谢!
步骤1
// upload images and ajax show in page
var paper = Raphael($('.upload_img')[0], 400, 200);
$('.upload_btn').click(function(){
...
$.ajax({
type: "POST",
url: "index.php",
data: fd,
processData: false,
contentType: false,
success: function(html){
var session = ..., file = ... type = ...;
function register(el) {
// …