canvasはポスター+二次元コードを描き、ほとんどのシーンを満足させます.
4040 ワード
canvas_x
いかなる第三者依存も必要なく、軽量工具庫.canvasはポスターを描き、ロゴ入りの二次元コードを生成します.編集画面を生成することもできます.ユーザーのカスタム入力、ワンタッチ生成などです.
デフォルトでは画像がドメインにまたがりますが、サーバー側の画像もバックエンドに対応するクロスドメイン設定が必要です.
プロジェクトのアドレス
https://github.com/sayll/canvas_x
使い方
npmダウンロード使用
直接にscriptタグによって
scriptによって導入され、グローバル変数を通じて
インターフェース
関数
説明
makeImage(options,…)
絵を描きます
レンダー・エディター(container、options、calback)
編集ノードDOMを作成
makeImage
高次合成画像
3つのタイプが受け入れられます.画像、テキスト、二次元コードです.
パラメータ
タイプ
説明
options
object
MakeImageOptions(詳細は、コア構成項目を参照してください)
calback
機能
コールバックパラメータ:(error?:string、data?:string)=>void
render Editor
編集画面を生成
3つのタイプが受け入れられます.画像、テキスト、二次元コードです.
パラメータ
タイプ
説明
container
HTMLELE ment
コンテナ要素ノード
options
object
MakeImageOptions(詳細は、コアの設定項目を参照してください.
calback
機能
コールバックパラメータ:(base 64:string)=>void
MakeImageOptions
図形描画コアの設定項目
パラメータ
タイプ
説明
パーティー
array
各構成部分(ImageEntry,Text Entry,QRCodeEntry):詳細は基礎タイプのパラメータを参照してください.
width
number
最終画像の幅は、表示容器の2倍を推奨します.
height
number
最終画像の高さは、表示容器の2倍を推奨します.
background
ストリングス
キャンバスの原色
buttonText
ストリングス
編集モードでは、キャンバスボタンの文案を描画します.nullの場合は、ボタンを非表示にします.標準設定は「キャンバスを描画」です.
reetButton Text
ストリングス
編集モードでは、ボタン文案を再編集します.空またはnullの場合は、ボタンを隠します.デフォルトは「再編集」です.
compless
number
最終画像圧縮比、デフォルト0.8
ベースタイプのパラメータ
ImageEntry
写真の一部を表します.
パラメータ
タイプ
説明
タイプ
ストリングス
イメージタイプに指定します.「イメージ」
url
ストリングス
描画する画像の住所は、http:またはdata:フォーマットとすることができます.
ラジディウス
number
半径率0-1間
padding
number
内側余白です.backgroundでフレームの色をコントロールします.デフォルトは'
background
ストリングス
デフォルトは「菗fff」です
width
number
描画の幅
height
number
描画の高さ
editable
bollan
編集できますか?編集モードで使用します.
selectImage
機能
自分のリソースを代替する場合は、このパラメータを使用します.パラメータはcalbackに戻り、代わりのピクチャ(base 64またはurl)注:editableがtrueに設定されている場合は、selectImageはデフォルトのinput[type=file]の選択ピクチャのデフォルト動作を阻止します.
x
number
左上隅に対する水平座標
y
number
左上隅に対する垂直座標
opacity
number
透明度.0-1間
clipOptions
object
詳細はClipOptionsパラメータを参照してください.
ClipOptions
画像の切り取りに必要なパラメータ
パラメータ
タイプ
説明
x
number
左上隅に対する水平座標
y
number
左上隅に対する垂直座標
ズーム
bollan
等比ズーム画像
align
ストリングス
現在は「センター」しかサポートされていません.写真の真ん中です.
Text Entry
テキストの一部を表します.
パラメータ
タイプ
説明
タイプ
ストリングス
テキストタイプとして指定します:'text'
テキスト
ストリングス
描画する内容.n行を使用します.
size
ストリングス
フォントサイズ
カラー
ストリングス
フォントの色
bold
bollan
太めの有無
text Align
ストリングス
テキストの配置方法は、「センター」、「left」、「Right」、基準点(x、y)によって水平に揃えられます.デフォルト:「left」
LINE Align
ストリングス
テキストの配置は、「top」、「middle」、「bottom」、基準点(x、y)によって垂直に揃えられます.デフォルトは、「top」です.
editable
bollan
編集できますか?編集モードで使用します.
x
number
左上隅に対する水平座標
y
number
左上隅に対する垂直座標
opacity
number
透明度.0-1間
QRCodeEntry
二次元コード部分を表します.
パラメータ
タイプ
説明
タイプ
ストリングス
二次元コードタイプに指定します.
テキスト
ストリングス
描画する内容.URLはhttp:先頭を使う必要があります.
padding
number
内側余白です.backgroundでフレームの色をコントロールします.デフォルトは'
background
ストリングス
デフォルトは「菗fff」です
vel
number
フォールトトレランスレベル.1-5、値が大きいほど、許容範囲が高くなります.
ロゴ
ストリングス
二次元コードのロゴのアドレスは、http:またはdata:フォーマットとすることができます.
width
number
描画の幅
height
number
描画の高さ
x
number
左上隅に対する水平座標
y
number
左上隅に対する垂直座標
opacity
number
透明度.0-1間
開発コマンド
いかなる第三者依存も必要なく、軽量工具庫.canvasはポスターを描き、ロゴ入りの二次元コードを生成します.編集画面を生成することもできます.ユーザーのカスタム入力、ワンタッチ生成などです.
デフォルトでは画像がドメインにまたがりますが、サーバー側の画像もバックエンドに対応するクロスドメイン設定が必要です.
プロジェクトのアドレス
https://github.com/sayll/canvas_x
使い方
npmダウンロード使用
npm i -S @sayll/canvas_x
// js
import canvas_x from '@sayll/canvas_x'
// TODO
canvas_x.makeImage({...})直接にscriptタグによって
lib/canvas_x.jsを導入してもいいし、第三者モジュールに導入してもいいです.scriptによって導入され、グローバル変数を通じて
canvas_xは直接使用する.詳細はデモでわかるインターフェース
関数
説明
makeImage(options,…)
絵を描きます
レンダー・エディター(container、options、calback)
編集ノードDOMを作成
makeImage
高次合成画像
3つのタイプが受け入れられます.画像、テキスト、二次元コードです.
パラメータ
タイプ
説明
options
object
MakeImageOptions(詳細は、コア構成項目を参照してください)
calback
機能
コールバックパラメータ:(error?:string、data?:string)=>void
render Editor
編集画面を生成
3つのタイプが受け入れられます.画像、テキスト、二次元コードです.
パラメータ
タイプ
説明
container
HTMLELE ment
コンテナ要素ノード
options
object
MakeImageOptions(詳細は、コアの設定項目を参照してください.
calback
機能
コールバックパラメータ:(base 64:string)=>void
MakeImageOptions
図形描画コアの設定項目
パラメータ
タイプ
説明
パーティー
array
各構成部分(ImageEntry,Text Entry,QRCodeEntry):詳細は基礎タイプのパラメータを参照してください.
width
number
最終画像の幅は、表示容器の2倍を推奨します.
height
number
最終画像の高さは、表示容器の2倍を推奨します.
background
ストリングス
キャンバスの原色
buttonText
ストリングス
編集モードでは、キャンバスボタンの文案を描画します.nullの場合は、ボタンを非表示にします.標準設定は「キャンバスを描画」です.
reetButton Text
ストリングス
編集モードでは、ボタン文案を再編集します.空またはnullの場合は、ボタンを隠します.デフォルトは「再編集」です.
compless
number
最終画像圧縮比、デフォルト0.8
ベースタイプのパラメータ
ImageEntry
写真の一部を表します.
パラメータ
タイプ
説明
タイプ
ストリングス
イメージタイプに指定します.「イメージ」
url
ストリングス
描画する画像の住所は、http:またはdata:フォーマットとすることができます.
ラジディウス
number
半径率0-1間
padding
number
内側余白です.backgroundでフレームの色をコントロールします.デフォルトは'
background
ストリングス
デフォルトは「菗fff」です
width
number
描画の幅
height
number
描画の高さ
editable
bollan
編集できますか?編集モードで使用します.
selectImage
機能
自分のリソースを代替する場合は、このパラメータを使用します.パラメータはcalbackに戻り、代わりのピクチャ(base 64またはurl)注:editableがtrueに設定されている場合は、selectImageはデフォルトのinput[type=file]の選択ピクチャのデフォルト動作を阻止します.
x
number
左上隅に対する水平座標
y
number
左上隅に対する垂直座標
opacity
number
透明度.0-1間
clipOptions
object
詳細はClipOptionsパラメータを参照してください.
ClipOptions
画像の切り取りに必要なパラメータ
パラメータ
タイプ
説明
x
number
左上隅に対する水平座標
y
number
左上隅に対する垂直座標
ズーム
bollan
等比ズーム画像
align
ストリングス
現在は「センター」しかサポートされていません.写真の真ん中です.
Text Entry
テキストの一部を表します.
パラメータ
タイプ
説明
タイプ
ストリングス
テキストタイプとして指定します:'text'
テキスト
ストリングス
描画する内容.n行を使用します.
size
ストリングス
フォントサイズ
カラー
ストリングス
フォントの色
bold
bollan
太めの有無
text Align
ストリングス
テキストの配置方法は、「センター」、「left」、「Right」、基準点(x、y)によって水平に揃えられます.デフォルト:「left」
LINE Align
ストリングス
テキストの配置は、「top」、「middle」、「bottom」、基準点(x、y)によって垂直に揃えられます.デフォルトは、「top」です.
editable
bollan
編集できますか?編集モードで使用します.
x
number
左上隅に対する水平座標
y
number
左上隅に対する垂直座標
opacity
number
透明度.0-1間
QRCodeEntry
二次元コード部分を表します.
パラメータ
タイプ
説明
タイプ
ストリングス
二次元コードタイプに指定します.
テキスト
ストリングス
描画する内容.URLはhttp:先頭を使う必要があります.
padding
number
内側余白です.backgroundでフレームの色をコントロールします.デフォルトは'
background
ストリングス
デフォルトは「菗fff」です
vel
number
フォールトトレランスレベル.1-5、値が大きいほど、許容範囲が高くなります.
ロゴ
ストリングス
二次元コードのロゴのアドレスは、http:またはdata:フォーマットとすることができます.
width
number
描画の幅
height
number
描画の高さ
x
number
左上隅に対する水平座標
y
number
左上隅に対する垂直座標
opacity
number
透明度.0-1間
開発コマンド
npm run ノートbuildファイルを むbuild:dev を するbrowseスタートセーバーstartstart プロジェクトのserverサービス