class waterMarkHelper {
|
|
// 绘制水印(图片)
|
static addImage(origin_img_url, watermart_img_url, finish_cb) {
|
|
const canvas = document.createElement('canvas')
|
const ctx = canvas.getContext('2d')
|
|
//原图片
|
var img_origin = new Image()
|
img_origin.setAttribute("crossOrigin", 'anonymous');
|
img_origin.src = origin_img_url;
|
// img_origin.crossOrigin = 'anonymous';
|
|
|
//水印图片
|
if (watermart_img_url == null)
|
watermart_img_url = "static/img/watermark/default.png"
|
var img_watermark = new Image()
|
img_watermark.setAttribute("crossOrigin", 'anonymous');
|
img_watermark.src = watermart_img_url;
|
// img_watermark.crossOrigin = 'anonymous';
|
|
var that = this;
|
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.drawImage(img_origin, 0, 0)
|
|
//console.log("origin_image",origin_image_width,origin_image_height,watermark_image_width,watermark_image_height);
|
//ctx.drawImage(img_watermark, origin_image_width / 2, origin_image_height / 2, watermark_image_width / 3, watermark_image_height / 3)
|
|
// if (finish_cb != null) {// 将绘制完成的canvas转换为base64的地址
|
// const base64Url = canvas.toDataURL()
|
// //console.log(base64Url)
|
// finish_cb(base64Url)
|
//}
|
|
|
|
|
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()
|
// console.log(base64Url)
|
finish_cb(base64Url)
|
}
|
}
|
};
|
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)
|
|
}
|
|
|
|
|
};
|
//计算一列的位置(等比例)
|
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, 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 = function() {
|
// 创建canvas，并将创建的img绘制成canvas
|
canvas.width = img_origin.width
|
canvas.height = img_origin.height
|
|
ctx.drawImage(img_origin, 0, 0)
|
|
|
|
ctx.textAlign = 'left';
|
ctx.textBaseline = 'middle';
|
ctx.font = '18px Microsoft Yahei';
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
|
ctx.globalAlpha = 0.3;
|
ctx.rotate((Math.PI / 180) * 15)
|
|
|
ctx.fillText(content, img_origin.width - textX, img_origin.height - textY)
|
|
|
|
if (finish_cb != null) { // 将绘制完成的canvas转换为base64的地址
|
const base64Url = canvas.toDataURL()
|
//console.log(base64Url)
|
finish_cb(base64Url)
|
}
|
}
|
|
};
|
}
|
|
export default waterMarkHelper
|
