相关疑难解决方法(0)

HTML5 Canvas vs. SVG vs. div

什么是动态创建元素并能够移动它们的最佳方法?例如,假设我想创建一个矩形,圆形和多边形,然后选择这些对象并移动它们.

我知道HTML5提供了三个可以实现这一目标的元素:svg,canvasdiv.对于我想要做的事情,哪一个元素将提供最佳性能?

为了比较这些方法,我考虑创建三个视觉上相同的网页,每个网页都有页眉,页脚,小部件和文本内容.第一页中的小部件将完全使用canvas元素创建,第二个完全使用svg元素创建,第三个使用plain div元素HTML和CSS创建.

javascript html5 svg html5-canvas

456
推荐指数
8
解决办法
12万
查看次数

在浏览器中将SVG转换为图像(JPEG,PNG等)

我想通过JavaScript将SVG转换为位图图像(如JPEG,PNG等).

javascript svg

280
推荐指数
8
解决办法
27万
查看次数

如何将HTML5 Canvas保存为服务器上的图像?

我正在进行一个生成艺术项目,我希望允许用户从算法中保存生成的图像.一般的想法是:

  • 使用生成算法在HTML5 Canvas上创建图像
  • 图像完成后,允许用户将画布作为图像文件保存到服务器
  • 允许用户下载图像或将其添加到使用算法生成的图片库中.

但是,我坚持第二步.在谷歌的一些帮助下,我找到了这篇博文,这似乎正是我想要的:

这导致了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)

javascript php ajax html5-canvas

239
推荐指数
6
解决办法
31万
查看次数

如何在javascript中从imageData生成图像?

我想知道是否有任何方法可以从imageData创建一个新的Image,这是以前从canvas元素获得的?

我已经搜索了一个解决方案,但他们似乎都将结果绘制到画布上.所以基本上我需要一种方法将ImageData对象直接转换为Image,如果可能的话.

javascript canvas putimagedata

32
推荐指数
3
解决办法
5万
查看次数

使用jQuery在图像上"绘制"简单线条并保存到Rails DB的最简单方法?

我想在图像上画线.基本上允许用户绘制他们喜欢的山路的路径.

1)有没有人知道一个很好的简单库来绘制基本线?

2)用户在图像上绘制一堆线后,将数据保存到数据库的最佳方法是什么?

jquery drawing ruby-on-rails lines

24
推荐指数
2
解决办法
4万
查看次数

在页面上将Highcharts画布渲染为PNG

我正在使用HighCharts库生成一些动态图表.但是,我想将HighCharts画布元素渲染为PNG图像,这样用户就可以将图表复制并粘贴到电子邮件等中,而无需使用导出功能.

具体来说,我正在尝试创建一个包含图表的HTML电子邮件模板,并希望用户能够选择所有>复制/粘贴到他们的电子邮件客户端而不是复制/粘贴,导出图像,然后找到一种方法将其插入电子邮件中.

我发现了这个:将HTML Canvas捕获为gif/jpg/png/pdf?,但代码似乎没有呈现文档的图像.

png canvas render highcharts

22
推荐指数
4
解决办法
4万
查看次数

抓取HTML5画布的每个帧

这些调色板循环图像令人叹为观止:http://www.effectgames.com/demos/canvascycle/?sound = 0

我想将其中的一些(或全部)制作成桌面背景.

我可以使用动画gif版本,但我不知道如何从画布"动画"中获得它.是否有任何可用的东西可以沿着这些方面做某事(特别是对于那个链接而言,一般而言).

javascript html5 animation screen-scraping

20
推荐指数
2
解决办法
1万
查看次数

toDataURL不是一个函数

我正在尝试为画布生成一个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.

javascript dom canvas

20
推荐指数
4
解决办法
4万
查看次数

将画布保存为PNG或JPG

我想将画布保存为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.

javascript html5 canvas fabricjs

20
推荐指数
2
解决办法
2万
查看次数

GD!将png图像转换为jpeg并将alpha默认设置为白色而非黑色

我试过这样的东西,但它只是使图像的背景变白,不一定是图像的alpha.我想只是将所有内容上传为jpg,所以如果我能以某种方式"透明化"某个png图像,将其默认为白色,这样我就可以将它用作jpg.感谢任何帮助.谢谢.

$old = imagecreatefrompng($upload);
$background = imagecolorallocate($old,255,255,255);
imagefill($old, 0, 0, $background);
imagealphablending($old, false);
imagesavealpha($old, true);

php gd image-manipulation image-processing

17
推荐指数
1
解决办法
2万
查看次数