<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body,
html {
position: relative;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
font: 12px/1.5 Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
input[type='text'] {
width: 100%;
height: 24px;
/*-webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);*/
/*box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);*/
/*border-radius: 0.14285714rem;*/
/*border: 1px solid rgba(34, 36, 38, 0.15);*/
}
.wrap {
padding-top: 36px;
width: 800px;
margin: 0 auto;
padding-bottom: 120px;
}
.wrap:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.temp {
float: right;
width: 360px;
}
.diy {
float: left;
font-size: 0;
position: relative;
}
.diy img {
width: 360px;
max-width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="temp">
<input type="file" style="cursor: pointer;" id="file" onchange="createImg(this)" accept="image/*" />
<div style="height: 10px;"></div>
<input type="text" id="markTxt" value="请输入水印文字" />
<div style="height: 10px;"></div>
<label>字体大小：<input type="number" value="12" id="size"/></label>
<div style="height: 10px;"></div>
<label>
字体样式：
<select id="fStyle">
<option selected value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
</label>
<label>
字体粗细：
<select id="fWeight">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option selected value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
</select>
</label>
<label>字体颜色：<input type="color" id="color"/></label>
<div style="height: 10px;"></div>
<button type="button" style="cursor: pointer;" onclick="createItem()">生成水印图片</button>
<button type="button" style="cursor: pointer;margin-left: 36px;" onclick="dowload()">下载水印图片</button>
</div>
<div class="diy">
<img src="images/pic.jpg" alt="" />
</div>
</div>
<input type="hidden" id="cur" value="100,100" />
<script type="text/javascript">
var flag = false;
var flagImg = false;
var imgData = null;
function createItem() {
var canvas = document.querySelector("#canvas");
if (flag) {
var markTxt = document.querySelector("#markTxt").value;
var markSize = document.querySelector("#size").value;
var markWeight = document.querySelector("#fWeight").value;
var markStyle = document.querySelector("#fStyle").value;
var color = document.querySelector("#color").value;
var context = canvas.getContext("2d");
if (flagImg) {
imgData = context.getImageData(0, 0, canvas.width, canvas.height);
flagImg = false;
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.putImageData(imgData, 0, 0, 0, 0, canvas.width, canvas.height);
context.font = markStyle + " " + markWeight + " " + markSize + "px arial";
context.fillStyle = color;
// context.fillText(markTxt, canvas.width / 2, canvas.height - 12);
var cur = document.querySelector("#cur").value;
var mark = document.querySelector(".mark");
if (mark) {
mark.parentNode.removeChild(mark);
}
context.fillText(markTxt, cur.split(",")[0], cur.split(",")[1] + markSize);
} else {
alert("请上传图片");
}
}
function createImg(et) {
console.log(et);
var file = et.files[0];
var url = URL.createObjectURL(file);
flag = true;
flagImg = true;
init(url);
}
function init(url) {
var img = new Image();
// 解决跨域 Canvas 污染问题
// img.setAttribute("crossOrigin", "anonymous");
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.id = "canvas";
if (flag) {
canvas.style.cursor = "crosshair";
canvas.setAttribute("onclick", "cnvs_getCoordinates()");
}
if (img.width >= 360) {
canvas.width = 360;
canvas.height = (img.height * 360) / img.width;
} else {
canvas.width = img.width;
canvas.height = img.height;
}
console.log(canvas);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
if (url == "https://www.hnxaca.com/common/images/pic.jpg") {
ctx.font = "italic bold 20px arial";
ctx.fillStyle = "#f00";
var cur = document.querySelector("#cur").value;
ctx.fillText("这是一张水印图片", cur.split(",")[0], cur.split(",")[1]);
}
// ctx.drawImage(img, 0, 0);
document.querySelector(".diy").innerHTML = "";
document.querySelector(".diy").appendChild(canvas);
};
img.onerror = function(et) {
throw new Error(et);
};
img.src = url;
}
init("https://www.hnxaca.com/common/images/pic.jpg");
function dowload() {
if (flag) {
var canvas = document.querySelector("#canvas");
var url = canvas.toDataURL(); //得到图片的base64编码数据
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
} else {
alert("请在图片上右击,选择'图片另存为'");
}
}
function cnvs_getCoordinates(event) {
var et = event || window.event;
console.log(et.offsetX, et.offsetY);
var x = et.offsetX;
var y = et.offsetY;
document.querySelector("#cur").value = x + "," + y;
var markTxt = document.querySelector("#markTxt").value;
var markSize = document.querySelector("#size").value;
var markWeight = document.querySelector("#fWeight").value;
var markStyle = document.querySelector("#fStyle").value;
var color = document.querySelector("#color").value;
var div = document.querySelector(".mark");
if (!div) {
div = document.createElement("div");
div.setAttribute("class", "mark");
div.style.position = "absolute";
}
// div.innerHTML = "Coordinates: (" + et.offsetX + "," + et.offsetY + ")";
div.innerHTML = markTxt;
// object.style.font="italic small-caps bold 12px arial,sans-serif"
div.style.font = markStyle + " " + markWeight + " " + markSize + "px arial";
div.style.color = color;
div.style.left = et.offsetX + "px";
div.style.top = et.offsetY + "px";
if (!document.querySelector(".mark")) {
document.querySelector(".diy").append(div);
}
}
</script>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/liyoungs/blog/3160238