什么是 ngvas-image-cors
ngvas-image-cors 是一个在 Angular 框架下使用的 npm 包，它提供了一个在画布上绘制散点图和折线图的工具。同时，它对跨域图片的处理进行了封装，能够快速正确地为散点图和折线图提供相应的背景图片。
安装步骤
安装 ngvas-image-cors 只需要简单的几步：
- 打开命令行工具，进入你的项目目录；
- 输入
npm install ngvas-image-cors --save，等待安装完成； - 在需要使用 ngvas-image-cors 的组件中引入该包：
import { NgvasImageCorsModule } from 'ngvas-image-cors'； - 在组件的 imports 中加入
NgvasImageCorsModule。
使用示例
在使用 ngvas-image-cors 时有两种情况。
如果你已经有图片地址，可以通过 setBackground() 方法为散点图或折线图设置背景图片，例如：
------ - --------- - ---- ----------------
------ - --------------------- - ---- -------------------
------------
--------- -------------------
--------- --------------- ------------- -------------- ------------------------------- --------------- --------------------------------------------
--
------ ----- ----------- -
------ - ----- ---- ---- ---- ----- -----
-------- - -----------------------------------
------------------- ---------------------- ---------------------- -
---------------------------------------------------
-
-在这个例子中，我们先引入了 NgvasImageCorsService 模块，然后在通过 setBackground() 方法将背景图片加入散点图中。
如果你不知道图片的地址，但是想为散点图或折线图设置一个背景图片，可以使用 setAutoBackground() 方法，例如：
------ - --------- - ---- ----------------
------ - --------------------- - ---- -------------------
------------
--------- -------------------
--------- --------------- ------------- -------------- ------------------------------- --------------- ---------------------------------------------
--
------ ----- ----------- -
------ - ----- ---- ---- ---- ----- -----
-------- - -----------------------------------
------------------- ---------------------- ---------------------- --
----- ---------- -
----- -----------------------------------------------
-
-在这个例子中，我们使用 setAutoBackground() 方法，它会自动在你的项目中查找一个目录或某个图片的名称，来获取背景图片并将其设置到散点图或折线图中。
注意事项
在使用 ngvas-image-cors 时，注意以下几点事项：
- 在使用跨域图片时务必设置
Access-Control-Allow-Origin来允许其他域的请求； - 为了使用最新版本的 ngvas-image-cors，你需要使用 Angular 6 及以上版本。
结论
ngvas-image-cors 是一个在 Angular 框架下使用的 npm 包，它可以让你更方便地在散点图和折线图中添加背景图片。安装 ngvas-image-cors 只需要几个简单的步骤，使用方法也非常简单。不过，在使用 ngvas-image-cors 时也需要注意跨域问题及其相关细节。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005725881e8991b448e871c