用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

【微信小程序】Text2Image

纸飞机 2018-11-12 16:05

今天给大家分享如何制作一个Text2Image微信。视频地址【内含源码下载链接】BiliBiliYoutube【微信小程序】text2imagehttp://v.youku.com/v_show/id_XMzgwNzEyNDM0NA==.html参考微信小程序 绘图 API接口使用canvas生 ...

今天给大家分享如何制作一个Text2Image微信。

视频地址【内含源码下载链接】

  • BiliBili

  • Youtube

  • 【微信小程序】text2image
    http://v.youku.com/v_show/id_XMzgwNzEyNDM0NA==.html

参考

主要功能

  • 添加文字
  • 选择背景
  • 选择字体大小
  • 生成图片
  • 保存图片到相册

步骤

  1. 创建项目
  2. 导入weui for 小程序样式库
  3. 添加text2image页面
  4. 添加布局
  5. 添加逻辑
  6. 完成 & 测试

创建项目

导入weui for 小程序样式库

  1. 下载weui for 小程序样式文件

https://github.com/Tencent/we...

  1. 将weui.wxss添加到项目中

  1. 引入全局样式
// app.wxss
@import '/src/wxss/weui.wxss';

添加text2image页面

// app.json
pages: [
  'pages/text2image/text2image',
  ...
]

添加以上代码,注意新页面放在pages数组第一个,确保小程序的首页为text2image,修改完之后并保存,添加新页面为下图时就成功了!

添加布局



<view class="page">
  <view class="page__bd">
    <view class="weui-cells__title">内容view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell">
          <view class="weui-cell__bd">
            <textarea class="weui-textarea" bindinput='typeNewContent' value="{{content}}" placeholder="请输入文本"/>
          view>
      view>
    view>

    <view class="weui-cells__title">生成图片view>
    <view class="weui-cells weui-cells_after-title">
      <canvas style="width:{{windowWidth}}px;height:{{contentHeight}}px" canvas-id="myCanvas">canvas>
    view>

    <view class="weui-cells__title">设置view>
    <view class="weui-cells weui-cells_after-title weui-btn-area">
      <button type="primary" bindtap="chooseBackgroundImage">选择背景图片button>

      <view class="section">
        <view class="section__title">选择文字颜色view>
        <picker bindchange="bindPickerChange" value="{{fontColorIndex}}" range="{{fontColors}}">
          <view class="picker">
            当前选择:{{fontColors[fontColorIndex]}}
          view>
        picker>
      view>
    view>
    
    <view class="weui-btn-area">
      <button type="primary" bindtap="savePic" wx:if="{{hasGenerate}}">保存图片button>
    view>
  view>
view>
// pages/text2image/text2image.wxss

page {
  background-color: #F8F8F8;
}

添加逻辑

设置data

// pages/text2image/text2image.js

data: {
    windowWidth: 0, // 窗口宽度
    contentHeight: 0, // 内容高度
    content: '', // 内容
    lineHeight: 30, // 行高 
    fontColorIndex: 0, // 当前字体颜色
    fontColors: [
      'black',
      'red',
      'white',
      'green'
    ], // 字体颜色列表
    backgroundImage: '../../src/images/leaves.png', // 背景图片
    hasGenerate: false, // 是否已经生成图片
},

导入背景图片

获取窗口宽度

// pages/text2image/text2image.js
onLoad: function (options) {
    let that = this;

    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowWidth: res.windowWidth
        })
      }
    });
},

解析文字内容

// pages/text2image/text2image.js

parseContent: function () {
    let that = this;

    let i = 0;
    let lineNum = 1;
    let thinkStr = '';
    let thinkList = [];
    for (let item of that.data.content) {
      if (item === '\n') {
        thinkList.push(thinkStr);
        thinkList.push('a');
        i = 0;
        thinkStr = '';
        lineNum += 1;
      } else if (i === 19) {
        thinkList.push(thinkStr);
        i = 1;
        thinkStr = item;
        lineNum += 1;
      } else {
        thinkStr += item;
        i += 1;
      }
    }

    thinkList.push(thinkStr);

    return thinkList;
  }

绘制背景

// pages/text2image/text2image.js

drawBackground: function (ctx) {
    ctx.drawImage(this.data.backgroundImage);
}

绘制文字

// pages/text2image/text2image.js

drawFont: function (ctx, content, height) {
    ctx.setFontSize(16);
    ctx.setFillStyle(this.data.fontColors[this.data.fontColorIndex]);
    ctx.setTextAlign('center');
    ctx.fillText(content, this.data.windowWidth / 2, height);
}

清空画布

// pages/text2image/text2image.js

clearCanvas: function (ctx, width, height) {
    ctx.clearRect(0, 0, width, height);
}

创建图片

// pages/text2image/text2image.js

createNewImg: function (thinkList) {
    let that = this;

    let lineNum = thinkList.length;

    let ctx = wx.createCanvasContext('myCanvas');

    this.clearCanvas(ctx, that.data.windowWidth, that.data.contentHeight);

    let height = 60;

    let contentHeight = (lineNum - 1) * that.data.lineHeight + 2 * height;

    that.setData({
      contentHeight: contentHeight
    });

    that.drawBackground(ctx, contentHeight);

    for (let item of thinkList) {
      if (item !== 'a') {
        that.drawFont(ctx, item, height);
        height += that.data.lineHeight;
      }
    }
    ctx.draw();
}

生成图片

// pages/text2image/text2image.js

generateImage: function() {
    let thinkList = this.parseContent();

    this.createNewImg(thinkList);

    this.setData({
      hasGenerate: true
    });
}

设置页面显示时生成图片

// pages/text2image/text2image.js
onShow: function(options) {
    this.generateImage();
}

这一步的目的是页面初始化页面数据。

绑定输入新内容事件

// pages/text2image/text2image.js

typeNewContent: function(e) {
    this.setData({
      content: e.detail.value.trim()
    });

    this.generateImage();
}

现在尝试在内容文本框中输入文字,文字会实时显示在下面的图片区域。

选择背景图片

// pages/text2image/textimage.js

chooseBackgroundImage: function () {
    let that = this;

    wx.chooseImage({
      success: function (res) {
        that.setData({
          backgroundImage: res.tempFilePaths[0]
        });

        that.generateImage();
      }
    })
},

从本地相册选择背景图片或使用照相机拍照,选择成功之后重新生成图片。

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏