class waterMarkHelper {
|
/**
|
* @description 绘制水印(图片)
|
*/
|
static addImage(
|
origin_img_url,
|
watermark_img_url,
|
finish_cb,
|
textOptions = null
|
) {
|
if (origin_img_url == null || origin_img_url == "") return;
|
const canvas = document.createElement("canvas");
|
const ctx = canvas.getContext("2d");
|
|
//原图片
|
var img_origin = new Image();
|
img_origin.src = origin_img_url;
|
img_origin.crossOrigin = "anonymous";
|
|
//水印图片
|
if (watermark_img_url == null)
|
watermark_img_url = "./static/img/watermark.png";
|
var img_watermark = new Image();
|
img_watermark.src = watermark_img_url;
|
|
var that = this;
|
img_origin.onerror = function () {
|
img_origin.style.display = "none";
|
return;
|
};
|
img_origin.onload = function () {
|
// 创建canvas，并将创建的img绘制成canvas
|
var origin_image_width = img_origin.width;
|
var origin_image_height = img_origin.height;
|
|
var watermark_image_width = img_watermark.width;
|
var watermark_image_height = img_watermark.height;
|
|
canvas.width = origin_image_width;
|
canvas.height = origin_image_height;
|
ctx.scale(1, 1);
|
ctx.drawImage(img_origin, 0, 0);
|
if (textOptions != null) {
|
let fontSize = 20; //字体大小默认48
|
if (origin_image_width > 500) {
|
fontSize = 24;
|
}
|
if (origin_image_width > 1000) {
|
fontSize = 36;
|
}
|
if (origin_image_width > 2000) {
|
fontSize = 48;
|
}
|
let textX = 0;
|
let textY = 0;
|
|
ctx.textAlign = "center";
|
ctx.textBaseline = "middle";
|
ctx.font = `${fontSize}px yahei sans-serif`;
|
ctx.fillStyle = "#000000";
|
let textWidth = ctx.measureText(textOptions.content).width;
|
if (textOptions.position == "center") {
|
// 向右偏三个字体大小的位置
|
textX = origin_image_width / 2 + fontSize * 3;
|
// 向下移动1.5个字体大小的位置
|
textY = fontSize * 1.5;
|
}
|
if (textOptions.position == "right") {
|
ctx.textAlign = "right";
|
// 向右偏三个字体大小的位置
|
textX = origin_image_width - fontSize * 3 ;
|
// 向下移动1.5个字体大小的位置
|
textY = fontSize * 1.5;
|
}
|
ctx.fillText(textOptions.content, textX, textY);
|
}
|
|
if (origin_image_width > watermark_image_width * 5) {
|
//3列
|
var waterMark_width2 = origin_image_width / 5.0;
|
var waterMark_ratio = waterMark_width2 / watermark_image_width;
|
var space = waterMark_width2 * 0.5;
|
var x_posi1 = space;
|
var x_posi2 = space + waterMark_width2 + space;
|
var x_posi3 =
|
space + waterMark_width2 + space + waterMark_width2 + space;
|
|
//console.log("3333");
|
|
that.DrawOneColumnLogo(
|
ctx,
|
origin_image_height,
|
x_posi1,
|
img_watermark,
|
watermark_image_width,
|
watermark_image_height,
|
waterMark_ratio
|
);
|
|
that.DrawOneColumnLogo(
|
ctx,
|
origin_image_height,
|
x_posi2,
|
img_watermark,
|
watermark_image_width,
|
watermark_image_height,
|
waterMark_ratio
|
);
|
|
that.DrawOneColumnLogo(
|
ctx,
|
origin_image_height,
|
x_posi3,
|
img_watermark,
|
watermark_image_width,
|
watermark_image_height,
|
waterMark_ratio
|
);
|
} else if (origin_image_width > watermark_image_width * 3.5) {
|
//两列
|
var waterMark_width2 = origin_image_width / 3.5;
|
|
var waterMark_ratio = waterMark_width2 / watermark_image_width;
|
|
var space = waterMark_width2 * 0.5;
|
var x_posi1 = space;
|
var x_posi2 = space + waterMark_width2 + space;
|
|
//console.log("2222");
|
|
that.DrawOneColumnLogo(
|
ctx,
|
origin_image_height,
|
x_posi1,
|
img_watermark,
|
watermark_image_width,
|
watermark_image_height,
|
waterMark_ratio
|
);
|
|
that.DrawOneColumnLogo(
|
ctx,
|
origin_image_height,
|
x_posi2,
|
img_watermark,
|
watermark_image_width,
|
watermark_image_height,
|
waterMark_ratio
|
);
|
} else {
|
//一列
|
//console.log(origin_image_width,watermark_image_width,"1111");
|
|
var waterMark_width2 = origin_image_width / 2.0;
|
|
var waterMark_ratio = waterMark_width2 / watermark_image_width;
|
|
var left_posi = origin_image_width / 2 - waterMark_width2 / 2;
|
|
that.DrawOneColumnLogo(
|
ctx,
|
origin_image_height,
|
left_posi,
|
img_watermark,
|
watermark_image_width,
|
watermark_image_height,
|
waterMark_ratio
|
);
|
}
|
|
if (finish_cb != null) {
|
// 将绘制完成的canvas转换为base64的地址
|
const base64Url = canvas.toDataURL("image/jpge", 0.5);
|
//console.log(base64Url)
|
finish_cb(base64Url);
|
canvas.remove();
|
}
|
};
|
}
|
/**
|
* @description
|
*/
|
static DrawOneColumnLogo(
|
ctx,
|
origin_image_height,
|
left_posi,
|
img_watermark,
|
watermark_image_width,
|
watermark_image_height,
|
waterMark_ratio
|
) {
|
var list_y = this.CalcOneColumnLogoPosi(
|
origin_image_height,
|
watermark_image_height,
|
waterMark_ratio
|
);
|
//console.log(list_y)
|
for (var i = 0; i < list_y.length; i++) {
|
var top_posi = list_y[i];
|
|
//var rect_2 = new RectangleF(left_posi, top_posi, watermark_image_width * waterMark_ratio, watermark_image_height * waterMark_ratio);
|
|
//gh.DrawImage(img_watermark, rect_2);
|
//console.log(left_posi,top_posi,watermark_image_width * waterMark_ratio,watermark_image_height * waterMark_ratio)
|
ctx.drawImage(
|
img_watermark,
|
left_posi,
|
top_posi,
|
watermark_image_width * waterMark_ratio,
|
watermark_image_height * waterMark_ratio
|
);
|
}
|
}
|
/**
|
* @description 计算一列的位置(等比例)
|
*/
|
static CalcOneColumnLogoPosi(
|
image_height,
|
waterMark_origin_height,
|
waterMark_ratio
|
) {
|
var space_height = 100;
|
var top = 100;
|
var bottom = 100;
|
var watermark_image_height = waterMark_ratio * waterMark_origin_height;
|
if (watermark_image_height > 250) {
|
space_height = watermark_image_height * 1.5;
|
top = watermark_image_height * 0.2;
|
bottom = image_height - watermark_image_height * 1.2;
|
} else {
|
space_height = watermark_image_height * 1.8;
|
top = watermark_image_height * 0.5;
|
bottom = image_height - watermark_image_height * 1.5;
|
}
|
|
var num = (bottom - top) / space_height + 1;
|
if (num <= 1) {
|
space_height = watermark_image_height * 1.2;
|
top = watermark_image_height * 0.2;
|
bottom = image_height - watermark_image_height - 5;
|
} else if (num == 2) {
|
space_height = watermark_image_height * 1.3;
|
top = watermark_image_height * 0.3;
|
bottom = image_height - watermark_image_height - 5;
|
}
|
if (num > 5) {
|
//每列最多5个
|
var space = (image_height - watermark_image_height * 5) / 6;
|
var posi = [];
|
for (var i = 0; i < 6; i++) {
|
var top_posi = space + (watermark_image_height + space) * i;
|
if (top_posi > image_height - watermark_image_height) return posi;
|
|
posi.push(top_posi);
|
}
|
return posi;
|
} else {
|
var posi = [];
|
for (var i = 0; i < 100; i++) {
|
var top_posi = top + space_height * i;
|
if (top_posi > bottom) return posi;
|
|
posi.push(top_posi);
|
}
|
return posi;
|
}
|
}
|
|
// 绘制水印(文字)
|
static addCorpText(origin_img_url, content, position = "center", finish_cb) {
|
// 创建所需要添加水印的img图片
|
const canvas = document.createElement("canvas");
|
const ctx = canvas.getContext("2d");
|
|
const img_origin = new Image();
|
img_origin.src = origin_img_url;
|
img_origin.crossOrigin = "anonymous";
|
img_origin.onload = () => {
|
let fontSize = 48; //字体大小默认十八
|
|
let textX = 0;
|
let textY = 0;
|
|
// 创建canvas，并将创建的img绘制成canvas
|
canvas.width = img_origin.width;
|
canvas.height = img_origin.height;
|
|
ctx.drawImage(img_origin, 0, 0);
|
|
ctx.textAlign = "center";
|
ctx.textBaseline = "middle";
|
ctx.font = `${fontSize}px 宋体`;
|
ctx.fillStyle = "#000000";
|
// ctx.globalAlpha = 0.3;
|
// ctx.rotate((Math.PI / 180) * 15);
|
|
if (position == "center") {
|
textX = img_origin.width / 2;
|
textY = fontSize;
|
}
|
ctx.fillText(content, textX, textY);
|
|
if (finish_cb != null) {
|
// 将绘制完成的canvas转换为base64的地址
|
const base64Url = canvas.toDataURL("image/png", 0.8);
|
finish_cb(base64Url);
|
}
|
};
|
}
|
}
|
|
export default waterMarkHelper;
|
