基于HTML画布创建图像 [英] Create an image based on an HTML canvas

问题描述

嘿，



正如我最后所说的：对于无代码问题，我们深表歉意。如果你想要忽略它吧：



我即将为网页应用编写一个图表。那没问题。我使用 chart.js [ ^ ]，我已用于其他几个项目。



我的老板认为我们可以发送电子邮件丢失有这些数据的客户表示目前的趋势是有利的，他们应该考虑回到我们这里。



我有一个想法可以使这些图表更有用。我以为我可以让处理程序生成图表作为图像，并在请求图像时将其提供。然后，通过向图片网址添加custRef，我们可以为我们发送给每位客户的所有在线媒体自定义此图片。



这只是一个想法到目前为止。该图像必须类似于我们在网络应用上使用的chart.js图表​​。我发现我可以使用PhantomJS在html画布中创建图表，就像我在网站上一样。生成并捕获图像然后通过处理程序提供它应该可以很好地工作...

不应该吗？



这是我的问题。除了在线提供的图像之外，还有任何我不知道的陷阱吗？我可以花时间为自己尝试这个，但是如果我确定它会起作用的话，这是值得的。



对于非代码问题，我们深表歉意。如果你想要忽略它:)





顺便说一句：这也是我们的二级经纪人（第三方销售人员）可以复制的一个图像标签，直接在电子邮件，帖子，推文等中使用



我尝试过：



无论如何我都不会在下周开始这个，但这是计划：



使用指向图像网址的图片嵌入图片httpHandler



使用PhantomJS从chart.js服务器端渲染图表。



捕获画布和图像（多发png）



从内存中的处理程序返回png 。

Hey,

As I say at the end: Sorry for the none-code question. Ignore it if you want :)

I am about to write a chart for a web app. That's no problem. I use chart.js[^], which I've used on several other projects.

My boss had the idea that we could send emails to lost clients with this data to show that current trends are favorable, and that they should consider returning to us.

I have an idea that could make these charts even more useful. I was thinking I could have a handler generate the chart as an image and serve that up when the image is requested. Then, by adding a custRef to the image url, we can customize this image for all our online media we send to each customer.

This is just an idea so far. The image will have to look like the chart.js charts we use on our web apps. I found that I could use PhantomJS to create the chart in an html canvas just like I do on the website. Generating and capturing the image then serving it up via a handler should work beautifully...
Shouldn't it?

That's my question. Aside from the image only being available online, are there any pitfalls I am unaware of? I could invest time trying this out for myself, but it's only worth it if I'm sure it's gonna work.

Sorry for the none-code question. Ignore it if you want :)


btw: this is also so that our second tier brokers (third party sales guys) can copy an image tag and use it directly in emails, posts, tweets etc

What I have tried:

I won't start this until next week anyway, but here's the plan:

Embed an image with the image url pointing to an httpHandler

Use PhantomJS to render the chart from chart.js server-side.

Capture the canvas and an image (prolly png)

return the png from the handler in memory.

推荐答案

我不知道它是否可以从服务器端代码起作用，但 HTMLCanvasElement.toDataURL（） [ ^ ]应该允许您将 canvas 导出为Base64编码的图像。 />

I don't know whether it would work from server-side code, but the HTMLCanvasElement.toDataURL()[^] should let you export the canvas as a Base64-encoded image.

var canvas = document.getElementById("chart-canvas");
var imageData = canvas.toDataURL("image/png"); // "data:image/png;base64,...."
document.getElementById("chart-image").src = imageData;

对不完整的答案感到抱歉。我只是想把主要观点留作占位符，并在你确认我在我对这个问题的评论中做出的假设时添加更多细节，纠正我并澄清。



在这条评论中，我解释了在客户端和服务器端处理的原因。
您的步骤将是

Sorry for the incomplete answer. I just want to leave main points as a placeholder and add some more detail when you confirm my assumptions I've made in my comment to the question, of correct me and clarify.

In this comment, I explained the reasons for processing on both client-side and server-side.
Your steps would be

1. 数据（服务器端）到JavaScript（客户端）;
2. 客户端：JavaScript生成图表（保持静态）;
3. 客户端：发送邮件的可选请求，发回的数据通过Ajax;
4. 服务器端：从数据撰写电子邮件，发送;

你能看到冗余吗？数据已经在服务器端，这是您发送电子邮件的地方。我不知道你的场景的细节，谁和什么应该触发电子邮件操作，但它的外观如下：服务器端代码获取HTTP请求，在客户端没有任何图形，从中生成图形数据（也在服务器端）直接，编写和发送电子邮件。然后图表可以直接在位图中呈现。



有一个问题：你必须有两种不同的方法来生成同一个图表：一个在服务器端，另一个在Canvas上，即在客户端通过JavaScript。除非您使用服务器端JavaScript（这些天很少见），否则它将是两个完全不同的库。您必须通过技术上不同的方式实现逻辑上相同的图表。这是可行的，但仍然是一个问题，开发的问题，但更多的维护。



如果你摆脱这个问题可以解决Canvas。我可以看到另外两个选项：1）仅在服务器端生成所有图形作为位图; 2）仅在服务器端生成所有图形作为SVG。在这两种情况下，图形都可以作为准备显示的对象传递给客户端。如果这是一个位图，它可以作为 img 元素嵌入HTML中，其中 href =your-file.PNG;必要时，相同的文件将嵌入电子邮件HTML部分。 SVG的情况是无限好，因为这是矢量图形。另一个好处是使用比优质位图少得多的流量。它也可以通过电子邮件发送并以HTML格式呈现（需要HTML5）。最大的好处是：不需要JavaScript。您可以使用JavaScript在客户端使图表动态化，但图表可以是静态的，只是嵌入HTML而不需要任何脚本，这适用于电子邮件。使用Canvas是不可能实现的。



SVG在画布上还有其他好处。在某些方面，图形渲染质量更好。而且你可以拥有基于SVG的高级图表。为了感受它，请关注D3：

D3.js - Wikipedia，the免费百科全书 [ ^ ]，
D3.js - 数据驱动文档 [ ^ ]，
和一些令人印象深刻的例子： D3 .js图库 [ ^ ]。



顺便说一句，我找到一篇帖子解释为什么不画布？：如何使用SVG创建图表| CSS技巧 [ ^ ]。



本文概述了基于SVG的其他一些可能性。你可以找到更多： SVG图表 [ ^ ]。



在您询问有关通过电子邮件发送图表之前，您有一个非常可行的基于Canvas的解决方案在您的情况下，通过chart.js。邮寄要求基本上打破了这个解决方案它开始出现荒谬的困难，可以通过其他方式轻松避免。







我不知道解决方案1，但它可以做出一些替代方案。但是，发送电子邮件也存在同样的问题。它可以通过获取获得的图像数据并将其发送回服务器端来解决，其中图像数据可用于制作位图以通过电子邮件发送。

-SA

Can you see the redundancy? The data is already on the server side, and this is where you send e-mail. I don't know the detail of your scenario, who and what should trigger the e-mail operation, but here is how it looks: the server-side code gets the HTTP request, without any graphics on the client side, generates graphics from data (which is also on the server side) directly, composes and sends e-mail. And then the chart can be directly rendered in a bitmap.

There is a problem with that: you have to have two different methods of generation of the same chart: one on the server side, and another on the Canvas, that is, by JavaScript on the client side. Unless you use server-side JavaScript (rare enough these days), it would be two completely different libraries. You would have to achieve logically identical charts by technically different ways. This is doable, but still would be a problem, the problem of development, but even more of maintenance.

This problem can be solved if you get rid of Canvas. I can see two more options: 1) generate all graphics on the server side only as a bitmap; 2) generate all graphics on the server side only as SVG. In both cases, the graphics can be delivered to the client side a the ready-to-show object. If this is a bitmap, it could be embedded in HTML as the img element with href="your-file.PNG"; the same exact file will be embedded in the e-mail HTML part when required. The case of SVG is "infinitely better", because this is vector graphics. Another benefit is using much less traffic than with good-quality bitmap. It can also be sent in e-mail and rendered in HTML (HTML5 required). The big benefit is: JavaScript is not required. You can make the chart dynamic on the client-side with JavaScript, but the chart can be static and just embedded in HTML without any scripts, which would be suitable for e-mail. It is impossible to achieve with Canvas.

There are other benefits of SVG over canvas. The graphic rendering quality is better in some respect. And you can have quite advanced charting based on SVG. To get the feeling of it, please pay attention for D3:
D3.js — Wikipedia, the free encyclopedia[^],
D3.js — Data-Driven Documents[^],
and some impressive examples: D3.js Gallery[^].

By the way, I found a post explaining "Why not Canvas?": How to Make Charts with SVG | CSS-Tricks[^].

This article overviews some other possibilities based on SVG. You can probably find some more: SVG charts[^].

Before you asked about sending a chart in e-mail, you had quite viable Canvas-based solution, in your case, via chart.js. The mailing requirement essentially breaks this solution; it starts to present ridiculous difficulties, which can be easily avoided in the alternative ways.



I did not know Solution 1, but it can make some alternative. However, there is the same issue for sending e-mail. It can be solved by getting the obtained image data and sending it back to the server side, where the image data can be used to make a bitmap for sending via e-mail.

—SA

这篇关于基于HTML画布创建图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！