Javascript 获取画布的图像线坐标

我刚开始使用canvas

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

image => tool => [1, 20, 80, 45.....] => canvas => canvas render image
some picuture    coordinates       this picture but rendered(created) via 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';

//获取页面上的canvas元素（在HTML中）
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
//创建一个新的图像对象，该对象将保存所需的图像数据
//渲染。
var img=新图像（）；
//使用onload事件使函数中的代码在图像加载时执行
//已完成加载。
img.onload=函数（）{
//当然，您可以使用所有标准的画布操作
//旋转功能将图像旋转45度。
ctx.旋转（数学PI/4）；
//在（0,0）处绘制图像
ctx.drawImage（img，0,0）；
}
//告诉图像对象加载图像。
img.src='my_image.png'；

将光栅图像转换为矢量数据 这是一个复杂的过程，因此我不会向您介绍整个演练。首先，你现在可以放弃自己去实现它，因为它需要很多工作。但是，有些应用程序和服务可以为您做到这一点：

工作很好，但大部分功能都需要付费

一个很好的应用程序列表，可以为您做到这一点

---

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

您在说什么？是否要将光栅图像（使用像素构建的图像）转换为矢量图像（使用直线和曲线等矢量构建的图像），以生成在画布上渲染图像的指令？或者你只是想把一个图像按原样画到画布上？是的，我想从光栅图像中获取坐标，得到一个矢量图像，或者把它画到画布上。