{"id":21125359,"url":"https://github.com/sayll/canvas_x","last_synced_at":"2025-07-08T23:31:19.122Z","repository":{"id":28184484,"uuid":"116552850","full_name":"sayll/canvas_x","owner":"sayll","description":"canvas绘制海报，生成logo二维码。也可生成编辑界面，用户自定义输入，一键生成。","archived":false,"fork":false,"pushed_at":"2023-01-12T01:46:03.000Z","size":2461,"stargazers_count":93,"open_issues_count":16,"forks_count":26,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-04T12:51:08.650Z","etag":null,"topics":["canvas","javascript","web"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sayll.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-07T09:22:08.000Z","updated_at":"2025-03-24T06:34:38.000Z","dependencies_parsed_at":"2023-01-14T08:45:10.848Z","dependency_job_id":null,"html_url":"https://github.com/sayll/canvas_x","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sayll/canvas_x","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayll%2Fcanvas_x","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayll%2Fcanvas_x/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayll%2Fcanvas_x/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayll%2Fcanvas_x/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sayll","download_url":"https://codeload.github.com/sayll/canvas_x/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayll%2Fcanvas_x/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264365463,"owners_count":23596838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","javascript","web"],"created_at":"2024-11-20T04:33:04.497Z","updated_at":"2025-07-08T23:31:17.431Z","avatar_url":"https://github.com/sayll.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# canvas_x\ncanvas绘制海报，生成logo二维码。也可生成编辑界面，用户自定义输入，一键生成。\n\u003e 默认开启图片跨域，但服务端的图片也需要后端进行相应的跨域设置。\n\n## 使用方法\n\n### npm 下载使用\n```\nnpm i -S @sayll/canvas_x\n// js 片段\nimport canvas_x from '@sayll/canvas_x'\n// TODO\ncanvas_x.makeImage({...})\n```\n\n### 直接引用\n可直接通过script标签引入`lib/canvas_x.js`，也可当第三方模块引入。\n\u003e 通过script引入，可通过全局变量`canvas_x`直接使用。详情可见demo。\n\n![预览](./demo/assets/doc.png \"预览\")\n\n## 接口\n|函数|描述|\n|----|----|\n|[makeImage](#makeImage)(options, ...)|绘制一个图片|\n|[renderEditor](#renderEditor)(container, options, callback)|创建编辑节点DOM| \n\n## makeImage\n高阶合成图片\n\u003e 可以接受三个类型：图片，文字，二维码\n\n|参数|类型|描述|\n|---|---|---|\n|options|object|[MakeImageOptions](#MakeImageOptions)（详情请见，核心配置项）|\n|callback|function|回调参数：(error?: string, data?: string) =\u003e void|\n\n## renderEditor\n生成编辑界面\n\u003e 可以接受三个类型：图片，文字，二维码\n\n|参数|类型|描述|\n|---|---|---|\n|container|HTMLElement|一个容器元素节点|\n|options|object|[MakeImageOptions](#MakeImageOptions)（详情请见，核心配置项|\n|callback|function|回调参数：(base64: string) =\u003e void|\n\n## MakeImageOptions\n绘图核心配置项\n\n|参数|类型|描述|\n|---|---|---|\n|parts|array|各组成部分([ImageEntry](#ImageEntry) , [TextEntry](#TextEntry) , [QRCodeEntry](#QRCodeEntry)): 详细见基础类型参数|\n|width|number|最终图片宽度，建议为显示容器的二倍|\n|height|number|最终图片高度，建议为显示容器的二倍|\n|background|string|画布底色|\n|buttonText|string|编辑模式下，绘制画布按钮文案：null时，隐藏按钮。默认：'绘制画布'|\n|resetButtonText|string|编辑模式下，重新编辑按钮文案：为空或null时，隐藏按钮。默认：'重新编辑'|\n|compress|number|最终图片压缩比，默认0.8|\n\n## 基础类型参数\n\n### ImageEntry \n表示一个图片部分。\n\n|参数|类型|描述|\n|---|---|---|\n|type|string|指定为图片类型：'image'|\n|url|string|要绘制的图片地址，可以是 http: 或 data: 格式|\n|radius|number|半径率，0-1之间|\n|padding|number|内边距。通过background控制边框颜色，默认为'#fff'|\n|background|string|默认为'#fff'|\n|width|number|绘制的宽度|\n|height|number|绘制的高度|\n|editable|boolean|能否编辑，编辑模式下使用|\n|selectImage|function|如需替换自己的资源为替换图片，可使用此参数； 参数返回一个 callback 接受你替换的图片 (base64或url) 注：当 editable 设置为 true 时，selectImage 将阻止默认 input[type=file]选取图片的默认行为|\n|x|number|相对于左上角的水平坐标|\n|y|number|相对于左上角的垂直坐标|\n|opacity|number|透明度。0-1 之间|\n|clipOptions|object|详细见[ClipOptions](#ClipOptions)参数|\n\n#### ClipOptions\n图片剪切所需参数\n\n|参数|类型|描述|\n|---|---|---|\n|x|number|相对于左上角的水平坐标|\n|y|number|相对于左上角的垂直坐标|\n|zoom|boolean|等比缩放图片|\n|align|string|目前只支持'center';图片正中间；|\n\n### TextEntry\n表示一个文本部分。\n\n|参数|类型|描述|\n|---|---|---|\n|type|string|指定为文本类型：'text'|\n|text|string|要绘制的内容。使用 \\n 换行|\n|size|string|字体大小|\n|color|string|字体颜色|\n|bold|boolean|是否加粗|\n|textAlign|string|文本对齐方式，\"center\"、\"left\"、\"right\"，根据基准点（x,y）水平对齐。默认：'left'|\n|lineAlign|string|文本对齐方式，\"top\"、\"middle\"、\"bottom\"，根据基准点（x,y）垂直对齐。默认：'top'|\n|editable|boolean|能否编辑，编辑模式下使用|\n|x|number|相对于左上角的水平坐标|\n|y|number|相对于左上角的垂直坐标|\n|opacity|number|透明度。0-1 之间|\n\n### QRCodeEntry\n表示一个二维码部分\n\n|参数|类型|描述|\n|---|---|---|\n|type|string|指定为二维码类型：'qrcode'|\n|text|string|要绘制的内容。网址需要使用 http: 开头|\n|padding|number|内边距。通过background控制边框颜色，默认为'#fff'|\n|background|string|默认为'#fff'|\n|level|number|容错等级。1-5，数值越大容错越高|\n|logo|string|二维码logo的地址,可以是 http: 或 data: 格式|\n|width|number|绘制的宽度|\n|height|number|绘制的高度|\n|x|number|相对于左上角的水平坐标|\n|y|number|相对于左上角的垂直坐标|\n|opacity|number|透明度。0-1 之间|\n\n## 开发命令\n|`npm run \u003cscript\u003e`|note|\n|------------------|-----------|\n|`build`|打包文件|\n|`build:dev`|监听修改|\n|`browse`|启动server|\n|`start`|start 整个项目server服务|\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsayll%2Fcanvas_x","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsayll%2Fcanvas_x","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsayll%2Fcanvas_x/lists"}