尝试创建
第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) {
// …我试图将一个大的SVG(它的数据URL大约是750000 - 1000000个字符)转换为PNG,方法是将它的数据url传递到一个图像并进入画布,但图像只加载大约1/4的SVG.
通过创建:
var svg_xml = (new XMLSerializer()).serializeToString(svg),
url = 'data:image/svg+xml;base64,' + btoa(svg_xml);
var img = new Image();
img.width = 730;
img.height = 300;
img.onload = function(){
var canvas = document.create('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 730, 300);
callbackFn(canvas.toDataURL('image/png');
}
img.src = url
编辑
我已经尝试实现canvg来绘制SVG,但DataURL生成的结果为空白图像:
var svg_xml = (new XMLSerializer()).serializeToString(svg);
var canvas = document.createElement('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawSvg(svg_xml, 0, 0, 730, 300);
callbackFn(canvas.toDataURL('image/png');
我使用过的方法有什么问题吗？ …
我想将一个简单的动态svg片段转换为服务器上的PNG数据URI.像这样的东西:
var svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'
console.log('<img src="data:image/png;base64,'+toPng(svg, 100, 100)+'">')
我见过使用imagemagick和一些phantomJS变种的例子,但我正在寻找node.js中的动态动态解决方案,最好是没有I/O.
我试图加载到画布像素处理我需要一种方法像SVG图像toDataURL或getImageData对SVG
在Chrome/Safari上,我可以尝试通过图像和画布
var img = new Image()
img.onload = function(){
ctx.drawImage(img,0,0) //this correctly draws the svg image to the canvas! however...
var dataURL = canvas.toDataURL(); //SECURITY_ERR: DOM Exception 18
var data = ctx.getImageData(0,0,img.width, img.height).data //also SECURITY_ERR: DOM Exception 18
}
img.src = "image.svg" //that is an svg file. (same domain as html file :))
但是我遇到了安全错误.还有其他方法吗？
这是一个问题的现场演示http://clstff.appspot.com/gist/462846(你可以查看源代码)
将JPG图像转换为PNG
我必须使用javascript将jpg图像转换为png图像并调整图像大小以创建图像缩略图.
任何人都可以帮助......如何通过Javascript将图像转换为矢量(SVG).......!任何帮助都会很棒....!
我正在尝试转换由Raphael JS(和用户,因为您可以拖动和旋转图像)生成的SVG .我在浏览器中跟踪了这个转换SVG图像(JPEG,PNG等),但仍然无法获得它.
它一定很容易,但我不能指责我错了.
我得到了我在一个div与SVG #ec作为id与画布的一个#canvas.
function saveDaPicture(){
var img = document.getElementById('canvas').toDataURL("image/png");
$('body').append('<img src="'+img+'"/>');
}
$('#save').click(function(){
var svg = $('#ec').html();
alert(svg);
canvg('canvas', svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true});
});
警报给了我:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512">
<desc>Created with Raphael</desc>
<defs></defs>
<image x="0" y="0" width="300" height="512" preserveAspectRatio="none" href="imageurl.jpg"></image>
<rect x="168" y="275" width="52" height="70" r="0" rx="0" ry="0" fill="none" stroke="#000" stroke-dasharray="8,3" transform="rotate(21.91207728 194 310)" style="opacity: 1; display: none; " opacity="1"></rect>
<circle cx="50" …我正在使用d3.js创建图表作为SVG.这些图表是根据经过身份验证的用户的选择动态生成的.生成这些图表后,用户可以选择将生成的SVG下载为PNG或PDF.
目前的工作流程如下:
// JAVASC
// get the element containing generated SVG
var svg = document.getElementById("chart-container");
// Extract the data as SVG text string
var svg_xml = (new XMLSerializer).serializeToString(svg);
// Submit the <FORM> to the server.
var form = document.getElementById("svgform");
form['output_format'].value = output_format; // can be either "pdf" or "png"
form['data'].value = svg_xml ;
form.submit();
FORM元素是一个隐藏的表单,用于POST数据:
<form id="svgform" method="post" action="conversion.php">
<input type="hidden" id="output_format" name="output_format" value="">
<input type="hidden" id="data" name="data" value="">
</form>
PHP文件将提供的SVG数据保存为临时文件:
// check for valid session, etc - omitted for …我有一个在地图应用程序中使用SVG/VML(通过Raphael JS)设置的网站,其中SVG用于在背景地图图像上显示图形.这在屏幕上非常有效,并且可以使用叠加打印硬拷贝地图.但是,当用户想要将具有SVG覆盖图的地图图像保存到本地.JPG文件时,此设置会分崩离析.
更具体地说,当SVG/VML元素位于图像顶部时,使用大多数浏览器的标准右键单击功能"将图像另存为..."不起作用.在地图上单击鼠标右键,用户可以保存地图图像,但不包含叠加层.右键单击重叠的SVG元素,用户获得的最佳功能是检查元素或保存一些HTML(因浏览器而异).
所以我的主要问题是; 是否可以拍摄图像和SVG元素并将它们(最好是客户端,虽然我可以选择)组合成一个"扁平"图像,.JPG,.PNG或其他,然后可以右键单击并根据要求保存或下载到用户的PC上？
我正在构建一个javascript应用程序(使用angularjs),它使用leafletjs和leaflet-dvf在地图上将饼图显示为SVG.它没有使用任何服务器端语言(php,asp.net等),我想保持这样.
该应用程序现在完全正常工作,我想添加使用SVG标记将地图导出到png/pdf /仅使用javascript的可能性.我尝试了几种解决方案,但仍然没有找到合适的解决方案.
Leaflet-Save-Map-to-PNG使用php,因此不符合我的需求.
Leaflet.Print需要安装geoserver或mapfish,我想只使用javascript.
Leaflet-image不呈现SVG馅饼,仅呈现基础层.
我错过了任何项目或者我的问题没有解决方案吗？