精华内容
下载资源
问答
  • 使用React,fabricjs开发了手机版在线名片编辑器
    2022-05-24 12:46:50

    网上的名片编辑器有一些,但是都不符合自己的需求,于是自己写了一个。直接上效果图:在这里插入图片描述

    源码是支持调整名片尺寸的,我没开启。

    图片编辑js库测试了fabricjs和konvajs,对比下来fabricjs的性能更好。

    当然一开始是给自己的项目用的,主要用于名片编辑功能。但是用于图片编辑器也是可以的。

    也不知道该怎么介绍了,直接上演示链接(在手机上体验更好!):

    https://teebbstudios.github.io/card-editor-demo/index.html

    更多相关内容
  • 名片编辑器

    2014-07-03 20:38:15
    学习名片编辑方法,课余时间里可以玩玩。这款软件只是试用版,所以请大家注意保护知识产权哦
  • 视像编辑器 带有Vue.js和HTML5画布的图像编辑器 居住在 调整图片大小 调整颜色 添加CSS过滤器 庄稼 文字叠加 转换为PNG或JPG并下载 它旨在成为一个轻量级的图像编辑器,它使用自己的资源在客户端浏览器上进行所有...
  • mixNameCard 一个智能生成团队名片的小项目~ step 1 简单的名片生成 重构了一下 增加了日签功能,当用户没有上传头像的时候用日期...step 2 通用的工作流程,集成svg编辑器 step 3 智能生成 ~~ by shadow FrankHsu
  • 组件库动态编辑 H5页面预览功能 保存H5页面配置文件 保存为模版 移动端跨端适配 媒体组件 在线下载网站代码功能 添加typescript支持 表单设计/自定义表单组件 可视化组件Chart实现 在线编程模块(Mini Web IDE) ...

    IT实战联盟博客:http://blog.100boot.cn

    H5-Dooring 是一款功能强大,开源免费的H5可视化页面配置解决方案,致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主, 后台采用nodejs开发.

    预览

    推荐一款功能强大,开源免费的H5可视化编辑器

     

    推荐一款功能强大,开源免费的H5可视化编辑器

     

    推荐一款功能强大,开源免费的H5可视化编辑器

     

    在线地址:H5-Dooring强大的拖拽生成H5制作工具

    产品技术实现

    • React 前端主流框架(react,vue,angular)之一,更适合开发灵活度高且复杂的应用
    • dva 主流的react应用状态管理工具,基于redux
    • less css预编译语言,轻松编写结构化分明的css
    • umi 基于react的前端集成解决方案
    • antd 地球人都知道的react组件库
    • axios 强大的前端请求库
    • react-dnd 基于react的拖拽组件解决方案,具有优秀的设计哲学
    • qrcode.react 基于react的二维码生成插件
    • zarm 基于react的移动端ui库,轻松实现美观的H5应用
    • koa 基于nodejs的上一代开发框架,轻松实现基于nodejs的后端开发
    • @koa/router 基于koa2的服务端路由中间件
    • ramda 优秀的函数式js工具库

    已完成功能

    1. 组件库拖拽和显示
    2. 组件库动态编辑
    3. H5页面预览功能
    4. 保存H5页面配置文件
    5. 保存为模版
    6. 移动端跨端适配
    7. 媒体组件
    8. 在线下载网站代码功能
    9. 添加typescript支持
    10. 表单设计器/自定义表单组件
    11. 可视化组件Chart实现
    12. 在线编程模块(Mini Web IDE)
    13. 新增图表组件 面积图,折线图, 饼图
    14. 添加图片库,支持用户在线选择图片素材 15.升级图片组件为图文组件
    15. 添加模版库
    16. 添加可视化组件(基于g2)如折线图, 饼图, 面积图等
    展开全文
  • 名片制作工具

    2013-10-14 00:35:50
    自己制作名片的小工具,效果很不错的,用自己的采集设计名片
  • 电子名片编辑器 一个简单的vcf文件编辑器。 您可以使用此简单工具轻松导出vcf文件的编辑(修改,删除)条目。 感谢Thought.vCards出色的解析和生成vcf格式的库。 另外,我使用了此示例中的MVP模式: : 发行说明...
  • 名片编辑器及名片控件演示程序

    千次阅读 2007-05-14 13:33:00
    1. 名片编辑器(类库)设计简介:名片控件可将联系人信息以直观的名片形式显示出来。名片编辑器用于编辑名片模板,可插入图片、指定格式的文字。可将名片导出为图片。开发环境:Visual Studio 2005(C#语言)运行...

      1. 名片编辑器(类库)

    设计简介: 名片控件可将联系人信息以直观的名片形式显示出来。名片编辑器用于编辑名片模板,可插入图片、指定格式的文字。可将名片导出为图片。
    开发环境: Visual Studio 2005 (C#语言)
    运行平台: Microsoft .NET 2.0

     截图如下:

    编辑主界面:
    FCG.CardEditor 1 

    通过首选项设置编辑区的样式:
    FCG.CardEditor 2

    通过“视图”菜单指定要显示的工具栏。
    FCG.CardEditor 3

    可以设置字段的字体样式、前景色、背景色、背景图片等。
    FCG.CardEditor 4

    2 名片控件演示程序(一个简单的联系人程序)

    为演示名片类库功能,提供了一个联系人管理程序。通过在名片模板中指定字段的名称,并将名片控件与数据表关联,就可以自动显示表中的图片和文字。这样联系人信息就能更直观地显示出来。你可以更换模板、编辑模板、并可将名片导出为图片。

    开发环境:Visual Studio 2005C#语言),Access 2003

    运行平台:Microsoft .NET 2.0

    截图如下:

    演示程序界面,当一条记录被选中,它的信息就会被显示在名片中。名片的样式是通过当前目录模板Default.card指定的。
    FCG.SimpleContact 1.png

    没有信息的视图。那两个显示的字段具有锁定属性,其文本、大小、背景图片等在查看视图中都无法改变。
    FCG.SimpleContact 2.png

    你可以在名片上点击右键对名片操作:
    FCG.SimpleContact 3.png

    启动名片编辑器:
    FCG.SimpleContact 4.png

    展开全文
  • 最近小编接到一个项目,需要在浏览器的ide中支持自定义提示功能,接下来通过本文给大家介绍在vue中实现Monaco Editor自定义提示功能,需要的朋友可以参考下
  • 飞印名片设计是一款简单好用的名片设计软件。软件可以帮助用户轻松制作出一张精美的名片。用户只需要选择任意模板、图文编辑、上传LOGO进行设计,就可做出想要的个性名片,并且还有去处白底功能。是您设计名片必不...
  • 简单二维码生成编辑器是一个QR二维码生成解译编辑工具,最重要的是,生成后可以简单的编辑绘制,做出比较个性的二维码图片。   按照生成类别做了分类,包括文本、短信、网址、名片、邮件、WIFI、电话。加入了解译...
  • 【取消】按钮,点击保存即可保存到相册,取消则回到编辑页面: 保存的图片效果: 这个很简单,主要用微信小程序的canvas实现,具体代码: card.wxml: <view class="content"> <scroll-view scroll-y=...

    效果预览:

    请添加图片描述
    信息输入完成后,点击【确定生成】,将生成图片,并出现【保存】&&【取消】按钮,点击保存即可保存到相册,取消则回到编辑页面:
    请添加图片描述
    请添加图片描述

    保存的图片效果:
    请添加图片描述
    这个很简单,主要用微信小程序的canvas实现,具体代码:

    card.wxml:

    <view class="content">
      <scroll-view scroll-y="true" style="height: 1334rpx;" 
        bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    
        <!-- 模板生成弹框 -->
        <view class="canvas-content">
          <view class="con">
            <canvas canvas-id='myCanvas' class='canvas'></canvas>
            <view class="info">
              <!-- 行业 -->
              <view class="show-post-text">{{upost}}</view>
              <!-- 姓名 -->
              <view class="show-name-text">{{uname}}</view>
              <!-- 联系电话 -->
              <view class="show-company-text">{{ucompany}}</view>
            </view>
          </view>
          <view class="canvas-bottom" hidden="{{isHidde}}">
            <view class="btn-save" bindtap="saveImg">保存</view>
            <view class="btn-close" bindtap="closeDialog">取消</view>
          </view>
        </view>
    
        <!-- 编辑区域 -->
        <view class="edit-tips">编辑:</view>
        <view class="form-container">
          <view class="show-name item">
            <label class="name-label">姓名:</label>
            <input type="text" v-model="name" placeholder="" bindinput="onchangeName" class="input" />
          </view>
          <view class="line"></view>
          <view class="show-company item">
            <label class="company-name-label">联系电话:</label>
            <input type="text" v-model="company" placeholder="" bindinput="onchangeCompany" class="input" />
          </view>
          <view class="line"></view>
          <view class="show-post item">
            <label class="name-post-label">从业行业:</label>
            <input type="text" v-model="post" placeholder="" bindinput="onchangePost" class="input" />
          </view>
        </view>
    
        <view class="create-btn">
          <button bindtap="createImg" hidden="{{hiddeButton}}" class="btn">确定生成</button>
        </view>
      </scroll-view>
      
    </view>
    

    card.js:(主要的逻辑功能)

    基本都有写上注释了,不清楚的可以看官方文档的API

    Page({
      data: {
        imgUrl: "http://pic.51yuansu.com/backgd/cover/00/40/00/5be62bbb6ac3f.jpg!/fw/780/quality/90/unsharp/true/compress/true",
        isHidde: true,
        hiddeButton: false,
        ucompany: '',
        uname: '',
        upost:''
      },
    
      /* 监听input输入值的变化 实时更新*/
      onchangeCompany(e) {
        var that = this;
        that.setData({
          ucompany: e.detail.value,
        })
      },
      onchangePost(e) {
        var that = this;
        that.setData({
          upost:e.detail.value,
        })
      },
      onchangeName(e) {
        var that = this;
        that.setData({
          uname: e.detail.value
        })
        // console.log("输入监听变化:" + this.data.uname);
      },
      scrollToTop() {
        this.setAction({
          scrollTop: 0
        })
      },
    
      /* 初始化加载显示 */
      onLoad: function (options) {
        //把网络图片转成在本地
        wx.getImageInfo({
          src: this.data.imgUrl,
          success: (res) => {
            this.setData({
              imgUrl: res.path
            })
            this.getcanvas();
          }
        })
      },
    
      /* 生成图片 */
      createImg() {
        this.getcanvas();
        this.setData({
          isHidde: false,
          // hiddeButton: true,
          ucompany: '',
          uname: '',
          upost: ''
        })
      },
    
      /* 绘制canvas内容 */
      getcanvas() {
        let that = this;
        let ctx = wx.createCanvasContext('myCanvas');
        // ctx.setFillStyle('red');    
        let metrics = ctx.measureText(that.data.ucompany); // 获取字体的宽度
        let name = ctx.measureText(that.data.uname); // 获取字体的宽度
        let rpx = 1;
        wx.getSystemInfo({
          success(res) {
            rpx = res.windowWidth / 375; 
    
          },
        })
        ctx.drawImage(this.data.imgUrl, 0, 0, 300 * rpx, 460 * rpx);
            // 绘制行业文字
            ctx.setFontSize(20 * rpx);
            ctx.setFillStyle('#fff');
            ctx.setTextAlign('center');
            ctx.fillText(that.data.upost,60 * rpx,30* rpx); // 参数:文本内容,x,y
            // 绘制名字文字
            ctx.setFontSize(40 * rpx);
            ctx.setFillStyle('#fff');
            ctx.setTextAlign('center');
            ctx.fillText(that.data.uname, 150 * rpx, 80 * rpx); 
            //  绘制联系电话
            ctx.setFontSize(20 * rpx);
            ctx.setFillStyle('#fff');
            ctx.setTextAlign('left')
            ctx.fillText(that.data.ucompany, 80 * rpx, 120 * rpx);
            ctx.draw(); // 将内容添加到canvas上
      },
    
      /* 保存图片 */
      saveImg() {
        wx.showLoading({
          title: '正在保存',
          mask: true,
        })
        wx.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: (res) => {
            wx.hideLoading();
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res) {
                wx.showToast({
                  title: '保存成功!',
                })
              }
            })
          }
        });
      },
    
      /* 取消保存 */
      closeDialog() {
        wx.showToast({
          title: '已取消保存!',
        });
        this.setData({
          isHidde: true,
        });
        this.resetCanvas();
      },
    
      /* 重置图片模板内容 */
      resetCanvas() {
        this.setData({
          hiddeButton: false,
        });
        this.getcanvas();
      },
    
    
    })
    

    其中还有一个就是用v-model绑定数据,通过bindinput绑定事件监听用户动态输入的信息,在事件处理中,通过setData 设置变量的值为所输入的信息:

        that.setData({
          ucompany: e.detail.value,
        })
    

    其他也是类似如此。

    card.wxss:

    .canvas-bottom {
      display: flex;
      flex-direction: row;
      margin-top: 70rpx;
      width: auto;
      box-sizing: border-box;
      justify-content: space-around;
    }
    
    .btn-save {
      text-align: center;
      border-radius: 30rpx;
      /* margin-left: 50rpx; */
      width: 130rpx;
      font-size: 14px;
      padding: 13rpx 40rpx;
      /* background-color: #2fa5ff; */
      background-color:#7F7AA6 ;
      color: #fff;
    }
    
    .btn-close {
      text-align: center;
      border-radius: 30rpx;
      width: 130rpx;
      /* margin-right: 50rpx; */
      font-size: 14px;
      padding: 13rpx 40rpx;
      border: 1rpx solid #7F7AA6 ;
      color: #7F7AA6 ;
    }
    
    .create-btn {
      width: 100%;
      height: 60rpx;
      font-size: 14px;
      background-color: #7F7AA6 ;
    }
    
    .content {
      height: 100vh;
    }
    
    .canvas-content {
      background: #ffffff;
      position: relative;
      margin: 0 auto;
    }
    
    .canvas-content .con {
      /* background: #AE0001; */
      width: 690rpx;
      position: relative;
      margin: 0 auto;
    }
    
    .canvas {
      margin: 15rpx auto;
    }
    
    
    .canvas-content {
      width: 750rpx;
      padding-bottom: 60rpx;
    }
    
    .info {
      position: absolute;
      left: 0rpx;
      top: 0rpx;
      height: 300rpx;
    }
    
    .show-name-text {
      font-size: 72px;
      color: #fff;
      width: 600rpx;
      text-align: center;
    }
    .show-post-text {
      font-size: 32px;
      color: #fff;
      width: 600rpx;
      text-align: center;
    }
    
    .choose {
      width: 100vw;
      margin-top: 100rpx;
      display: flex;
      justify-content: center;
    }
    
    .choose .choose-btn {
      width: 60%;
      margin-top: 30rpx;
      display: flex;
      justify-content: space-around;
    }
    
    .choose .choose-btn .abtn,
    .bbtn {
      margin-right: 20rpx;
      font-size: 16px;
      color: #424242;
      text-align: center;
    }
    
    .choose .choose-btn .abtn {
      border: 1rpx solid #7F7AA6 ;
      color: #7F7AA6 ;
    }
    
    .edit-tips {
      height: 160rpx;
      background: #eee;
      padding-left: 30rpx;
      font-size: 24rpx;
      color: #969696;
      line-height: 240rpx;
    }
    
    .edit-canvas {
      width: 750rpx;
      height: 300rpx;
      text-align: center;
      line-height: 300rpx;
      background: #F80101;
    }
    
    .line {
      width: 100%;
      height: 1rpx;
    }
    
    .company-text {
      line-height: 60rpx;
      height: 60rpx;
    }
    
    .show-company-text {
      line-height: 60rpx;
      height: 60rpx;
      padding-left: 30rpx;
      color: #fff;
      width: 750rpx;
      text-align: left;
      font-size: 40rpx;
    }
    
    .input {
      width: 440rpx;
      height:70rpx;
      margin-top: 15rpx;
      padding-left: 30rpx;
      border-radius: 44rpx;
      background: #f5f5f5; 
      display: inline-block;
    }
    
    .company-name-label,.name-post-label {
      float: left;
      margin-right: 30rpx;
      color: #747474;
    }
    
    .name-label,.post-label {
      float: left;
      color:  #747474;
      width: 160rpx;
    }
    
    .show-post{
      background: #fff;
      height: 80rpx;
      padding-left: 30rpx;
      line-height: 80rpx;
    }
    
    .show-company {
      background: #fff;
      height: 80rpx;
      padding-left: 30rpx;
      line-height: 80rpx;
    }
    
    .show-name {
      padding-left: 30rpx;
      background: #fff;
      height: 80rpx;
      line-height: 80rpx;
    }
    
    .show-post {
      padding-left: 30rpx;
      background: #fff;
      height: 80rpx;
      line-height: 80rpx;
    }
    
    .create-btn {
      height: 80rpx;
      text-align: center;
      font-size: 32rpx;
      color: #fff;
      text-align: center;
      border-radius: 0rpx;
      background:#7F7AA6 ;
      margin-top: 160rpx;
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
    }
    
    .create-btn .btn {
      text-align: center;
      color: #fff;
      font-size: 16px;
      background: none;
    }
    

    card.json:

    {
      "usingComponents": {},
      "navigationBarTitleText":"模板编辑"
    }
    

    因为图片网络上拿来的,需要设置不检验合法域名,纯属周末瞎玩!

    源码下载:

    https://github.com/Lydever/wx-business-card

    展开全文
  • 修改百科词条,在原有词条中加入您的内容,如广告内容、名片… 3.百科内容撰写,根据客户要求编写词条内容 优渡网百度百科服务范围: 1.创建百科词条,如品牌名、网站名、产品词、人名、公司名、规范的关键词等。 2....
  • 飞印名片设计内含2000多个新潮名片模板供您选择,用户只需要选择任意模板、图文编辑、上传LOGO进行设计,就可做出您的想要的个性名片。该设计操作非常简单, 跟使用WORD文档一样,只要会打字就可以使用.
  • 在这个例子中,我引用了包括AngularJS在内的一些JavaScript库,实现了一个很简单的名片生成。 尽管在这个小应用中,AngularJS库相较于其他JavaScript库来说做的事不多,然而,这个小而强大的AngularJS却是该应用的...
  • 在线上传QQ透明名片工具 免费在线上传修改QQ透明名片网页版工具 上传源码压缩包到服务器 解压即可使用 部分文字可使用编辑器修改
  • 直接下载解压佳印名片设计软件压缩包,无需任何安装步骤就可轻松应用我们的名片模板,编辑文字、上传图片设计个性化的专业名片,同时用户可自行导入已有设计,只需简单上传订购,佳印网将会为您提供优质的印刷服务...
  • [优化] 编辑器可插入视频 [优化] 后台上传图片尺寸提示 [优化]动态一张图片显示效果 [优化]首页点击展开名片信息出现加载 [修复]个人动态分享出去,底部头像偏右 [修复]官网模板招聘信息里面 联系HR的电话号码...
  • gimp图片编辑器 GIMP 1.0发布19周年快乐! 让我合法地给您买一杯饮料(嗯,在加拿大)。 当然有很多事情要庆祝。 哎呀! 像其他年轻专业人士一样,这些年来,我从事过许多零碎的工作,慢慢地将自己陌生而又广泛的...
  • 具备友好的用户界面和抠图换背景、照片修复、相框和拼贴画等诸多实用功能,允许用户轻松创建、编辑、增强、打印和处理用户的数码照片和计算机图形,并轻松创建引人注目的图形、精美的拼贴画、贺卡、名片、网站设计、...
  • win10家庭版怎么添加组策略编辑器

    千次阅读 热门讨论 2020-06-06 17:37:12
    于是最后还是找到了一种既不用升级为专业版的又可以有组策略编辑器的办法分享给大家! 正文 具体步骤如下: 1、在Windows10系统桌面空白处点击右键,在弹出菜单中选择“新建/文本文档”菜单项。 2、双击打开新建的...
  • 易打标二维码条码生成打印软件,适用于:二维码生成,二维码,二维码制作,二维码生成,条形码,RFID,24on云标签,易打标 条码生成,电商标签,防伪标签,物流标签,商品标签,销售标签,食品标签,珠宝标签,吊牌,证卡,名片,...
  • Card.js - 创建自定义名片布局、使用用户数据填充名片、允许编辑和保存回数据库的功能 实施注意事项: 目前,“卡片”视图在 app/view/:id 处呈现。 这样做的好处是允许用户轻松返回 URL 以编辑他们的卡片(或将 ...
  • 对于企业的多个或者大批量员工名片,飞印名片设计可以让用户将设计的第一个名片作为母板,进行无限量复制,新建其他同事的名片,然后进行编辑、保存每个员工的名片文件。操作非常便捷。 4、名片文件可免费下载 使用...
  • 基础配置vim的配置是在用户主目录下的~/.vimrc文件中完成的,如果没有的话,需要自己新建一下:首先做些简单的配置:为py文件添加下支持pep8风格的配置:分割窗口vim在编辑的时候就可以打开多个文件::vs 或者 :...
  • Outlook 2013中的签名编辑器允许您从文本,图形或名片创建自定义签名。 我们将向您展示如何使用签名编辑器的各种功能来自定义签名。 To open the Signature Editor, click the File tab and select Options on the ...
  • 它的工作方式类似于一个优秀的图像编辑器,可设计双面或折叠式名片。它有一个不错的图像编辑器,支持添加徽标、图像、文字、符号、形状、阴影、线条和曲线来进行你的艺术创作,支持可视化的图层编辑操作。软件带有上...
  • 名片管理系统 前提:实现名片管理系统,首先要创建两个python file ,分别是cards_main.py和cards_tool.py,前一个是主代码块的实现,后一个是提供主代码块所调用的函数 1.主代码块的实现 import cards_tool as ct #...
  • 序号微调可向前或向后查询。 3、多种查询功能按钮可以查询: A、直接输入成语词目查询。 B、检索码查询:按拼音字母的首字母查询,如“一帆风顺”的检索码为:“yffs”。 C、灯谜谜面反查成语:如按灯谜谜面...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,134
精华内容 1,653
关键字:

名片编辑器