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

2018-02-27 11:04:32来源:https://zhuanlan.zhihu.com/p/33923348作者:微信小程序联盟社区人点击

分享


代码例子





今天在百般的无聊中,去看了看小程序的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;}

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



原文作者:奇惠小前端


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


声明:本文来源于网络,版权归作者所有,不代表本专栏观点,有什么问题请联系我,谢谢!


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台