问题标签 [todataurl]

在创建树之前，我使用画布绘制一些图标（加号、减号、节点等）。然后我将图像放在对象上并停止使用画布。像这样：

然后我在树上的背景图像中使用它们：

因此，据我了解，它极大地扩大了页面上的数据量，因为我将数据从对象严格放置到每个元素，而不是使用指向它的链接。由于一棵树中可能有数百甚至数千个树元素，我认为这会导致一些内存问题。

我想，这可能是以某种方式使用对象中数据的链接的最佳方式，但我不知道如何。可能是，创造一些新的元素？有没有办法解决这个问题？

PS：我正在学习 JavaScript，需要在不使用任何库的情况下了解基础知识。

您好，我有一个大画布，例如：5000px x 5000px 和许多绘画工具。我需要知道什么是解决undo功能的最佳解决方案，没有滞后或非常大的使用内存。现在我尝试使用方法创建每个mousedown保存我的画布到数组toDataUrl。

你认为这是一个好方法还是我需要寻找更好的方法来解决这个问题？

使用小画布和只有一种绘画工具 - 铅笔的示例：

http://codepen.io/anon/pen/azyPGN

html（部分）：

保存和恢复部分代码：

主要问题是我必须处理许多图像。而且我不能对所有这些都使用 crossOrigin 属性。

当我在浏览器中上传某个文件时，文件类型为 jpeg，文件大小为 2MB，但是当我使用 将文件编码为 base64canvas.toDataURL()时，生成的文件大小约为 9MB。

为什么base64编码的文件比原文件大3-4倍？

我已经看到我可以为toDataURl(type, quality).

我尝试将画布数据作为图像发送，但是当图像很大时，它不会发送数据，所以我尝试作为表单数据发送，但我被困在接收代码中。代码隐藏作为 htmlinputelementobject 接收。我怎样才能收到它？有人可以帮忙吗。

html:

阿贾克斯：

代码隐藏：

我真的对这里发生的事情感到目瞪口呆。

我正在使用Preprocess.js在前端调整图像大小/压缩图像。除此之外，在 image.onload 的 processfile() 函数中（第 32 行），我将 toDataURL() 字符串转换为 Blob，因此我可以将其作为文件对象发送到 API。为此，我使用了dataURItoBlob函数。我最终得到了这个：

然后我将 eventImage 的内容发送到 API。

现在，这很好用。它调整/压缩图像的大小，它被发送到 API（带有成功响应），我可以在网页中看到输出图像。

但是，在 Chrome/Firefox 的控制台（资源选项卡）中，图像的重量相当大（Chrome 为 8MB，Firefox 为 1.5MB）。

更奇怪的是：如果我在网页中加载图像，它会像压缩大小一样加载。但是如果我从 API 的直接链接加载它，加载和显示需要一段时间（好像它正在加载 8MB/1,5MB 的数据）。

这里发生了什么？一切都在前端吗？浏览器、API 或 MIME/内容类型是否有问题？

太感谢了。

I'm attempting to merge two HTML canvases into a single canvas and then download that as an image. My code is as below:

My problem here seems to be the following line:

This is supposed to draw the contents of one canvas onto the other, which it does, but then prevents the latter part of the code from running and downloading the image. When I remove this particular line the download function works fine, but unfortunately only downloads one of the canvases.

My question therefore is either: What am I doing wrong here? or How would I merge two HTML canvases and then download it as an image.

(On another note, my above code for downloading only works well in Chrome - in other browsers I am unable to set the name of the file and set the file extension.)

我有这个代码

我需要创建 pdf 导出并使用通用图添加到图像中。Berofe 我必须保存渲染图像。我尝试使用方法 .toBase64Image() 但我不知道我可以开始。

我的继续

创建 canvas_link (.toDataUrl)。单击另存为图像后，我可以放大并将图像上传到服务器。然后我可以生成 pdf 导出（跨 mPDF）并将 imageto 添加到导出中。我可以创建，但我不知道创建图形图像并将其上传到服务器。

我需要来自http://www.chartjs.org/docs/的更多示例

通过对画布的 toDataUrl() 方法的一系列调用创建的图像数组。现在我需要用它创建一个 SpriteSheet。

我怎么做？

我在这里阅读了 SpriteSheet 上的 EaselJS 文档。但是没有这样的方法或示例如何在运行时创建它。

我们开发复杂的基于 WebGL 的应用程序，并为我们的用户提供保存当前场景屏幕截图的能力。虽然此功能在 Chrome 和 Firefox 中按预期工作，但我们在 safari 中遇到了几个问题。

请看下面的代码。如您所见，我们使用 CanvasElement 的 toDataURL() 方法进行截图。虽然此代码在其他浏览器中按预期工作，但它在 safari 中生成错误的图像（至少对于 WebGL 画布）。

您可以通过打开此文件或在 safari 和其他浏览器中运行附加的代码段来轻松地自己重现该问题。

我们做错了什么吗？这个问题有解决方法吗？

谢谢你。

UPD：特别是对于那些说它与 preserveDrawingBuffer 相关的人，我将其更改为附加的代码片段，以表明即使将 preserveDrawingBuffer 设置为 true，它在 safari 中的行为仍然错误。