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

   
   
   
    科趣
   
   
   
    2018-02-15 17:49

 

代码例子

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

页面效果例子

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

<!--wxml部分--><view class=""><view class="canvasStyle"> <canvas canvas-id="myCanvas" bindtouchstart="start" bindtouchmove="move"/> <view class="Canvas_Text"><image src="{{imageUrl}}"></image></view>//这里是为了解决文字拖动时会有白光闪现</view><view class="chooseImage"> <view class="Btn BtnImg_select" bindtap="chooseImageFun">先选择图片</view> <view class="Input_text"> <input placeholder="请输入装逼内容" bindinput="InputFuns" /> </view> <view wx:if="{{showst}}" class="Btn generateBtn" bindtap="Okgenerate"> 生成，并保存 <view>(当你点击生成的那一刻，恭喜你装逼生涯就此开始了)</view> </view> <view wx:if="{{!showst}}" class="Btn generateBtn grayBtn"> 生成，并保存 <view>(当你点击生成的那一刻，恭喜你装逼生涯就此开始了)</view> </view></view></view>

const app = getApp()const ctx = wx.createCanvasContext('myCanvas')Page({data: { text_x: 20, //x轴 text_y:20, //y轴 imageUrl: '', // 生成的图片路径 showst:false, //是否完成图片和文字的填入 sytext: '', //文本 },chooseImageFun(){ //选择图片 var _this = this wx.chooseImage({ success: function (res) { console.log(res) _this.setData({ imageUrl: res.tempFilePaths[0] }) ctx.drawImage(res.tempFilePaths[0], 6, 0, 189, 310) ctx.draw() } }) }, InputFuns(e){ //文字 this.setData({ sytext: e.detail.value }) ctx.setFontSize(14) ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y) ctx.draw(true) this.setData({ showst:true }) }, start(e){ // 手指开始接触移动 console.log(e) this.setData({ text_x: e.touches[0].x, text_y: e.touches[0].y }) ctx.clearRect(0, 0, 200, 310) ctx.draw() ctx.drawImage(this.data.imageUrl, 6, 0, 189, 310) //重新画上 ctx.setFontSize(14)//重新画上字体大小 ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)//重新画上 ctx.draw(true) //重新画上 }, move(e) { // 手指在移动 console.log(e) this.setData({ text_x: e.touches[0].x, text_y: e.touches[0].y }) ctx.clearRect(0, 0, 200, 310) //清除画布上的内容 ctx.draw() ctx.drawImage(this.data.imageUrl, 6, 0, 189, 310) //重新画上 ctx.setFontSize(14) //重新画上字体大小 ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)//重新画上 ctx.draw(true)//重新画上 }, Okgenerate(){ //生成图片方法 var _this = this this.setData({ showst: false }) wx.canvasToTempFilePath({ //生成图片 x: 0, y: 0, width: 200, height: 310, destWidth: 189, destHeight: 310, quality:1, canvasId: 'myCanvas', success: function (res) { wx.saveImageToPhotosAlbum({ //保存生成的图片到手机相册里 filePath: res.tempFilePath, success(res) { app.showToasts('保存成功') _this.setData({ showst: true }) } }) } }) }})

<!--wxss部分-->.canvasStyle{width:202px;height:312px;border:1rpx solid #000;margin:20rpx auto;position:relative;}.Canvas_Text{width:200px;height:310px;position:absolute;top:1px;left:1px;z-index:1;}.Canvas_Text image{width:100%;height:100%;}.canvasStyle canvas{width:100%;height:100%;margin:1px 0 0 1px; background:none;position:relative;z-index:10;}.chooseImage{width:90%;padding:30rpx 5% 0 5%;}.BtnImg_select{height:80rpx;line-height:80rpx;}.BtnImg_select:active{color:#f1f1f1;background-color:#d95649;}.Input_text{border:1rpx solid #e6e6e6;border-radius:6rpx;font-size:30rpx;height:80rpx;margin:0 0 20rpx 0;}.Input_text input{width:90%;height:100%;padding:0 5% 0 5%;}.generateBtn{padding:10rpx 0 10rpx 0;font-size:28rpx;}

纯前端，完全不借助后台，唯一的确定就是生成的图片的质量太差