使用canvas給圖片添加水印

css部分

.clip {
        position: absolute;
        clip: rect(0 0 0 0);
    }

html部分

<input type="file" id="uploadFile" class="clip" accept="image/*">
    <label class="ui-button ui-button-primary" for="uploadFile">選擇圖片</label>
    <img id="imgCover" src="./images/googlelogo_color_272x92dp.png" class="clip">
    <p id="imgUploadX"></p>

js部分

var eleUploadFile = document.getElementById('uploadFile');
    var eleImgCover = document.getElementById('imgCover');
    var eleImgUploadX = document.getElementById('imgUploadX');

    eleUploadFile.addEventListener('change', function(event) {
        var file = event.target.files[0] || event.target.dataTransfer.files[0];

        var reader = new FileReader();

        reader.onload = function(e) {
            var base64 = e.target.result;

            // canvas壓縮圖片，而且回調顯示
            imgTogether(base64, function(url) {
                eleImgUploadX.innerHTML = '<img src="' + url + '"/>';
            })
        }
        reader.readAsDataURL(file);
    });

    var imgTogether = function(url, callback) {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');

        // image實例對象
        var imageUpload = new Image();
        imageUpload.onload = function() {
            console.log('imageUpload', imageUpload);
            canvas.width = imageUpload.width;
            canvas.height = imageUpload.height;
            // canvas繪製圖片
            context.drawImage(imageUpload, 0, 0);
            // 繪製水印
             context.drawImage(eleImgCover, 0, 0);
            // 回調
            callback(canvas.toDataURL('image/jpeg'));
        }
        imageUpload.src = url;
    }