写个给图片加水印的方法

• 都用Canvas的方案解决

• 情况一：水印是图片（两张图片canvas.drawImage两次重叠即可）

<input type="file" id="uploadFile" class="clip" accept="image/*"><label class="ui-button ui-button-primary" for="uploadFile">选择图片</label><img id="imgCover" src="./watermark.png" class="clip"><p id="imgUploadX"></p>

var eleUploadFile = document.getElementById('uploadFile');var eleImgCover = document.getElementById('imgCover');var eleImgUploadX = document.getElementById('imgUploadX');if (history.pushState) {    eleUploadFile.addEventListener('change', function (event) {        var reader = new FileReader();        var file = event.target.files[0] || event.dataTransfer.files[0];        reader.onload = function (e) { var base64 = e.target.result; if (base64.length > 1024 * 500) {     alert('图片尺寸请小于500K');     return; } else {     // 使用canvas合成图片，并base64化     imgTogether(base64, function (url) {         // 尺寸         var size = 180 / (window.devicePixelRatio || 1);         // 预览         eleImgUploadX.innerHTML = '<img src="' + url + '" width="' + size + '" height="' + size + '">';     }); }        };        reader.readAsDataURL(file);    });    // canvas图片合成    var imgTogether = function (url, callback) {        var canvas = document.createElement('canvas');        var size = 180;        canvas.width = size;        canvas.height = size;        var context = canvas.getContext('2d');        // 这是上传图像        var imgUpload = new Image();        imgUpload.onload = function () { // 绘制 context.drawImage(imgUpload, 0, 0, size, size, 0, 0, size, size); // 再次绘制 context.drawImage(eleImgCover, 0, 0, size, size, 0, 0, size, size); // 回调 callback(canvas.toDataURL('image/png'));        };        imgUpload.src = url;    };    } else if (eleImgUploadX) {    eleImgUploadX.className = 'remind';    eleImgUploadX.innerHTML = '本演示IE10+下才有效果';}

• 情况二：水印是纯文字

#wrap {    display: inline-block;}

<div id="wrap">    <img src="http://placekitten.com/600/600" id="xxx" /></div><script src="js/app.js"></script>

(function () {    // canvas 实现 watermark    function __canvasWM({        // 使用 ES6 的函数默认值方式设置参数的默认取值        // 具体参见 https://developer.mozilla.org/zh-CN/docs/Web/Javascript/Reference/Functions/Default_parameters        container = document.body,        image,        width = '200px',        height = '150px',        textAlign = 'center',        textbaseline = 'middle',        font = "20px microsoft yahei",        fillStyle = 'rgba(184, 184, 184, 0.8)',        content = '请勿外传',        rotate = '30',        zIndex = 1000    } = {}) {        var args = arguments[0];        var canvas = document.createElement('canvas');        canvas.setAttribute('width', image.width);        canvas.setAttribute('height', image.height);        var ctx = canvas.getContext("2d");        ctx.textAlign = textAlign;        ctx.textbaseline = textbaseline;        ctx.font = font;        ctx.fillStyle = fillStyle;        ctx.rotate(Math.PI / 180 * rotate);        ctx.fillText(content, parseFloat(image.width) / 2, parseFloat(image.height) / 2);        var base64Url = canvas.toDataURL();        const watermarkDiv = document.createElement("div");        watermarkDiv.setAttribute('style', `        position:absolute;        top:0;        left:0;        width:100%;        height:100%;        z-index:${zIndex};        pointer-events:none;        background-repeat:repeat;        background-image:url('${base64Url}')`);        container.style.position = 'relative';        container.insertBefore(watermarkDiv, container.firstChild);    }    window.__canvasWM = __canvasWM;})();let imgEl = document.querySelector('#xxx');imgEl.onload = function() {    __canvasWM({        container: document.querySelector('#wrap'),        image: imgEl,        content: 'fuck'    })}