获取画布图像线坐标

Question

我刚刚开始接触canvas。

我需要在纯canvas中模拟一些图像。

image => tool => [1, 20, 80, 45.....] => canvas => canvas render image
some picuture    coordinates       this picture but rendered(created) via canvas 

有没有工具可以帮助获取图像线条的坐标（以进行映射）？ 然后，我只需使用它们就可以获得纯画布图像。

- Alex Ivasyuv

---

你在说什么？你想将一幅光栅图像（由像素构成的图像）转换为矢量图像（由线条和曲线构成的图像），以便生成指令在画布上呈现图像吗？还是只是想按原样在画布上绘制图像？ - Blixt

是的，我想从光栅图像中获取坐标以获得矢量图像，或将其绘制到画布上。 - Alex Ivasyuv

Answer 1

如果我理解你的评论正确，你要么想在画布上绘制图像，要么将其转换为向量数据，然后再在画布上绘制。

在画布上绘制图像

这是迄今为止最简单的解决方案。将光栅图像转换为向量数据是一个涉及高级算法的复杂过程，而且仍然不完美。

在画布上呈现图像实际上非常简单：

// Get the canvas element on the page (<canvas id="canvas"> in the HTML)
var ctx = document.getElementById('canvas').getContext('2d');  

// Create a new image object which will hold the image data that you want to
// render.
var img = new Image();
// Use the onload event to make the code in the function execute when the image
// has finished loading.
img.onload = function () {
    // You can use all standard canvas operations, of course. In this case, the
    // rotate function to rotate the image 45 degrees.
    ctx.rotate(Math.PI / 4);
    // Draw image at (0, 0)
    ctx.drawImage(img, 0, 0);
}
// Tell the image object to load an image.
img.src = 'my_image.png';

将光栅图像转换为矢量数据

这是一个复杂的过程，因此我不会给你完整的步骤。首先，你现在可以放弃尝试自己实现它，因为它需要很多工作量。但是，有一些应用程序和服务可以为您完成此操作：

http://vectormagic.com/home
非常好用，但大部分功能需要付费。

如何将SVG文件转换为其他图像格式
提供了一份可以为您完成此操作的应用程序列表。

之后，您可以将矢量数据存储为SVG，并使用某些浏览器具有的SVG渲染，或者使用SVGCanvas等库将SVG渲染到画布上。您可能可以使用该库将生成的图像转换为上下文操作列表，而无需每次都从SVG进行转换。

- Blixt