我想通过JavaScript将SVG转换为位图图像(如JPEG,PNG等).
我正在进行一个生成艺术项目,我希望允许用户从算法中保存生成的图像.一般的想法是:
但是,我坚持第二步.在谷歌的一些帮助下,我找到了这篇博文,这似乎正是我想要的:
这导致了JavaScript代码:
function saveImage() {
var canvasData = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST", "testSave.php", false);
ajax.onreadystatechange = function() {
console.log(ajax.responseText);
}
ajax.setRequestHeader("Content-Type", "application/upload");
ajax.send("imgData=" + canvasData);
}
Run Code Online (Sandbox Code Playgroud)
和相应的PHP(testSave.php):
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
$imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData = substr($imageData, strpos($imageData, ",") + 1);
$unencodedData = base64_decode($filteredData);
$fp = fopen('/path/to/file.png', 'wb');
fwrite($fp, $unencodedData);
fclose($fp);
}
?>
Run Code Online (Sandbox Code Playgroud)
但这似乎根本没有做任何事情.
更多谷歌搜索出现了这篇基于上一个教程的博客文章.差别不大,但也许值得一试:
$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);
file_put_contents($file, …Run Code Online (Sandbox Code Playgroud) 我想知道是否有任何方法可以从imageData创建一个新的Image,这是以前从canvas元素获得的?
我已经搜索了一个解决方案,但他们似乎都将结果绘制到画布上.所以基本上我需要一种方法将ImageData对象直接转换为Image,如果可能的话.
我想在图像上画线.基本上允许用户绘制他们喜欢的山路的路径.
1)有没有人知道一个很好的简单库来绘制基本线?
2)用户在图像上绘制一堆线后,将数据保存到数据库的最佳方法是什么?
我正在使用HighCharts库生成一些动态图表.但是,我想将HighCharts画布元素渲染为PNG图像,这样用户就可以将图表复制并粘贴到电子邮件等中,而无需使用导出功能.
具体来说,我正在尝试创建一个包含图表的HTML电子邮件模板,并希望用户能够选择所有>复制/粘贴到他们的电子邮件客户端而不是复制/粘贴,导出图像,然后找到一种方法将其插入电子邮件中.
我发现了这个:将HTML Canvas捕获为gif/jpg/png/pdf?,但代码似乎没有呈现文档的图像.
我正在尝试为画布生成一个URL.以下是我遵循的步骤:
var can = document.getElementsByTagName("canvas");
var src = can.toDataURL("image/png");
Run Code Online (Sandbox Code Playgroud)
当我尝试在firebug上运行上面的代码时,它会抛出一个错误:
TypeError: can.toDataURL is not a function
Run Code Online (Sandbox Code Playgroud)
我在ubuntu上运行firefox 8.
我想将画布保存为PNG,而不是在新窗口中将其作为base64编码的图像打开.
我用过这段代码:
jQuery("#btnPreview").click(function(){
if (!fabric.Canvas.supports('toDataURL')) {
alert('Sorry, your browser is not supported.');
}
else {
canvas.deactivateAll();
canvas.forEachObject(function(o){
if(o.get("title") == "||Watermark||"){
canvas.bringToFront(o);
}
});
window.open(canvas.toDataURL('png'), "");
canvas.forEachObject(function(o){
if(o.get("title") == "||Watermark||"){
canvas.sendToBack(o);
}
});
canvas.renderAll();
}
});
Run Code Online (Sandbox Code Playgroud)
我想使按钮将图像保存为PNG或JPG.
我试过这样的东西,但它只是使图像的背景变白,不一定是图像的alpha.我想只是将所有内容上传为jpg,所以如果我能以某种方式"透明化"某个png图像,将其默认为白色,这样我就可以将它用作jpg.感谢任何帮助.谢谢.
$old = imagecreatefrompng($upload); $background = imagecolorallocate($old,255,255,255); imagefill($old, 0, 0, $background); imagealphablending($old, false); imagesavealpha($old, true);
javascript ×7
canvas ×4
html5 ×3
html5-canvas ×2
php ×2
svg ×2
ajax ×1
animation ×1
dom ×1
drawing ×1
fabricjs ×1
gd ×1
highcharts ×1
jquery ×1
lines ×1
png ×1
putimagedata ×1
render ×1