存在博客里偶尔再看看
//.wxml文件
//.js文件
Page({
data:{
imagePath:"",
neirong: "何止于装逼",
maskHidden:true,
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
this.createNewImg();
//创建初始化图片
},
//将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
createNewImg:function(){
var that = this;
var context = wx.createCanvasContext('mycanvas');
var path = "/images/tools/iphone.jpg";
//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片
//不知道是什么原因,手机环境能正常显示,官方推荐真机测试,工具端为模拟。
context.drawImage(path, 0, 0, 686, 1485);
//context.draw(true);
//context.draw();
this.setNeirong(context);
//绘制图片
context.draw();
//将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
setTimeout(function(){
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({
imagePath: tempFilePath,
// canvasHidden:true
});
},
fail: function (res) {
console.log(res);
}
});
},200);
},
//将内容绘制到canvas的固定
setNeirong: function (context) {
var neirong = util.toThousands(this.data.neirong);
context.setFontSize(80);
context.setFillStyle("#ffffff");
context.setTextAlign("center");//居中
context.save();
context.fillText(neirong, 343, 580);
context.restore();
context.stroke();
},
//点击图片进行预览,长按保存分享图片
previewImg:function(e){
var img = this.data.imagePath
wx.previewImage({
current: img, // 当前显示图片的http链接
urls: [img] // 需要预览的图片http链接列表
})
},
formSubmit: function(e) {
var that = this;
var neirong = e.detail.value.neirong;
neirong = neirong == "" ? "何止于装逼":neirong;//空值填
this.setData({
neirong:neirong,
maskHidden:false
});
wx.showToast({
title: '生成器工作中...',
icon: 'loading',
duration:1000
});
setTimeout(function(){
wx.hideToast()
that.createNewImg();
that.setData({
maskHidden:true
});
},1000)
}
})