Canvas是微信小程序中的一個(gè)原生組件，因此我們?cè)谑褂盟臅r(shí)候要特別注意微信小程序?qū)υM件的使用說(shuō)明。canvas這個(gè)組件其實(shí)就是一個(gè)畫(huà)布，你可以在上面畫(huà)很多你用其他方式不好實(shí)現(xiàn)的內(nèi)容。下面我就將介紹一下怎么給圖片添加水印，圖片的拼接，怎么制作個(gè)性名片以及制作一個(gè)涂鴉的畫(huà)板。
水印.
水印的添加總的來(lái)說(shuō)可以簡(jiǎn)單的分為三步來(lái)走，第一步先完成一個(gè)畫(huà)布的創(chuàng)建，第二步在畫(huà)板上畫(huà)出你想添加水印的圖片，第三步畫(huà)上你要添加的水印文字
創(chuàng)建畫(huà)板
<canvas style="width: {{imageWidth}}px; height: {{imageHeight}}px;" canvas-id="myCanvas"></canvas>
需要注意的是canvas-id的唯一性，如果使用一個(gè)已經(jīng)出現(xiàn)過(guò)的 canvas-id，該 canvas 標(biāo)簽對(duì)應(yīng)的畫(huà)布將被隱藏并不再正常工作。這里我們將寬度和高度設(shè)置成動(dòng)態(tài)的，根據(jù)圖片的寬高來(lái)確定畫(huà)板寬高的比例。
然后我們需要在.js文件中進(jìn)行操作：
var ctx= wx.createCanvasContext('myCanvas')
var that = this
//選擇圖片，這里我們?cè)O(shè)置先選擇一張。
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
var tempFilePaths = res.tempFilePaths
//獲取圖片基本信息
wx.getImageInfo({
src: tempFilePaths[0],
success: function (res) {
var width = res.width
var height = res.height
//獲取屏幕寬度
let screenWidth = wx.getSystemInfoSync().windowWidth
//處理一下圖片的寬高的比例
if (width >= height) {
if (width > screenWidth) {
width = screenWidth
}
height = height / res.width * width
} else {
if (width > screenWidth) {
width = screenWidth
}
if (height > 400) {
height = 400
width = res.width / res.height * height
} else {
height = height / res.width * width
}
}
that.setData({
imageWidth: width,
imageHeight: height,
})
ctx.drawImage(res.path, 0, 0, width, height)
ctx.rotate(obj.rotate * Math.PI / 180)
for (let j = 1; j < 12; j++) {
ctx.beginPath()
ctx.setFontSize(14)
ctx.setFillStyle('white')
ctx.fillText('你要添加的文字', 0, 50 * j)
for (let i = 1; i < 12; i++) {
ctx.beginPath()
ctx.setFontSize(14)
ctx.setFillStyle('white')
ctx.fillText("你要添加的文字", (15 + (14-1)*"你要添加的文字".length) * i, 50 * j)
}
}
for (let j = 0; j < 12; j++) {
ctx.beginPath()
ctx.setFontSize(obj.fontSize)
ctx.setFillStyle(obj.color)
ctx.fillText("你要添加的文字", 0, -50 * j)
for (let i = 1; i < 12; i++) {
ctx.beginPath()
ctx.setFontSize(14)
ctx.setFillStyle('white')
ctx.fillText("你要添加的文字", (15 + (14-1)* "你要添加的文字".length) * i, -50 * j)
}
}
ctx.draw()
}
})
}
})
圖片拼接.
圖片拼接思路就更加簡(jiǎn)單了，說(shuō)白了就是在一個(gè)畫(huà)布上咱們連續(xù)地畫(huà)幾張圖片再將它導(dǎo)出來(lái)就OK了。
創(chuàng)建畫(huà)布我就不說(shuō)了，還是和上面的一樣，width和height也是動(dòng)態(tài)的。我們得根據(jù)獲取的圖片來(lái)動(dòng)態(tài)的計(jì)算出它的寬高，這里主要是計(jì)算它的高度，以保證我們弄出來(lái)的圖片是不會(huì)變形的。
// 這里的圖片數(shù)組可以從相冊(cè)中選取出來(lái)，也可以從上一個(gè)頁(yè)面?zhèn)鬟^(guò)來(lái)，但是要注意傳的時(shí)候得轉(zhuǎn)成JSON再傳
for(var i = 0; i < imagesArr.length; i++){
var imageUrl = imagesArr[i]
wx.getImageInfo({
src: imageUrl,
success: function (res) {
var width = res.width
var height = res.height
// downNum是一個(gè)對(duì)象，用來(lái)計(jì)數(shù)
obj.downNum = obj.downNum + 1
let sw = wx.getSystemInfoSync().windowWidth
if(width > sw){
width = sw
height = height / res.width * width
}
// heightForCanvas也是一個(gè)對(duì)象，用來(lái)記錄總的高度
ctx.drawImage(res.path, (sw-width)/2.0, obj.heightForCanvas, width, height)
obj.heightForCanvas = obj.heightForCanvas + height
that.setData({
height: obj.heightForCanvas
})
// 全部drawImage調(diào)用完畢后再調(diào)用draw()
if (obj.downNum == imagesArr.length){
ctx.draw()
}
}
})
}
個(gè)性名片.
個(gè)性名片其實(shí)就是對(duì)畫(huà)布的一個(gè)綜合整體的運(yùn)用，同樣的技巧你也可以用來(lái)制作海報(bào)什么的。還是說(shuō)一下思路，首先我們也是創(chuàng)建畫(huà)布，然后給它添加一個(gè)貼切你主題的背景圖，添加背景圖最需要注意的還是獲取圖片的尺寸防止其變形。背景添加了我們就需要給它添加展示的內(nèi)容了，添加文字添加圖片等等。這里說(shuō)一下怎么給圖片切圓角，首先我們需要用canvas畫(huà)一個(gè)圓，然后再對(duì)其進(jìn)行裁剪，因?yàn)橐坏┘羟辛四硞€(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)。
onLoad: function () {
var that = this;
var ctx = wx.createCanvasContext('myCanvas')
// 先保存狀態(tài) 已便于畫(huà)完圓再用
ctx.save();
// 開(kāi)始繪制
ctx.beginPath();
//先畫(huà)個(gè)圓
ctx.arc(100, 100, 100, 0, Math.PI * 2, false);
// 畫(huà)了圓 再剪切 原始畫(huà)布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)
ctx.clip();
ctx.drawImage('圖片的地址', 0, 0, '圖片寬度', '圖片高度');
//恢復(fù)之前保存的繪圖上下文 恢復(fù)之前保存的繪圖上下午即狀態(tài) 可以 繼續(xù)繪制
ctx.restore();
ctx.draw();
}
})
最后還有很多的細(xì)節(jié)沒(méi)有講到大家如果還有疑點(diǎn)可以看看這個(gè)demo這是我寫(xiě)的一個(gè)簡(jiǎn)單處理圖片的一個(gè)小程序
demo:
由于本人也是小程序小白，有什么地方說(shuō)的不對(duì)的還請(qǐng)海涵。
