公司需求：小程序上傳圖片，添加文字水印
完成經(jīng)過：一堆坑
1.官方文檔
官方文檔地址如下：
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
小程序有兩種canvas寫法止潮，可不要搞混了
2.獲取圖片寬高
小程序添加文字旅赢，需要使用canvas重新繪制canvas圖片，需要設(shè)定寬高洲押。
wx.getImageInfo獲取原始圖片寬高
getInfo() {
wx.getImageInfo({
src: this.data.url,
success(res) {
console.log(res.path)//可以獲取圖片路徑，圖片長寬等信息
}
})
}
3.不能使用線上url圆凰，只能使用本地臨時圖片路徑
使用canvas的時候杈帐，如果是線上url會報(bào)錯，必須使用臨時圖片路徑(tempUrl)，
格式如下：
http://tmp/dLBG6wXVqhdBca99922121344e8d69bad5aa34f404ea.png
獲取辦法：
使用wx.getImageInfo方法挑童，無論src是臨時圖片路徑還是線上url累铅，都返回臨時圖片路徑
4.canvas基本用法
<!-- type有兩種，必須寫-->
<canvas type="2d" id="myCanvas"></canvas>
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.fillRect(0, 0, 100, 100)
})
5.canvas轉(zhuǎn)為圖片
transferCanvasToImage(canvas) {
const that = this;
wx.canvasToTempFilePath({
canvas: canvas,
success(res) {
console.log('canvas分享圖片地址', res.tempFilePath)
var src = res.tempFilePath
that.setData({
src
})
}
})
},
6.隱藏canvas不顯示
公司需求：隱藏掉canvas不顯示站叼，但是可以使用娃兽。
結(jié)果：不能用使用wx:if和display:none，我沒有找到好的辦法尽楔，最后只能在外面加一層
<view>
<view wx:if="{{canvasImg}}">
<image src="{{canvasImg}}" mode="widthFix" style="width:750rpx"></image>
</view>
<view style='width:0rpx;height:0rpx;overflow:hidden;'>
<canvas id='canvasId' type="2d" style="position:fixed;left:9999px"></canvas>
</view>
</view>
7.demo核心代碼
<view>
<view wx:if="{{canvasImg}}">
<image src="{{canvasImg}}" mode="widthFix" style="width:750rpx"></image>
</view>
<view style='width:0rpx;height:0rpx;overflow:hidden;'>
<canvas id='canvasId' type="2d" style="position:fixed;left:9999px"></canvas>
</view>
</view>
Page({
data: {
img: 'https://inews.gtimg.com/newsapp_bt/0/15084535902/1000',
canvasImg: '',//生成的canvasImg
canvasId: 'canvasId',
},
onLoad() {
this.getCanvas()
},
getCanvas() {
var mycenter = 0 //文字左右居中顯示
var myheight = 0 //文字高度
const that = this
const query = wx.createSelectorQuery();
query.select('#' + this.data.canvasId).fields({ node: true, size: true }).exec((res) => {
console.log(res)
const canvas = res[0].node;
const ctx = canvas.getContext('2d')
new Promise(function (resolve) {
// 繪制背景圖片
wx.getImageInfo({
src: that.data.img, //網(wǎng)絡(luò)圖片,如果不行請換一個
success(res) {
console.log(res)
var width = res.width
var height = res.height
mycenter = width / 2
myheight = height
canvas.width = width
canvas.height = height
const img = canvas.createImage();
img.src = res.path;
img.onload = () => {
ctx.drawImage(img, 0, 0, width, height);
resolve(true);
}
}
})
}).then(() => {
ctx.font = "500 32px Arial";
ctx.textAlign = 'center'
ctx.fillStyle = 'white';
ctx.fillText('adakfjlkawdjfklasjfklasjf', mycenter, myheight - 50)
}).then(function () {
that.transferCanvasToImage(canvas)
}).catch((err) => { })
})
},
//canvas轉(zhuǎn)為圖片
transferCanvasToImage(canvas) {
const that = this;
wx.canvasToTempFilePath({
canvas: canvas,
success(res) {
that.setData({
canvasImg: res.tempFilePath
})
console.log(that.data.canvasImg)
}
})
},
})
參考資料：
1.官方文檔
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
