小程序使用画布为图片添加水印、拼接图片和创建名片
浏览：498 次
画布是微信小程序的原生组件，所以我们在使用时应该特别注意微信小app对原生组件的影响。画布组件实际上是一个画布，您可以在画布上绘制许多难以以其他方式实现的内容。现在我将介绍如何给图片添加水印、如何拼接图片、如何制作个性化名片以及如何制作涂鸦画板。
水印
一般来说，添加水印可以分为三个步骤。第一步是创建一个画布，第二步是在画布上绘制要添加水印的图片，第三步是绘制想要添加水印的文本
创建草图板
应该注意，画布id是唯一的。如果使用现有的画布id，则与画布标记对应的画布将被隐藏，不再正常工作。在这里，我们将宽度和高度设置为动态的，并根据图片的宽度和高度确定画布宽度和高度的比例。
然后我们需要在中进行操作。js文件：
var ctx=wx.createCanvasContext（“我的画布”）
var th=这个
//选择图片。这里我们先选择一个。
wx.选择图像({
计数：1，
sizeType:[“原始”，“压缩”]，
sourceType:[“album”，“camera”]，
成功（res）{
var tempFilePaths=res.tempFilePaths
//获取基本图片信息
wx.获取图像信息({
src:tempFilePaths[0]，
成功：函数（res）{
var宽度=res.width
var height=相对高度
//获取屏幕宽度
让screenWidth=wx.getSystemInfoSync（）.windowWidth
//处理图片的宽高比
如果（宽度>=高度）{
如果（宽度>屏幕宽度）{
width=屏幕宽度
}
height=高度/res.width*宽度
}其他{
如果（宽度>屏幕宽度）{
width=屏幕宽度
}
如果（高度>400）{
高度=400
宽度=res.width/res.height*高度
}其他{
height=高度/res.width*宽度
}
}
that.setData（设置数据）({
imageWidth:宽度，
imageHeight:高度，
})
ctx.drawImage（res.path，0，0，width，height）
ctx.rotate（对象旋转*数学PI/180）
对于（假设j=1；j<12；j++）{
ctx.beginPath（）
ctx.setFontSize（14）
ctx.setFillStyle（“白色”）
ctx。FillText（'要添加的文本'，0，50*j）
对于（设i=1；i<12；i++）{
ctx.beginPath（）
ctx.setFontSize（14）
ctx.setFillStyle（“白色”）
ctx。FillText（“要添加的文本”，（15+（14-1）*“要添加文本”长度）*i，50*j）
}
}
对于（假设j=0；j<12；j++）{
ctx.beginPath（）
ctx.setFontSize（对象字体大小）
ctx.setFillStyle（对象颜色）
ctx。FillText（“要添加的文本”，0，-50*j）
对于（设i=1；i<12；i++）{
ctx.beginPath（）
ctx.setFontSize（14）
ctx.setFillStyle（“白色”）
ctx。FillText（“要添加的文本”，（15+（14-1）*“要添加文本”长度）*i，-50*j）
}
}
ctx.draw（）
}
})
}
})
图片拼接
图片拼接的想法更简单。说白了，我们可以在画布上绘制几张图片，然后导出它们。
我不会说任何关于创建画布的事情。如上所述，宽度和高度也是动态的。我们必须根据获得的图像动态计算图像的宽度和高度。这里，我们主要计算它的高度，以确保我们得到的图像不会变形。
//这里的图像数组可以从相册中选择，也可以从上一页中传输，但需要注意的是，图像数组必须传输到JSON
对于（var i=0；i var imageUrl=图像Arr[i] wx.获取图像信息({ src:imageUrl， 成功：函数（res）{ var宽度=res.width
