javascript给图片添加水印背景:
<script src="../js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
watermark("settings", "");
//watermarkWord("settings");
})
/**
* settings
* 图片id
* zoom滚动百分比
* */
function watermark(settings, zoom) {
var top = 0;
var left = 0;
var ele = document.getElementById(settings);
while (ele) {
top += ele.offsetTop;
left += ele.offsetLeft;
ele = ele.offsetParent;
}
//默认设置
var defaultSettings = {
watermark_txt: "admin",
watermark_x: left,//水印起始位置x轴坐标
watermark_y: top,//水印起始位置Y轴坐标
watermark_rows: 20,//水印行数
watermark_cols: 20,//水印列数
watermark_x_space: 110,//水印x轴间隔
watermark_y_space: 110,//水印y轴间隔
watermark_color: '#aaa',//水印字体颜色
watermark_alpha: 0.4,//水印透明度
watermark_fontsize: '40px',//水印字体大小
watermark_font: '微软雅黑',//水印字体
watermark_width: 210,//水印宽度
watermark_height: 80,//水印长度
watermark_angle: 45//水印倾斜度数
};
//采用配置项替换默认值,作用类似jquery.extend
if (arguments.length === 1 && typeof arguments[0] === "object") {
var src = arguments[0] || {};
for (key in src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
continue;
else if (src[key])
defaultSettings[key] = src[key];
}
}
var oTemp = document.createDocumentFragment();
var widt = $("#" + settings).width();
var heigh = $("#" + settings).height();
if (zoom > 0) {
widt = widt * zoom / 100;
heigh = heigh * zoom / 100;
}
//获取页面最大宽度
var page_width = Math.max(widt, widt);
var cutWidth = page_width * 0.0150;
var page_width = page_width - cutWidth;
//获取页面最大高度
var page_height = Math.max(heigh, heigh)//;
// var page_height = document.body.scrollHeight+document.body.scrollTop;
//如果将水印列数设置为0,或水印列数设置过大,超过页面最大宽度,则重新计算水印列数和水印x轴间隔
if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
if ((defaultSettings.watermark_cols - 1) != 0) {
defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
} else {
defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols));
}
}
//如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔
if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
if ((defaultSettings.watermark_rows - 1) != 0) {
defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
} else {
defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows));
}
}
var x;
var y;
if (document.getElementsByClassName("mask_div")) {
$(".mask_div").remove();
}
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
if (x == "NaN") {
x = defaultSettings.watermark_x;
}
var mask_div = document.createElement('div');
mask_div.id = 'mask_div' + i + j;
mask_div.className = 'mask_div';
mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
//设置水印div倾斜显示
mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.visibility = "";
mask_div.style.position = "absolute";
mask_div.style.left = x + 'px';
mask_div.style.top = y + 'px';
mask_div.style.overflow = "hidden";
mask_div.style.zIndex = "9999";
mask_div.style.pointerEvents = 'none';//pointer-events:none 让水印不遮挡页面的点击事件
//mask_div.style.border="solid #eee 1px";
mask_div.style.opacity = defaultSettings.watermark_alpha;
mask_div.style.fontSize = defaultSettings.watermark_fontsize;
mask_div.style.fontFamily = defaultSettings.watermark_font;
mask_div.style.color = defaultSettings.watermark_color;
mask_div.style.textAlign = "center";
mask_div.style.width = defaultSettings.watermark_width + 'px';
mask_div.style.height = defaultSettings.watermark_height + 'px';
mask_div.style.display = "block";
mask_div.style.zIndex
oTemp.appendChild(mask_div);
}
;
}
;
document.body.appendChild(oTemp);
}
/**
* 图片滚动
* */
function bbimg(o) {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom > 0) o.style.zoom = zoom + '%';
watermark("settings", zoom);
return false;
}
</script>
html代码:
<img src="../img/9ff6410a-ac67-4d1f-82d9-d2b5d33d4d48.jpg" ID="settings" onmousewheel="bbimg(this)">
未加背景时:
加背景之后
html5画布添加水印方式
Javascript代码:
<script type="text/javascript">
var img = new Image();
img.src = '../img/9ff6410a-ac67-4d1f-82d9-d2b5d33d4d48.jpg';
// 加载完成开始绘制
img.οnlοad=function(){
var text="飞哥出品,必属精品"
var fontsize=20;
//准备canvas环境
var canvas=document.getElementById("myCanvas");
canvas.width=img.width;
canvas.height=img.height;
var ctx=canvas.getContext("2d");
// 绘制图片
ctx.drawImage(img,0,0);
// 绘制水印
ctx.font="20px microsoft yahei";
//ctx.fillStyle = "rgba(255,255,255,0.5)";
var x=img.width-text.length*fontsize;
var y=img.height-fontsize;
ctx.fillStyle = "red";
ctx.fillText(text,x,y);
y-=fontsize;
ctx.fillText("sdfscsd",x,y);
}
</script>
html代码:
<canvas id='myCanvas' ></canvas>
java方式:使用流来对图片进行操作(对源文件进行修改):
import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
public class imagepr {
// 水印透明度
private static float alpha = 1f;
private static int fontSize=16;//字体大小
// 水印横向位置
private static int positionWidth = 0;//定义而已
// 水印纵向位置
private static int positionHeight = 0;//定义而已
// 水印文字字体
private static Font font = new Font("宋体", Font.BOLD, fontSize);
// 水印文字颜色
private static Color color = Color.red;
/**
*
* @param alpha
* 水印透明度
* @param positionWidth
* 水印横向位置
* @param positionHeight
* 水印纵向位置
* @param font
* 水印文字字体
* @param color
* 水印文字颜色
*/
public static void setImageMarkOptions(float alpha, int positionWidth,
int positionHeight, Font font, Color color) {
if (alpha != 0.0f)
imagepr.alpha = alpha;
if (positionWidth != 0)
imagepr.positionWidth = positionWidth;
if (positionHeight != 0)
imagepr.positionHeight = positionHeight;
if (font != null)
imagepr.font = font;
if (color != null)
imagepr.color = color;
}
/**
* 给图片添加水印图片
*
* @param iconPath
* 水印图片路径
* @param srcImgPath
* 源图片路径
* @param targerPath
* 目标图片路径
*/
public static void markImageByIcon(String iconPath, String srcImgPath,
String targerPath) {
markImageByIcon(iconPath, srcImgPath, targerPath, null);
}
/**
* 给图片添加水印图片、可设置水印图片旋转角度
*
* @param iconPath
* 水印图片路径
* @param srcImgPath
* 源图片路径
* @param targerPath
* 目标图片路径
* @param degree
* 水印图片旋转角度
*/
public static void markImageByIcon(String iconPath, String srcImgPath,
String targerPath, Integer degree) {
OutputStream os = null;
try {
Image srcImg = ImageIO.read(new File(srcImgPath));
BufferedImage buffImg = new BufferedImage(srcImg.getWidth(null),
srcImg.getHeight(null), BufferedImage.TYPE_INT_RGB);
// 1、得到画笔对象
Graphics2D g = buffImg.createGraphics();
// 2、设置对线段的锯齿状边缘处理
g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g.drawImage(
srcImg.getScaledInstance(srcImg.getWidth(null),
srcImg.getHeight(null), Image.SCALE_SMOOTH), 0, 0,
null);
// 3、设置水印旋转
if (null != degree) {
g.rotate(Math.toRadians(degree),
(double) buffImg.getWidth() / 2,
(double) buffImg.getHeight() / 2);
}
// 4、水印图片的路径 水印图片一般为gif或者png的,这样可设置透明度
ImageIcon imgIcon = new ImageIcon(iconPath);
// 5、得到Image对象。
Image img = imgIcon.getImage();
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
alpha));
// 6、水印图片的位置
g.drawImage(img, positionWidth, positionHeight, null);
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER));
// 7、释放资源
g.dispose();
// 8、生成图片
os = new FileOutputStream(targerPath);
ImageIO.write(buffImg, "JPG", os);
System.out.println("图片完成添加水印图片");
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (null != os)
os.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
/**
* 给图片添加水印文字
*
* @param logoText
* 水印文字
* @param srcImgPath
* 源图片路径
* @param targerPath
* 目标图片路径
*/
public static void markImageByText(String logoText, String srcImgPath,
String targerPath) {
markImageByText(logoText, srcImgPath, targerPath, null);
}
/**
* 给图片添加水印文字、可设置水印文字的旋转角度
*
* @param logoText
* @param srcImgPath
* @param targerPath
* @param degree
*/
public static void markImageByText(String logoText, String srcImgPath,
String targerPath, Integer degree) {
InputStream is = null;
OutputStream os = null;
try {
// 1、源图片
Image srcImg = ImageIO.read(new File(srcImgPath));
BufferedImage buffImg = new BufferedImage(srcImg.getWidth(null),
srcImg.getHeight(null), BufferedImage.TYPE_INT_RGB);
// 2、得到画笔对象
Graphics2D g = buffImg.createGraphics();
// 3、设置对线段的锯齿状边缘处理
g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g.drawImage(
srcImg.getScaledInstance(srcImg.getWidth(null),
srcImg.getHeight(null), Image.SCALE_SMOOTH), 0, 0,
null);
// 4、设置水印旋转
if (null != degree) {
g.rotate(Math.toRadians(degree),
(double) buffImg.getWidth() / 2,
(double) buffImg.getHeight() / 2);
}
// 5、设置水印文字颜色
g.setColor(color);
// 6、设置水印文字Font
g.setFont(font);
// 7、设置水印文字透明度
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
alpha));
// 8、第一参数->设置的内容,后面两个参数->文字在图片上的坐标位置(x,y)
System.out.println(logoText.length()+1);
positionWidth= srcImg.getWidth(null)-(logoText.length()+1)*fontSize;
positionHeight=srcImg.getHeight(null)-fontSize;
g.drawString(logoText, positionWidth, positionHeight);
// 9、释放资源
g.dispose();
// 10、生成图片
os = new FileOutputStream(targerPath);
ImageIO.write(buffImg, "JPG", os);
System.out.println("图片完成添加水印文字");
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (null != is)
is.close();
} catch (Exception e) {
e.printStackTrace();
}
try {
if (null != os)
os.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
public static void main(String[] args) {
String srcImgPath = "D:\\ASUS\\Pictures\\9ff6410a-ac67-4d1f-82d9-d2b5d33d4d48.jpg";
String logoText = "飞哥出品,必属精品";
String iconPath = "d:/2.jpg";
String targerTextPath = "D:\\ASUS\\Pictures\\9ff6410a-ac67-4d1f-82d9-d2b5d33d4d49.jpg";
// String targerTextPath2 = "";
// String targerIconPath = "d:/qie_icon.jpg";
// String targerIconPath2 = "d:/qie_icon_rotate.jpg";
System.out.println("给图片添加水印文字开始...");
// 给图片添加水印文字
markImageByText(logoText, srcImgPath, targerTextPath);
// 给图片添加水印文字,水印文字旋转-45
// markImageByText(logoText, srcImgPath, targerTextPath2, -45);
System.out.println("给图片添加水印文字结束...");
/* System.out.println("给图片添加水印图片开始...");
setImageMarkOptions(0.3f, 1, 1, null, null);
// 给图片添加水印图片
markImageByIcon(iconPath, srcImgPath, targerIconPath);
// 给图片添加水印图片,水印图片旋转-45
markImageByIcon(iconPath, srcImgPath, targerIconPath2, -45);
System.out.println("给图片添加水印图片结束...");*/
}
}
虽然大部分源于网络,但是经过本人的测试和优化。毛笔字写的一般般,莫喷。