如题
默认情况下，canvas在视网膜屏幕下写出的字体会有模糊问题，本方法已适配，完整代码如下：
/**
* 生产水印，并返回水印URL地址，已适配视网膜屏幕下字体模糊问题
* @param {*} text 水印文字
* @param {*} el 要设置水印的目标元素，默认 document.body
* @param {*} config 配置项
* @returns {String} 水印URL地址
*/
function makeWatermark(text, el, config) {
// 所有支持的配置项
var defaultConfig = {
width: 260,
height: 200,
font: '14px Microsoft Yahei',
color: '#ddd',
opacity: 0.5,
rotate: -30,
x: 0,
y: 0,
};
// base64转blob
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
len = bstr.length,
u8arr = new Uint8Array(len);
while (len--) u8arr[len] = bstr.charCodeAt(len);
return new Blob([u8arr], {type: mime});
}
const ratio = window.devicePixelRatio || 1;
config = Object.assign({}, defaultConfig, config);
const { width, height, font, color, opacity, rotate, x } = config;
const y = config.y || (width - 50) * ratio;
el = el || window.document.body;
const canvas = document.createElement('canvas');
canvas.width = width * ratio;
canvas.height = height * ratio;
const ctx = canvas.getContext('2d');
ctx.font = font.replace(/(\d+)px/g, (m, $1) => $1 * ratio + 'px');
ctx.fillStyle = color;
ctx.globalAlpha = opacity;
// ctx.translate(ctx.width / 2, ctx.height / 2);
ctx.rotate(rotate * Math.PI / 180);
ctx.fillText(text, x, y);
var base64 = canvas.toDataURL('image/png');
var blob = dataURLtoBlob(base64);
var url = URL.createObjectURL(blob);
el.style.backgroundImage = `url(${url})`;
el.style.backgroundSize = `${width}px ${height}px`;
return url;
}
makeWatermark('小茗同学很帅！');
最简单使用：makeWatermark('小茗同学')，效果：
