Question

我刚开始使用画布。

我需要在纯画布上模拟一些图像。

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

是否有任何工具可以帮助获取图像线坐标（映射）？所以，接下来，我可以使用它们，并获得一个纯粹的画布图像。

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
效果很好，但你必须支付大部分功能

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

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

获取画布的图像线坐标

1 个答案:

在画布上绘制图像

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