【微信小程序】Text2Image

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

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

• BiliBili
• Youtube

• 

  【微信小程序】text2image

  http://v.youku.com/v_show/id_XMzgwNzEyNDM0NA==.html

参考

• 微信小程序 绘图 API接口
• 使用canvas生成朋友圈分享图片并保存到手机相册

主要功能

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

步骤

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页面

,...
]

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

添加布局

<!--pages/text2image/text2image.wxml-->

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

    "weui-cells__title">生成图片<canvas style="width:{{windowWidth}}px;height:{{contentHeight}}px" canvas-id="myCanvas"></canvas>
    "weui-cells__title">设置"weui-cells weui-cells_after-title weui-btn-area">
      <button type="primary" bindtap="chooseBackgroundImage">选择背景图片</button>

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

添加逻辑
设置data
,136);">// 内容
    lineHeight: 30,136);">// 行高 
    fontColorIndex: // 当前字体颜色
    fontColors: [
      'black','red',68);">'white',68);">'green'
    ],136);">// 字体颜色列表
    backgroundImage: '../../src/images/leaves.png',136);">// 背景图片
    hasGenerate: false,136);">// 是否已经生成图片
},
导入背景图片




获取窗口宽度
解析文字内容
;
    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;
  }
绘制背景
绘制文字
);
    ctx.fillText(content,this.data.windowWidth / 2,height);
}
清空画布
创建图片
);

    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();
}
生成图片
设置页面显示时生成图片
这一步的目的是页面初始化页面数据。

绑定输入新内容事件
现在尝试在内容文本框中输入文字，文字会实时显示在下面的图片区域。

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

绑定选择字体颜色事件
点击选择文字颜色区域，即可进行颜色选择，可以在fontColors数组中添加 【更多预定义颜色】。

保存图片
,success: function (res) {
        that.savePicToAlbum(res.tempFilePath);
      }
    },this)
  },savePicToAlbum: function (tempFilePath) {
    let that = this;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',success() {
              wx.saveImageToPhotosAlbum({
                filePath: tempFilePath,success(res) {
                  wx.showToast({
                    title: '保存成功'
                  });
                },fail(res) {
                  console.log(res);
                }
              })
            },fail() {
              // 用户拒绝授权,打开设置页面
              wx.openSetting({
                success: function (data) {
                  console.log("openSetting: success");
                },fail: function (data) {
                  "openSetting: fail");
                }
              });
            }
          })
        } else {
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,success(res) {
              wx.showToast({
                title: '保存成功',});
            },fail(res) {
              console.log(res);
            }
          })
        }
      },fail(res) {
        console.log(res);
      }
    })
  }
点击保存图片按钮即可保存生成的图片。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!