网页截图方案总结2.0
之前总结了一些前端截图方案，其中有一个是手动调用canvas的api进行绘制，多次使用之后发现每次都要写很复杂的代码，所以就把主要逻辑封装了一下，改成了通过json配置文字和图片内容，虽然网上已经有一些了，但是都比较臃肿，有很多功能用不到，这里实现的是最轻量的。
// 兼容低版本浏览器
if (typeof Object.assign != 'function') {
Object.assign = function (target) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
target = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source != null) {
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
}
return target;
};
}
// 通过配置实现canvas绘制图片，callback可以拿到base64的图片
function drawCanvas(canvas, data, callback, callbackError) {
var defaultData = {
width: 750,
height: 10,
lineHeight: 1.5,
color: '#263238',
textAlign: 'left',
fontSize: 14,
fontFamily: '"PingFang SC",tahoma,arial,"helvetica neue","hiragino sans gb","microsoft yahei",sans-serif',
autoHeight: false,
};
var ctx = canvas.getContext('2d');
var newData = Object.assign({}, defaultData, data);
var currentY = 0,
loadElementLength = 0,
loadImgLength = 0,
elementLength = 0,
imgElementLength = 0;
// 设置canvas宽高
canvas.width = newData.width;
canvas.height = 2000;
ctx.fillStyle = newData.bgColor || '#fff';
ctx.fillRect(0, 0, newData.width, 2000);
// 指定宽高内绘制图片（background-size:cover方式）
var drawImgCover = function (img, contW, contH, startX, startY) {
if (img.width / img.height >= contW / contH) {
var dH = img.height;
var dW = Math.ceil(contW / contH * dH);
ctx.drawImage(img, (img.width - dW) / 2, 0, dW, img.height, startX, startY, contW, contH);
} else {
var dW = img.width;
var dH = Math.ceil(contH / contW * dW);
ctx.drawImage(img, 0, (img.height - dH) / 2, img.width, dH, startX, startY, contW, contH);
}
};
// 自动换行
var canvasTextAutoLine = function (str, initX, initY, width, height, lineHeight) {
var lineWidth = 0;
var lastSubStrIndex = 0;
var strLen = str.length;
for (var i = 0; i < strLen; i++) {
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > width) {
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
initY += lineHeight;
console.log(initY, height);
if (newData.autoHeight && initY >= height) {
currentY += lineHeight;
}
lineWidth = ctx.measureText(str[i]).width;
lastSubStrIndex = i;
}
if (i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
}
}
};
// 绘制圆角并裁剪
var drawRoundedRect = function (x, y, width, height, r) {
ctx.save();
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + width, y, x + width, y + r, r);
ctx.arcTo(x + width, y + height, x + width - r, y + height, r);
ctx.arcTo(x, y + height, x, y + height - r, r);
ctx.arcTo(x, y, x + r, y, r);
ctx.closePath();
ctx.clip();
};
// 居中写字
var centerText = function (str, startY) {
var textW = ctx.measureText(str).width;
var x = (newData.width - textW) / 2;
ctx.fillText(str, x, startY);
};
// 居中图片
var centerImg = function (img, startY) {
var w = img.width;
var x = (newData.width - w) / 2;
ctx.drawImage(img, x, startY);
};
// 最大长度
var ellipsis = function (str, maxWidth) {
var strLen = str.length;
for (var i = 0; i < strLen; i++) {
if (ctx.measureText(str.substr(0, i + 1)).width > maxWidth) {
return `${str.substr(0, i)}...`;
}
}
return str;
};
// 导出
var output = function () {
// 获取可变部分图像
var contW = newData.width,
contH = newData.height;
if (newData.autoHeight) {
contH += currentY;
}
console.log(contH, currentY);
var main = ctx.getImageData(0, 0, contW, contH);
// 重新建空画布
canvas.width = contW;
canvas.height = contH;
ctx.clearRect(0, 0, contW, 2000); //清空
// 绘制可变部分图像
ctx.putImageData(main, 0, 0);
// 导出图片url
var dataUrl = canvas.toDataURL('image/png', 1);
setTimeout(function () {
callback && callback(dataUrl);
}, 100);
};
var checkOutput = function () {
loadElementLength++;
if (loadElementLength === elementLength) {
output();
}
};
// 加载图片
loadImage = function (imgArr, callback) {
imgArr.forEach(function (item) {
if (!item) return;
var Img = new Image();
Img.crossOrigin = "anonymous";
Img.src = item.content;
Img.onload = function () {
item.imgObj = this;
loadImgLength++;
if (loadImgLength === imgElementLength) {
callback && callback();
};
}
Img.onerror = function (err) {
callbackError && callbackError(err);
return false;
};
});
};
// 一个字一个字绘制
drawTextArr = function (contentArr, x, y, w, lineHeight, color, fontSize, fontfamily) {
if (!contentArr || !contentArr.length) return;
var lineWidth = 0;
var initX = x;
var initY = y;
contentArr.forEach(function (item) {
ctx.fillStyle = item.color || color;
var font = (item.fontSize || fontSize) + 'px ' + (item.fontfamily || fontfamily);
if (item.bold) {
font = item.bold + ' ' + ctx.font;
}
ctx.font = font;
var strtxt = item.content;
for (let i = 0; i < strtxt.length; i++) {
lineWidth += ctx.measureText(strtxt[i]).width;
if (lineWidth > w) {
initY += lineHeight;
if (newData.autoHeight) {
currentY += lineHeight;
}
lineWidth = ctx.measureText(strtxt[i]).width;
}
ctx.fillText(strtxt[i], initX + lineWidth - ctx.measureText(strtxt[i]).width, initY);
}
});
};
// 绘制图片
var drawImage = function (element) {
var x = element.x || 0,
y = element.y || 0,
w = element.width || 0,
h = element.height || 0;
if (currentY !== 0) {
y += currentY;
}
var Img = element.imgObj;
ctx.save();
if (element.autoHeight) {
var newH = Img.height * (w / Img.width);
if (newData.autoHeight) {
currentY += newH - h;
}
h = newH;
}
ctx.drawImage(Img, x, y, w, h);
ctx.restore();
if (element.r > 0) {
drawRoundedRect(x, y, w, h, element.r);
}
checkOutput();
};
// 绘制文本
var drawText = function (element) {
var fontfamily = element.fontfamily || newData.fontFamily,
fontSize = element.fontSize || newData.fontSize,
cont = element.content,
w = element.width || 0,
h = element.height || 0,
x = element.x || 0,
y = element.y || 0,
color = element.color || newData.color,
font = fontSize + 'px ' + fontfamily,
lh = element.lineHeight || newData.lineHeight;
var lineHeight = lh * fontSize;
if (element.bold) {
font = element.bold + ' ' + font;
}
if (currentY !== 0) {
y += currentY;
}
if (element.maxWidth) {
cont = ellipsis(cont, element.maxWidth);
}
y += fontSize + (lineHeight - fontSize) / 4;
ctx.beginPath();
ctx.fillStyle = color;
ctx.font = font;
if (typeof cont !== 'string') {
drawTextArr(cont, x, y, w, lineHeight, color, fontSize, fontfamily);
} else if (element.textAlign === 'center') {
centerText(cont, y);
} else if (element.autoHeight) {
canvasTextAutoLine(cont, x, y, w, y + h, lineHeight);
} else {
ctx.fillText(cont, x, y);
ctx.fill();
}
ctx.closePath();
checkOutput();
};
if (newData.elements && newData.elements.length) {
elementLength = newData.elements.length;
var imgArr = newData.elements.map(function (item) {
if (item.type === 'img') {
imgElementLength++;
return item;
}
});
loadImage(imgArr, function () {
newData.elements.forEach(function (item, index) {
if (item.type === 'img') {
item.imgObj = imgArr[index].imgObj;
drawImage(item);
} else {
drawText(item);
}
});
});
}
}
使用
function drawShare(canvas, data, callback, callbackError) {
var newData = {
width: 686,
height: 954,
color: '#263238',
bgColor: '#fff',
autoHeight: true,
elements: [
{
type: 'img',
x: 0,
y: 0,
width: 686,
height: 514,
autoHeight: true,
content: data.pic,
},
{
type: 'text',
width: 622,
height: 72,
x: 32,
y: 546,
fontSize: 48,
bold: 500,
autoHeight: true,
content: data.title,
},
{
type: 'text',
width: 622,
height: 112,
x: 32,
y: 634,
color: '#3C5A6E',
fontSize: 32,
autoHeight: true,
lineHeight: 1.75,
content: data.info,
},
{
type: 'img',
x: 32,
y: 776,
width: 622,
height: 2,
content: 'images/achievement/draw-share-line.png',
},
{
type: 'img',
x: 24,
y: 802,
width: 128,
height: 128,
content: data.qrcode,
},
{
type: 'text',
x: 176,
y: 814,
color: '#3C5A6E',
fontSize: 24,
content: '长按或扫描二维码',
},
{
type: 'text',
x: 176,
y: 850,
color: '#3C5A6E',
fontSize: 24,
content: '查看公益项目',
},
{
type: 'img',
x: 176,
y: 894,
width: 269,
height: 36,
content: 'images/achievement/draw-share-logo.png',
},
{
type: 'img',
x: 476,
y: 780,
width: 208,
height: 176,
content: 'images/achievement/draw-share-flower.png',
},
],
};
drawCanvas(canvas, newData, callback, callbackError);
}
