帮助文档Appearance
字符串转二维码
在Nuget管理搜索QRCoder，选择版本1.6.0安装，分别编写后端文件Component.cs和前端文件index.vue，然后编译生成.hyyc文件（编辑器根目录tools\dist文件下的89e55230-6c9e-4288-93e8-0882dff54f6b_1.0.0.hyyc）,将其拷贝到火语言根目录users\editor文件并重启火语言客户端，在可选组件面板的本地开发分组拖动字符串转二维码组件到流程设计器。
后端代码
c#
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using HuoYuYan.Component;
using HuoYuYan.Component.IComponents;
using QRCoder;
namespace StringToQrcoder
{
public class Component : BaseComponent<string, string, ComponentConfig>
{
public override bool IsFlowChange => true;
protected override void ComponentRun(string source, out string result)
{
var content = ComponentConfig.content.ToGetString(this);
var filePath = ComponentConfig.filePath.ToGetString(this);
source = string.IsNullOrEmpty(source) ? content : source;
if (string.IsNullOrWhiteSpace(source)) source = "";
try
{
var qrGenerator = new QRCodeGenerator();
var qrCodeData = qrGenerator.CreateQrCode(source, QRCodeGenerator.ECCLevel.Q);
var qrcode = new QRCode(qrCodeData);
var qrCodeImage = qrcode.GetGraphic(5, Color.Black, Color.White, null, 15, 6, false);
var ms = new MemoryStream();
qrCodeImage.Save(ms, ImageFormat.Jpeg);
var arr = ms.ToArray();
result = "data:image/jpeg;base64," + Convert.ToBase64String(arr); //输出图片base64字符串
File.WriteAllBytes(filePath, arr); //保存二维码图片到指定文件
Info(Resources["success"]);
}
catch (Exception ex)
{
result = "";
Info(Resources["error"]);
}
}
}
public class ComponentConfig
{
public InputType content { get; set; } = new InputType();
public InputType filePath { get; set; } = new InputType();
}
}
前端代码
vue
<template>
<section>
<el-form label-position="top" :model="config" :rules="rules">
<el-form-item :label="$t('content')" :id="'content_'+id" v-show="fields.content.show">
<el-input v-model="config.content.value" :render.sync="config.content.type" :placeholder="$t('placeholder')"></el-input>
</el-form-item>
<el-form-item :label="$t('filePath')" v-show="fields.filePath.show" :style="fields.filePath.style" :id="'filePath_' + id">
<el-input
v-model="config.filePath.value"
placeholder=""
:browseBtnShow="true"
browseType="directory"
suffix="qrcode.png"
:browseFilters="[{ name: 'All Files', extensions: ['*'] }]"
:render.sync="config.filePath.type">
</el-input>
</el-form-item>
</el-form>
</section>
</template>
<script>
import locales from './locales.yaml'
export default {
name: 'StringToQrcoder',
__i18n: [JSON.stringify(locales)],
props: {
value: {
type: Object,
default () {
return {}
}
},
fields: {
type: Object,
default () {
return {
filePath: { show: true, style: '' },
content: { show: true, style: '' }
}
}
},
id: {
type: [String, Number],
default () {
return ''
}
}
},
mounted () {
if (Object.keys(this.value).length) {
this.config = this.value
}
},
data () {
return {
Name: 'StringToQrcoder',
config: {
filePath: { type: 'T', value: '' },
content: { type: 'T', value: '' }
},
rules: {}
}
},
methods: {},
watch: {
value (newValue) {
this.config = newValue
},
config: {
handler (newValue, oldValue) {
this.$emit('input', newValue)
},
deep: true
}
}
}
</script>
示例
将字符串转二维码图片
描述
将字符串火语言组件编辑器开发的组件《字符串转二维码》生成二维码图片保存到D:\HuoYuYan\qrcode.png，再用二维码识别组件将其内容识别出来。
配置
输出结果
