概述

微信小程序--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) {

this.ctx.setLineDash([10, 10]);

this.ctx.setLineWidth(2);

this.ctx.setStrokeStyle('red');

this.ctx.lineDashOffset = 10;

if (this.type === 'text') {

const textWidth = this.ctx.measureText(this.text).width;

const textHeight = this.fontSize + 10

const halfWidth = textWidth / 2;

const halfHeight = textHeight / 2;

const textX = this.x - halfWidth;

const textY = this.y - halfHeight;

this.ctx.strokeRect(textX, textY, textWidth, textHeight);

this.ctx.drawImage('./icon/close.png', textX - 15, textY - 15, 30, 30);

this.ctx.drawImage('./icon/scale.png', textX + textWidth - 15, textY + textHeight - 15, 30, 30);

} else {

this.ctx.strokeRect(this.x, this.y, this.w, this.h);

this.ctx.drawImage('./icon/close.png', this.x - 15, this.y - 15, 30, 30);

this.ctx.drawImage('./icon/scale.png', this.x + this.w - 15, this.y + this.h - 15, 30, 30);

}

}

this.ctx.restore();

},

/**

     * 判断点击的坐标落在哪个区域

     * @param {*} x 点击的坐标

     * @param {*} y 点击的坐标

     */

isInGraph(x, y) {

const selectW = this.type === 'text' ? this.ctx.measureText(this.text).width : this.w;

const selectH = this.type === 'text' ? this.fontSize + 10 : this.h;

// 删除区域左上角的坐标和区域的高度宽度

const delW = 30;

const delH = 30;

const delX = this.type === 'text' ? this.x - (selectW / 2) : this.x;

const delY = this.type === 'text' ? this.y - (selectH / 2) : this.y;

// 旋转后的删除区域坐标

const transformDelX = this._getTransform(delX, delY, this.rotate - this._getAngle(this.centerX, this.centerY, delX, delY)).x - (delW / 2);

const transformDelY = this._getTransform(delX, delY, this.rotate - this._getAngle(this.centerX, this.centerY, delX, delY)).y - (delH / 2);

// 变换区域左上角的坐标和区域的高度宽度

const scaleW = 30;

const scaleH = 30;

const scaleX = this.type === 'text' ? this.x + (selectW / 2) : this.x + selectW;

const scaleY = this.type === 'text' ? this.y + (selectH / 2) : this.y + selectH;

// 旋转后的变换区域坐标

const transformScaleX = this._getTransform(scaleX, scaleY, this.rotate + this._getAngle(this.centerX, this.centerY, scaleX, scaleY)).x - (scaleW / 2);

const transformScaleY = this._getTransform(scaleX, scaleY, this.rotate + this._getAngle(this.centerX, this.centerY, scaleX, scaleY)).y - (scaleH / 2);

const moveX = this.type === 'text' ? this.x - (selectW / 2) : this.x;

const moveY = this.type === 'text' ? this.y - (selectH / 2) : this.y;

// 测试使用

// this.ctx.setLineWidth(1);

// this.ctx.setStrokeStyle('red');

// this.ctx.strokeRect(transformDelX, transformDelY, delW, delH);

// this.ctx.setLineWidth(1);

// this.ctx.setStrokeStyle('black');

// this.ctx.strokeRect(transformScaleX, transformScaleY, scaleW, scaleH);

if (x - transformScaleX >= 0 && y - transformScaleY >= 0 &&

transformScaleX + scaleW - x >= 0 && transformScaleY + scaleH - y >= 0) {

// 缩放区域

return 'transform';

} else if (x - transformDelX >= 0 && y - transformDelY >= 0 &&

transformDelX + delW - x >= 0 && transformDelY + delH - y >= 0) {

// 删除区域

return 'del';

} else if (x - moveX >= 0 && y - moveY >= 0 &&

moveX + selectW - x >= 0 && moveY + selectH - y >= 0) {

// 移动区域

return 'move';

}

// 不在选择区域里面

return false;

},

/**

     * 两点求角度

     * @param {*} px1

     * @param {*} py1

     * @param {*} px2

     * @param {*} py2

     */

_getAngle(px1, py1, px2, py2) {

const x = px2 - px1;

const y = py2 - py1;

const hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));

//斜边长度

const cos = x / hypotenuse;

const radian = Math.acos(cos);

const angle = 180 / (Math.PI / radian);

return angle;

},

/**

     * 点选择一定角度之后的坐标

     * @param {*} x

     * @param {*} y

     * @param {*} rotate 旋转的角度

     */

_getTransform(x, y, rotate) {

const angle = (Math.PI / 180) * (rotate);

const r = Math.sqrt(Math.pow((x - this.centerX), 2) + Math.pow((y - this.centerY), 2));

const a = Math.sin(angle) * r;

const b = Math.cos(angle) * r;

return {

x: this.centerX + b,

y: this.centerY + a,

};

},

/**

     *

     * @param {*} px 手指按下去的坐标

     * @param {*} py 手指按下去的坐标

     * @param {*} x 手指移动到的坐标

     * @param {*} y 手指移动到的坐标

     * @param {*} currentGraph 当前图层的信息

     */

transform(px, py, x, y, currentGraph) {

// 获取选择区域的宽度高度

if (this.type === 'text') {

this.ctx.setFontSize(this.fontSize);

}

const centerX = this.type === 'text' ? this.x : this.x + (this.w / 2);

const centerY = this.type === 'text' ? this.y : this.y + (this.h / 2);

const diffXBefore = px - centerX;

const diffYBefore = py - centerY;

const diffXAfter = x - centerX;

const diffYAfter = y - centerY;

const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180;

const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180;

// 旋转的角度

this.rotate = currentGraph.rotate + angleAfter - angleBefore;

const lineA = Math.sqrt(Math.pow((centerX - px), 2) + Math.pow((centerY - py), 2));

const lineB = Math.sqrt(Math.pow((centerX - x), 2) + Math.pow((centerY - y), 2));

if (this.type === 'image') {

const w = currentGraph.w + (lineB - lineA);

const h = currentGraph.h + (lineB - lineA);

this.w = w <= this.MIN_WIDTH ? this.MIN_WIDTH : w;

this.h = h <= this.MIN_WIDTH ? this.MIN_WIDTH : h;

if (w > this.MIN_WIDTH && h > this.MIN_WIDTH) {

// 放大 或 缩小

this.x = currentGraph.x - (lineB - lineA) / 2;

this.y = currentGraph.y - (lineB - lineA) / 2;

}

} else if (this.type === 'text') {

const fontSize = currentGraph.fontSize * ((lineB - lineA) / lineA + 1);

this.fontSize = fontSize <= this.MIN_FONTSIZE ? this.MIN_FONTSIZE : fontSize;

}

},

/**

     * 画圆角矩形

     */

_drawRadiusRect(x, y, w, h, r) {

const br = r / 2;

this.ctx.beginPath();

this.ctx.moveTo(this.toPx(x + br), this.toPx(y));    // 移动到左上角的点

this.ctx.lineTo(this.toPx(x + w - br), this.toPx(y));

this.ctx.arcTo(this.toPx(x + w), this.toPx(y), this.toPx(x + w), this.toPx(y + br), this.toPx(br));

this.ctx.lineTo(this.toPx(x + w), this.toPx(y + h - br));

this.ctx.arcTo(this.toPx(x + w), this.toPx(y + h), this.toPx(x + w - br), this.toPx(y + h), this.toPx(br));

this.ctx.lineTo(this.toPx(x + br), this.toPx(y + h));

this.ctx.arcTo(this.toPx(x), this.toPx(y + h), this.toPx(x), this.toPx(y + h - br), this.toPx(br));

this.ctx.lineTo(this.toPx(x), this.toPx(y + br));

this.ctx.arcTo(this.toPx(x), this.toPx(y), this.toPx(x + br), this.toPx(y), this.toPx(br));

},

toPx(rpx) {

return rpx * this.factor;

},

}

Component({

/**

     * 组件的属性列表

     */

properties: {

graph: {

type: Object,

value: {},

observer: 'onGraphChange',

},

bgColor: {

type: String,

value: '',

},

bgImage: {

type: String,

value: '',

},

width: {

type: Number,

value: 750,

},

height: {

type: Number,

value: 750,

},

},

/**

     * 组件的初始数据

     */

data: {

},

attached() {

const sysInfo = wx.getSystemInfoSync();

const screenWidth = sysInfo.screenWidth;

this.factor = screenWidth / 750;

if (typeof this.drawArr === 'undefined') {

this.drawArr = [];

}

this.ctx = wx.createCanvasContext('canvas-label', this);

this.draw();

},

/**

     * 组件的方法列表

     */

methods: {

toPx(rpx) {

return rpx * this.factor;

},

onGraphChange(n, o) {

if (JSON.stringify(n) === '{}') return;

this.drawArr.push(new dragGraph(Object.assign({

x: 30,

y: 30,

}, n), this.ctx, this.factor));

this.draw();

},

draw() {

if (this.data.bgImage !== '') {

this.ctx.drawImage(this.data.bgImage, 0, 0, this.toPx(this.data.width), this.toPx(this.data.height));

}

if (this.data.bgColor !== '') {

this.ctx.save();

this.ctx.setFillStyle(this.data.bgColor);

this.ctx.fillRect(0, 0, this.toPx(this.data.width), this.toPx(this.data.height));

this.ctx.restore();

}

this.drawArr.forEach((item) => {

item.paint();

});

return new Promise((resolve) => {

this.ctx.draw(false, () => {

resolve();

});

});

},

start(e) {

const { x, y } = e.touches[0];

this.tempGraphArr = [];

this.drawArr && this.drawArr.forEach((item, index) => {

item.selected = false;

const action = item.isInGraph(x, y);

if (action) {

if (action === 'del') {

this.drawArr.splice(index, 1);

this.ctx.clearRect(0, 0, this.toPx(this.data.width), this.toPx(this.data.height));

this.ctx.draw();

} else if (action === 'transform' || action === 'move') {

item.action = action;

this.tempGraphArr.push(item);

// 保存点击时的坐标

this.currentTouch = { x, y };

}

}

});

// 保存点击时元素的信息

if (this.tempGraphArr.length > 0) {

const lastIndex = this.tempGraphArr.length - 1;

this.tempGraphArr[lastIndex].selected = true;

this.currentGraph = Object.assign({}, this.tempGraphArr[lastIndex]);

}

this.draw();

},

move(e) {

const { x, y } = e.touches[0];

if (this.tempGraphArr && this.tempGraphArr.length > 0) {

const currentGraph = this.tempGraphArr[this.tempGraphArr.length - 1];

if (currentGraph.action === 'move') {

currentGraph.x = this.currentGraph.x + (x - this.currentTouch.x);

currentGraph.y = this.currentGraph.y + (y - this.currentTouch.y);

} else if (currentGraph.action === 'transform') {

currentGraph.transform(this.currentTouch.x, this.currentTouch.y, x, y, this.currentGraph);

}

this.draw();

}

},

end(e) {

this.tempGraphArr = [];

},

export() {

return new Promise((resolve, reject) => {

this.drawArr = this.drawArr.map((item) => {

item.selected = false;

return item;

});

this.draw().then(() => {

wx.canvasToTempFilePath({

canvasId: 'canvas-label',

success: (res) => { resolve(res.tempFilePath); },

fail: (e) => { reject(e); },

}, this);

});

})

},

changColor(color) {

const selected = this.drawArr.filter((item) => item.selected);

if (selected.length > 0) {

selected[0].color = color;

}

this.draw();

},

changeBgColor(color) {

this.data.bgImage = '';

this.data.bgColor = color;

this.draw();

},

changeBgImage(url) {

this.data.bgColor = '';

this.data.bgImage = url;

this.draw();

}

}

})

2.index.wxss代码(canvas-drag)

/* components/canvas-drag/index.wxss */

.movable-label {

margin-top: 300rpx;

width: 750rpx;

height: 400rpx;

background: #eee;

}

.movable-block {

width: 120rpx;

height: 120rpx;

background: #ccc;

}

.movable-block .image-con {

width: 100%;

height: 100%;

}

3.index.wxml代码(canvas-drag)

<!--components/canvas-drag/index.wxml-->

<canvas canvas-id='canvas-label'

disable-scroll="true"

bindtouchstart="start"

bindtouchmove="move"

bindtouchend="end"

style='width: {{width}}rpx; height: {{height}}rpx;'></canvas>

4.index.js逻辑代码(index)

a.部分的功能实现

import CanvasDrag from '../../components/canvas-drag/canvas-drag';

Page({

data: {

graph: {},

},

/**

     * 添加测试图片

     */

onAddTest() {

this.setData({

graph: {

w: 120,

h: 120,

type: 'image',

url: '../../assets/images/test.jpg',

}

});

},

/**

     * 添加图片

     */

onAddImage() {

wx.chooseImage({

success: (res) => {

this.setData({

graph: {

w: 200,

h: 200,

type: 'image',

url: res.tempFilePaths[0],

}

});

}

})

},

/**

     * 添加文本

     */

onAddText() {

this.setData({

graph: {

type: 'text',

text: 'helloworld',

}

});

},

/**

     * 导出图片

     */

onExport() {

CanvasDrag.export()

.then((filePath) => {

console.log(filePath);

wx.previewImage({

urls: [filePath]

})

})

.catch((e) => {

console.error(e);

})

},

/**

     * 改变文字颜色

     */

onChangeColor() {

CanvasDrag.changFontColor('blue');

},

/**

     * 改变背景颜色

     */

onChangeBgColor() {

CanvasDrag.changeBgColor('yellow');

},

/**

     * 改变背景照片

     */

onChangeBgImage() {

CanvasDrag.changeBgImage('../../assets/images/test.jpg');

},

})

三、案例运行效果图

四、总结与备注

暂无