在图片图像上自定义画图– ngx-image-drawing

在图片图像上自定义画图– ngx-image-drawing
插件名称 ngx-image-drawing
发布时间 2020年4月23日
插件作者 GroupeCurious

此Angular模块允许绘制图片并导出结果。(使用canvas&fabric.js)。

安装:

# NPM
$ npm install ngx-image-drawing --save

使用:

1.将ImageDrawingModule添加到将使用绘图模块的模块的导入中。

import { NgModule } from '@angular/core';
import { ImageDrawingModule } from 'ngx-image-drawing';
@NgModule({
    imports: [
        ...
        ImageDrawingModule
    ],
    declarations: [
        ...
    ],
    exports: [
        ...
    ],
    providers: [
        ...
    ]
})
export class YourModule {
}

2.您现在可以在像这样的组件中使用

<image-drawing
    [src]="imageUrl"
    outputMimeType="'image/jpeg'"
    outputQuality="0.8"
    (save)="save($event)"
    (cancel)="cancel()">
</image-drawing>

输入项

  • src: string :图片网址
  • i18n: I18nInterface? :使用了所有文本的对象(默认值:’I18nEn’)
  • outputMimeType: string?:输出图像的MIME类型,则可以是image/pngimage/jpegimage/webp
  • outputQuality: number?:0到1之间的数字,用于确定输出图像的质量(如果mimeType为jpeg或webp)
  • loadingTemplate: TemplateRef<any>? :图像加载模板
  • errorTemplate: TemplateRef<any>? :图像加载错误模板
  • enableTooltip: boolean?:启用/工具栏按钮/动作禁用工具提示(默认值:true
  • tooltipLanguage: string?:工具提示的语言(enfr)(默认值:en
  • width: number?:画布的宽度(如果未src指定,则为必需)
  • height: number?:画布的高度(如果未src指定,则为必需)
  • forceSizeCanvas: boolean:强制画布达到图像的宽度和高度或具有指定的宽度和高度(默认true
  • forceSizeExport: boolean:将导出的图像强制设置为指定的宽度和高度(默认值false
  • borderCss: string?:添加边框在CSS画布(默认值:none,例如:1px solib black
  • enableRemoveImage: boolean:启用选项以删除加载的图像(默认false
  • enableLoadAnotherImage: boolean:启用该选项以加载其他图像(默认false
  • showCancelButton: boolean:启用取消按钮(默认true
  • colors: { string: string }?:用户可用的颜色(默认black, white, yellow, red, blue, green, purple
  • drawingSizes: { string: string }?:可供用户使用的尺寸(默认5, 10, 25px

动作

  • save-单击保存按钮时的操作,用于$event获取新的编辑图像
  • cancel -单击取消按钮时的操作