Canvas是微信小程序中的一個(gè)原生組件，因此我們?cè)谑褂盟臅r(shí)候要特別注意微信小程序?qū)υM件的使用說明语婴。canvas這個(gè)組件其實(shí)就是一個(gè)畫布描孟，你可以在上面畫很多你用其他方式不好實(shí)現(xiàn)的內(nèi)容。下面我就將介紹一下怎么給圖片添加水印砰左，圖片的拼接画拾，怎么制作個(gè)性名片以及制作一個(gè)涂鴉的畫板。
水印.
水印的添加總的來說可以簡(jiǎn)單的分為三步來走菜职，第一步先完成一個(gè)畫布的創(chuàng)建青抛，第二步在畫板上畫出你想添加水印的圖片，第三步畫上你要添加的水印文字
創(chuàng)建畫板
<canvas style="width: {{imageWidth}}px; height: {{imageHeight}}px;" canvas-id="myCanvas"></canvas>
需要注意的是canvas-id的唯一性酬核，如果使用一個(gè)已經(jīng)出現(xiàn)過的 canvas-id蜜另，該 canvas 標(biāo)簽對(duì)應(yīng)的畫布將被隱藏并不再正常工作适室。這里我們將寬度和高度設(shè)置成動(dòng)態(tài)的，根據(jù)圖片的寬高來確定畫板寬高的比例举瑰。
然后我們需要在.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)單了此迅，說白了就是在一個(gè)畫布上咱們連續(xù)地畫幾張圖片再將它導(dǎo)出來就OK了汽畴。
創(chuàng)建畫布我就不說了，還是和上面的一樣耸序，width和height也是動(dòng)態(tài)的忍些。我們得根據(jù)獲取的圖片來動(dòng)態(tài)的計(jì)算出它的寬高，這里主要是計(jì)算它的高度坎怪，以保證我們弄出來的圖片是不會(huì)變形的罢坝。
// 這里的圖片數(shù)組可以從相冊(cè)中選取出來，也可以從上一個(gè)頁面?zhèn)鬟^來搅窿，但是要注意傳的時(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ì)象嘁酿，用來計(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ì)象，用來記錄總的高度
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ì)畫布的一個(gè)綜合整體的運(yùn)用男应，同樣的技巧你也可以用來制作海報(bào)什么的闹司。還是說一下思路，首先我們也是創(chuàng)建畫布沐飘，然后給它添加一個(gè)貼切你主題的背景圖游桩，添加背景圖最需要注意的還是獲取圖片的尺寸防止其變形。背景添加了我們就需要給它添加展示的內(nèi)容了薪铜，添加文字添加圖片等等。這里說一下怎么給圖片切圓角恩溅，首先我們需要用canvas畫一個(gè)圓隔箍，然后再對(duì)其進(jìn)行裁剪，因?yàn)橐坏┘羟辛四硞€(gè)區(qū)域脚乡，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)蜒滩。
onLoad: function () {
var that = this;
var ctx = wx.createCanvasContext('myCanvas')
// 先保存狀態(tài) 已便于畫完圓再用
ctx.save();
// 開始繪制
ctx.beginPath();
//先畫個(gè)圓
ctx.arc(100, 100, 100, 0, Math.PI * 2, false);
// 畫了圓 再剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域奶稠，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)
ctx.clip();
ctx.drawImage('圖片的地址', 0, 0, '圖片寬度', '圖片高度');
//恢復(fù)之前保存的繪圖上下文 恢復(fù)之前保存的繪圖上下午即狀態(tài) 可以 繼續(xù)繪制
ctx.restore();
ctx.draw();
}
})
最后還有很多的細(xì)節(jié)沒有講到大家如果還有疑點(diǎn)可以看看這個(gè)demo這是我寫的一個(gè)簡(jiǎn)單處理圖片的一個(gè)小程序
demo:
由于本人也是小程序小白俯艰，有什么地方說的不對(duì)的還請(qǐng)海涵。
