canvas制作图片

首先html：

取消
保存图片至相册




js:
**********************************获取终端大小这里是写死了在data里面**********************************
(1)
(2)

//画矩形，也是整块画布的大小，宽度是屏幕宽度，高度根据内容多少来动态设置。
drawSquare: function (ctx, height) {
let that = this;
ctx.rect(
that.data.windowWidth * 0.08,
that.data.boxPageY,
that.data.boxWidth,
height
);
ctx.setFillStyle("#fff");
ctx.fill();
},
drawFont: function (ctx, contentTitle, height) {
let that = this;
let str = that.data.contentTitle;
let firstline;
let secondline;
//一行显示14个字，超过一行时
if (str.length > 23) {
//第一行截取前14个字符
firstline = str.substring(0, 23);
//两行都显示不下
if (str.length > 46) {
secOndline= str.substr(23, 23) + "...";
} else {
//第二行取剩下的
secOndline= str.substr(23, str.length - 23);
}
} else {
//一行就能显示时候
firstline = str;
}
ctx.setFontSize(14);
ctx.setFillStyle("#000");
ctx.fillText(firstline, that.data.normalPageX, that.data.titlePageY);
if (secondline) {
ctx.setFontSize(12);
ctx.setFillStyle("#333");
ctx.fillText(
secondline,
that.data.normalPageX,
that.data.titlePageY + 17
);
}
if (that.data.specText) {
ctx.setFontSize(12);
ctx.setFillStyle("#999999");
ctx.fillText(
that.data.specText,
that.data.normalPageX,
that.data.specPageY + 18
);
}
},

(3)

//临时图片路径
getTempFile: function (url) {
wx.showLoading({
});
let that = this;
wx.downloadFile({
url: url,
success: function (res) {
// console.log("res.tempFilePath===>", res.tempFilePath)
that.setData({
goodsInfoImg: res.tempFilePath
});
//继续生成商品的小程序码
that.downloadSkuQrCode(that.data.qrCode);
},
fail: function (err) { }
});
},

(4)

downloadSkuQrCode: function (url) {
let that = this;
wx.downloadFile({
url: url,
success: function (res) {
that.setData({
qrCode: res.tempFilePath
});
wx.hideLoading();
//生成数据
that.getuserimg(that.data.userImg);
},
fail: function (err) {
wx.showToast({
title: "下载商品码失败,稍后重试！",
icon: "none",
duration: 5000
});
}
});
},
(5)******************这是获取那个临时图片地址的*************************

//下载用户头像
getuserimg: function (url) {
let that = this;
wx.downloadFile({
url: url,
success: function (res) {
that.setData({
userImg: res.tempFilePath
});
wx.hideLoading();
//生成数据
that.createNewImg();
},
fail: function (err) {
wx.showToast({
title: "下载头像失败,稍后重试！",
icon: "none",
duration: 5000
});
}
});
},
(6)

// 根据文字多少动态计算高度，然后依次画出矩形，文字，横线和小程序码。 *****************************这里就是给画布放东西*********************************
createNewImg: function (lineNum) {
let that = this;
let ctx = wx.createCanvasContext("myCanvas");
let cOntentHeight= that.data.boxheight;
that.drawSquare(ctx, contentHeight);
that.setData({
contentHeight: contentHeight
});
//商品图片
ctx.drawImage(
that.data.goodsInfoImg,
82 - that.data.normalPageX,
that.data.boxPageY,
320,
506.52,
);
// 填充小程序码
ctx.drawImage(
that.data.qrCode,
that.data.normalPageX + that.data.windowWidth * 0.53,
that.data.codePageY,
that.data.codeWidth,
that.data.codeHeight
);
//添加用户头像
// ctx.drawImage(
// that.data.userImg,
// 50,50,50,50
// );
*******************************************************把矩形图片画圆*******************************************************
var avatarurl_width = 50; //绘制的头像宽度
var avatarurl_heigth = 50; //绘制的头像高度
var avatarurl_x = 50; //绘制的头像在画布上的位置
var avatarurl_y = 50; //绘制的头像在画布上的位置
ctx.save();
ctx.beginPath(); //开始绘制
//先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

ctx.clip();//画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因

ctx.drawImage(that.data.userImg, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片

ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制


ctx.setFontSize(12);
ctx.setFillStyle("#333");
ctx.fillText(
that.data.nickName,
120,80,
);
ctx.setFontSize(12);
ctx.setFillStyle("#333");
ctx.fillText(
that.data.data.title,
50,450,
);
ctx.draw(); //绘制到canvas
},

***************这里只要是用到的图片如url，必须是https:......png或者其他后缀的格式**************************************