技术:微信小程序
概述
上传图片,编辑图片大小,添加文字,改变文字颜色等
详细
概述
微信小程序--canvas画布实现图片的编辑
详细
一、前期准备工作
软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
1、基本需求。
-
实现上传图片
-
实现图片编辑
-
实现添加文字
-
实现导出图片
2、案例目录结构
二、程序实现具体步骤
1.index.js代码(canvas-drag)
// components/canvas-drag/index.js const dragGraph = function ({ x, y, w, h, type, text, fontSize = 20, color = 'red', url }, canvas, factor) { if (type === 'text') { canvas.setFontSize(fontSize); const textWidth = canvas.measureText(this.text).width; const textHeight = fontSize + 10; const halfWidth = textWidth / 2; const halfHeight = textHeight / 2; this.x = x + halfWidth; this.y = y + halfHeight; } else { this.x = x; this.y = y; } this.w = w; this.h = h; this.fileUrl = url; this.text = text; this.fontSize = fontSize; this.color = color; this.ctx = canvas; this.rotate = 0; this.type = type; this.selected = true; this.factor = factor; this.MIN_WIDTH = 50; this.MIN_FONTSIZE = 10; } dragGraph.prototype = { /** * 绘制元素 */ paint() { this.ctx.save(); // TODO 剪切 // this._drawRadiusRect(0, 0, 700, 750, 300); // this.ctx.clip(); // 由于measureText获取文字宽度依赖于样式,所以如果是文字元素需要先设置样式 if (this.type === 'text') { this.ctx.setFontSize(this.fontSize); this.ctx.setTextBaseline('middle'); this.ctx.setTextAlign('center'); this.ctx.setFillStyle(this.color); } // 选择区域的中心点 this.centerX = this.type === 'text' ? this.x : this.x + (this.w / 2); this.centerY = this.type === 'text' ? this.y : this.y + (this.h / 2); // 旋转元素 this.ctx.translate(this.centerX, this.centerY); this.ctx.rotate(this.rotate * Math.PI / 180); this.ctx.translate(-this.centerX, -this.centerY); // 渲染元素 if (this.type === 'text') { this.ctx.fillText(this.text, this.x, this.y); } else if (this.type === 'image') { this.ctx.drawImage(this.fileUrl, this.x, this.y, this.w, this.h); } // 如果是选中状态,绘制选择虚线框,和缩放图标、删除图标 if (this.selected) { th