<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .dv { height: 100px; width: 20px; border: 1px solid #ccc; } .dv #inp { height: 100%; width: 100%; opacity: 0; } .yulan { position: absolute; top: 0; left: 0; display: none; } </style> <body> <div class="cun"></div> <div class="dv">添加 <input type="file" name="" id="inp" value=""> </div> <div class="yulan"></div> <canvas id="myCanvas"></canvas> <script> var dv = document.querySelector(".dv"); var inp = document.getElementById("inp"); var cun = document.querySelector(‘.cun‘); var yulan = document.querySelector(".yulan"); inp.onchange = function(e) { console.log(e) let file_length = e.target.files.length; //选中图片的个数 for(let i = 0; i < file_length; i++) { let file = e.target.files[i]; let filereader = new FileReader(); //创建FileReader对象 filereader.readAsDataURL(file); //对选中的图片进行base64编码 let img = document.createElement("img"); //创建一个img标签来放选中的图片（使用new Image()也可以） filereader.onload = function() { //当FileReader对象加载完成在执行 img.src = filereader.result; //result是FileReader对象中图片的地址信息 img.onload = function() { //因为异步加载原因，当选中的图片加载完成，开始使用canvas画水印，如果没有这一步，canvas.toDataURL（）方法有可能装换不了base64图片 var w = ""; //canvas 未定义宽高，使用选中图片的宽高，方便定义水印的大小 var h = ""; var quality = ""; // 默认图片质量为0.7 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); if(img.width <= 3000 && img.width > 1000) { //对选中图片的大小做出判断 w = img.width / 3; h = img.height / 3; quality = 0.5; canvas.height = h; canvas.width = w; ctx.drawImage(img, 0, 0, w, h); //在画布上绘制图像并定义图像的位置 ctx.font = "1em microsoft yahei"; //水印的字体 ctx.fillStyle = "red"; //水印的颜色 ctx.fillText(‘哈哈哈哈‘, 10, h - 100); //水印的内容和水印的位置 ctx.fillText(‘我来了‘, 10, h - 60); ctx.fillText(‘水印怎么样‘, 10, h - 20); } else { w = img.width; h = img.height; quality = 1.0; canvas.height = h; canvas.width = w; ctx.drawImage(img, 0, 0, w, h); ctx.font = "1em microsoft yahei"; ctx.fillStyle = "green"; ctx.fillText(‘我来了‘, 10, h - 50); ctx.fillText(‘哈哈哈‘, 10, h - 30); ctx.fillText(‘水印怎么样‘, 10, h - 10); } img.width = 100; img.height = 100; var dataUrl = canvas.toDataURL("image/png") //通过方法把图片转成base64 let img1 = document.createElement("img"); //新创建一个img标签来存放加完水印的图片 img1.width = 100; img1.height = 100; img1.src = dataUrl; canvas.style.display = "none"; //canvas中的图片会在下面显示，这里加载完成直接隐藏掉就好，隐藏前可以注释此代码，查看加完水印的效果图 cun.appendChild(img1); //把带水印的图片放进div里 //以下是点击预览水印图片 img1.onload = function() { //水印图片加载完成执行 this.addEventListener("click", function() { //监听该图片的点击事件 var img2 = document.createElement(‘img‘); //创建要预览的img标签 img2.src = this.src; // 赋值该图片的src yulan.style.display = ‘block‘; //使隐藏的预览盒子显示 yulan.innerHTML = ""; //先清空盒子，否则会出现图片累计 yulan.appendChild(img2); //把预览的图片装进盒子 }) yulan.onclick = function() { this.style.display = ‘none‘; //点击预览的大图，使其隐藏 } } } } } } </script> </body> </html>
原文：https://www.cnblogs.com/chen527/p/11673251.html