javascript - 获取 Canvas 的图像线坐标

Question

我刚开始使用 Canvas 。

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

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

是否有任何工具可以帮助获取图像线坐标(映射)？ 因此，接下来，我可以直接使用它们，并获得纯 Canvas 图像。

Answer 1

如果我对您的评论理解正确，您要么想在 Canvas 上绘制图像，要么将其转换为矢量数据然后在 Canvas 上绘制。

在 Canvas 上绘制图像

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

在 Canvas 上渲染图像其实很简单:

// 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
效果很好，但您必须为大部分功能付费

How to convert SVG files to other image formats
可以为您执行此操作的一个很好的应用程序列表

在此之后，您可以将矢量数据存储为 SVG 并使用某些浏览器具有的 SVG 渲染，或类似 SVGCanvas 的库将 SVG 渲染到 Canvas 上。您或许可以使用该库将生成的图像转换为上下文操作列表，而不是每次都从 SVG 转换。