小程序模板网

小程序:图片和文字合成一张图片

2018-05-05 伐阇罗

代码例子 

今天在百般的无聊中,去看了看小程序的api文档,抱着学习,增加点知识的态度下,又是很认真的看了一边各个api的说明和使用例子,看着看着就萌发了怎么一个想法,记得以前在H5时代的时候,要实现图片和文字结合,合成一张新的图片,这个得借助后台的能力,但今天我看小程序的api可以完全不借助后台的节奏,都能很好的完成怎么一个功能。

页面效果例子

这个小程序后续有机会,会跟大家见面,下面不多说直接上码:

 

  1. <!--wxml部分-->
  2. <view class="">
  3. <view class="canvasStyle">
  4. <canvas canvas-id="myCanvas" bindtouchstart="start"
  5. bindtouchmove="move"/>
  6. <view class="Canvas_Text"><image src="{{imageUrl}}"></image></view>
  7. //这里是为了解决文字拖动时会有白光闪现
  8. </view>
  9. <view class="chooseImage">
  10. <view class="Btn BtnImg_select" bindtap="chooseImageFun">先选择图片</view>
  11. <view class="Input_text">
  12. <input placeholder="请输入装逼内容" bindinput="InputFuns" />
  13. </view>
  14. <view wx:if="{{showst}}" class="Btn generateBtn" bindtap="Okgenerate">
  15. 生成,并保存
  16. <view>(当你点击生成的那一刻,恭喜你装逼生涯就此开始了)</view>
  17. </view>
  18. <view wx:if="{{!showst}}" class="Btn generateBtn grayBtn">
  19. 生成,并保存
  20. <view>(当你点击生成的那一刻,恭喜你装逼生涯就此开始了)</view>
  21. </view>
  22. </view>
  23. </view>
 

  1. const app = getApp()
  2. const ctx = wx.createCanvasContext('myCanvas')
  3. Page({
  4. data: {
  5. text_x: 20, //x轴
  6. text_y:20, //y轴
  7. imageUrl: '', // 生成的图片路径
  8. showst:false, //是否完成图片和文字的填入
  9. sytext: '', //文本
  10. },
  11. chooseImageFun(){ //选择图片
  12. var _this = this
  13. wx.chooseImage({
  14. success: function (res) {
  15. console.log(res)
  16. _this.setData({
  17. imageUrl: res.tempFilePaths[0]
  18. })
  19. ctx.drawImage(res.tempFilePaths[0], 6, 0, 189, 310)
  20. ctx.draw()
  21. }
  22. })
  23. },
  24. InputFuns(e){ //文字
  25. this.setData({
  26. sytext: e.detail.value
  27. })
  28. ctx.setFontSize(14)
  29. ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)
  30. ctx.draw(true)
  31. this.setData({
  32. showst:true
  33. })
  34. },
  35. start(e){ // 手指开始接触移动
  36. console.log(e)
  37. this.setData({
  38. text_x: e.touches[0].x,
  39. text_y: e.touches[0].y
  40. })
  41. ctx.clearRect(0, 0, 200, 310)
  42. ctx.draw()
  43. ctx.drawImage(this.data.imageUrl, 6, 0, 189, 310) //重新画上
  44. ctx.setFontSize(14)//重新画上字体大小
  45. ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)//重新画上
  46. ctx.draw(true) //重新画上
  47. },
  48. move(e) { // 手指在移动
  49. console.log(e)
  50. this.setData({
  51. text_x: e.touches[0].x,
  52. text_y: e.touches[0].y
  53. })
  54. ctx.clearRect(0, 0, 200, 310) //清除画布上的内容
  55. ctx.draw()
  56. ctx.drawImage(this.data.imageUrl, 6, 0, 189, 310) //重新画上
  57. ctx.setFontSize(14) //重新画上字体大小
  58. ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)//重新画上
  59. ctx.draw(true)//重新画上
  60. },
  61. Okgenerate(){ //生成图片方法
  62. var _this = this
  63. this.setData({
  64. showst: false
  65. })
  66. wx.canvasToTempFilePath({ //生成图片
  67. x: 0,
  68. y: 0,
  69. width: 200,


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24260.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询