Questions tagged «canvas»

我有一个带有绘图的画布元素，我想创建一个按钮，当单击该按钮时，它将图像保存为png文件。所以它应该打开保存，打开，关闭对话框... 我用这段代码 var canvas = document.getElementById("myCanvas"); window.open(canvas.toDataURL("image/png")); 但是，当我在IE9中对其进行测试时，会打开一个新窗口，显示“无法显示该网页”，其网址为： data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf / 6el6 / 6ZnpSW / zUn237u5MdXX1172 + z6rqaqeEG6VsJet + PDW / vkdrfx3H3yfT2tVzaP26X6hkw1q / BoeI / 280 / 29JwznZxJPUyXtBQBAQBAQBQaBcECjefmi56BWlZYtAeqajx / WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9 / ldau + H + TX / 8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi / UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK / eTuQU1YuccCQBW7dyIq38 …

80 javascript  html  canvas 

我正在尝试与此绑定ItemsControl： <ItemsControl ItemsSource="{Binding Path=Nodes, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> 通过使用this DataTemplate，我试图将Node元素分别Canvas正确放置在正确的位置： <DataTemplate DataType="{x:Type Model:EndNode}"> <Controls:EndNodeControl Canvas.Left="{Binding Path=XPos}" Canvas.Top="{Binding Path=YPos}" /> </DataTemplate> 但是，它没有按预期工作。我所有的节点元素都在同一位置绘制在一起。关于如何做到这一点的任何建议？

79 c#  wpf  xaml  canvas  itemscontrol 

我想制作一个矩形画布来模拟进度条，但是当我将画布的宽度和高度设置为100％时，它实际上并没有使其高度和父级一样高 请参见下面的示例 http://jsfiddle.net/PQS3A/ 甚至可以制作非正方形的画布吗？我不想对画布的高度和宽度进行硬编码，因为在更大或更小的屏幕（包括移动设备）上查看时，画布应该动态更改

79 javascript  css  html  canvas 

我有一个允许用户上传图像的表格。 加载图像后，我们将对其进行一些缩放，以减小其文件大小，然后再将其传递回服务器。 为此，我们将其放置在画布上并在那里进行操作。 此代码将在画布上渲染缩放后的图像，画布尺寸为320 x 240px： ctx.drawImage(img, 0, 0, canvas.width, canvas.height) ...其中canvas.width和canvas.height是图像的高度和宽度xa基于原始图像大小的缩放因子。 但是当我去使用代码时： ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height ...我只会在画布上得到图像的一部分，在这种情况下，它是左上角。我需要将整个图像“缩放”以适合画布，尽管实际图像尺寸大于320x240画布尺寸。 因此，对于上面的代码，宽度和高度为1142x856，因为这是最终图像大小。我需要保持该大小，以便在提交表单时将beck传递给服务器，但只希望它的较小视图显示在画布中供用户使用。 我在这里想念什么？谁能指出我正确的方向？ 提前谢谢了。

79 javascript  html  canvas  html5-canvas 

我正在编写一个HTML5 <canvas>项目，该项目涉及使用滚轮放大和缩小图像。我想像Google Maps一样向光标方向缩放，但是我完全不知道如何计算运动。 我所拥有的：图像x和y（左上角）；图像的宽度和高度；光标x和y相对于画布中心的位置。

77 javascript  html  canvas  zoom  scrollwheel 

关闭。此问题不符合堆栈溢出准则。它当前不接受答案。 想改善这个问题吗？更新问题，使其成为Stack Overflow的主题。 6年前关闭。 已锁定。该问题及其答案被锁定，因为该问题是题外话，但具有历史意义。它目前不接受新的答案或互动。 我真的很想自动化unicoin挖掘，这样它就可以在我做重要事情（例如回答stackoverflow问题）时在后台继续进行。我注意到有一个canvas#uc-rockcanvas元素可以单击岩石。单击似乎添加了该类md，然后释放单击将删除md。 有什么方法可以使用JavaScript与画布的特定元素进行交互，以便您可以触发对它们的单击？

76 javascript  canvas 

所以我正在使用谷歌地图，我得到的照片看起来像这样 <img id="staticMap" src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false"> 我需要保存它。我发现了这一点： function getBase64FromImageUrl(URL) { var img = new Image(); img.src = URL; img.onload = function() { var canvas = document.createElement("canvas"); canvas.width = this.width; canvas.height = this.height; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0); var dataURL = canvas.toDataURL("image/png"); alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); }; } 但是我遇到了这个问题： 未捕获到的SecurityError：无法在“ HTMLCanvasElement”上执行“ …

76 javascript  canvas  cors 

我看过诸如Cufon和typeface.js之类的东西，但它们似乎是SIFR的替代品，不允许您设置自由格式的坐标并将自定义类型绘制到 <canvas> 任何人有任何想法吗？

75 html  canvas  fonts  cufon  typeface.js 

我正在尝试使用HTML5 canvas元素绘制一些弧和圆-这在FF中效果很好，但是IE8似乎不支持它。 现在，存在Javascript库，这些库似乎使IE8与Canvas兼容。一个例子可以在这里找到。 我已经阅读了他们的全部资料，但我不明白他们是如何使Canvas与IE8一起工作的。有人可以介绍一下使用的方法吗？

75 internet-explorer-8  html  canvas 

嗨，我有一个关于使用JavaScript动态创建画布的问题。 我创建一个这样的画布： var canvas = document.createElement('canvas'); canvas.id = "CursorLayer"; canvas.width = 1224; canvas.height = 768; canvas.style.zIndex = 8; canvas.style.position = "absolute"; canvas.style.border = "1px solid"; 但是当我尝试找到它时，我得到了一个null值： cursorLayer = document.getElementById("CursorLayer"); 我做错了吗？有没有更好的方法使用JavaScript创建画布？

74 javascript  html  canvas 

jQuery('#carregar').click(function() { var canvas = document.getElementById('canvas'); var image = document.getElementById('image'); var element = canvas.getContext("2d"); element.clearRect(0, 0, canvas.width, canvas.height); element.drawImage(image, 0, 0, 300, 300); }); jsfiddle.net/braziel/nWyDE/ 我在将图像向右或向左旋转90°时遇到问题。 我在画布上使用图像，同一屏幕上将有多个与示例相同的画布，但我将其尽可能地靠近项目。 我问，当我单击“向左旋转”和“向右旋转”时，如何将图像向左或向右旋转90°？ 我在互联网上尝试了几种代码，但均无效果。

73 html  image  canvas  rotation  html5-canvas 

我正在尝试使用pdf.js从pdf渲染页面 通常，使用网址，我可以这样做： PDFJS.getDocument("http://www.server.com/file.pdf").then(function getPdfHelloWorld(pdf) { // // Fetch the first page // pdf.getPage(1).then(function getPageHelloWorld(page) { var scale = 1.5; var viewport = page.getViewport(scale); // // Prepare canvas using PDF page dimensions // var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // // Render PDF …

71 javascript  pdf  canvas  base64  pdf.js 

我正在使用HTML画布处理以下应用程序：http : //driz.co.uk/particles/ 目前将其设置为640x480像素，但我想使其全屏显示，因为它将显示为投影仪。但是据我所知，我不能将画布大小设置为100％，因为变量只能是数字而不是％。使用CSS只会拉伸它，而不是使其变成全屏显示。 有任何想法吗？ 编辑：试图使用jQuery找到高度和宽度，但它打破了画布的任何想法，为什么？ var $j = jQuery.noConflict(); var canvas; var ctx; var canvasDiv; var outerDiv; var canvasW = $j('body').width(); var canvasH = $j('body').height(); //var canvasW = 640; //var canvasH = 480; var numMovers = 550; var movers = []; var friction = .96; var radCirc = Math.PI …

71 javascript  html  canvas 

是否有可能将canvas元素中存在的图像转换为表示的图像img src？ 我需要在一些转换后裁剪图像并保存它。有一个视图功能，我喜欢在互联网上找到：FileReader()或者ToBlop()，toDataURL()，getImageData()，但我不知道如何实现，并在JavaScript中正确地使用它们。 这是我的html： <img src="http://picture.jpg" id="picture" style="display:none"/> <tr> <td> <canvas id="transform_image"></canvas> </td> </tr> <tr> <td> <div id="image_for_crop">image from canvas</div> </td> </tr> 在JavaScript中，它看起来应该像这样： $(document).ready(function() { img = document.getElementById('picture'); canvas = document.getElementById('transform_image'); if(!canvas || !canvas.getContext){ canvas.parentNode.removeChild(canvas); } else { img.style.position = 'absolute'; } transformImg(90); ShowImg(imgFile); } function transformImg(degree) { if (document.getElementById('transform_image')) …

70 javascript  html  image  canvas 

我正在开发的Web应用程序的一部分要求我创建条形图以显示各种信息。我认为，如果用户的浏览器具有功能，则可以使用HTML5 canvas元素绘制它们。我可以为图形绘制线条和条形没有问题，但是在标注轴，条形或线形标签时遇到了障碍。如何将旋转的文本绘制到画布元素上，使其与要标记的项目对齐？几个示例包括： 逆时针旋转文本90度以标记y轴 逆时针旋转文本90度以在垂直条形图上标记条形 任意旋转文本以标记折线图上的线 任何指针将不胜感激。

69 javascript  html  canvas