html填充图片画布,javascript – 将水印添加到已有图像的画布 – HTML5,Canvas

我有相机视频输入和画布.

当用户单击“提交”时,画布将获取Feed的图像

Submit

用户点击“提交”后,可以单击“共享”上传图片.

我希望能够在用户通过单击“共享”按钮提交第一个快照之前在图像顶部覆盖另一个png.

JS用于上传pic：

function uploadEx() {

var canvas = document.getElementById("canvas");

var dataURL = canvas.toDataURL("image/png");

document.getElementById('hidden_data').value = dataURL;

var fd = new FormData(document.forms["form1"]);

var xhr = new XMLHttpRequest();

xhr.open('POST', 'uploadscript.php', true);

xhr.upload.onprogress = function(e) {

if (e.lengthComputable) {

var percentComplete = (e.loaded / e.total) * 100;

console.log(percentComplete + '% uploaded');

alert('Image uploaded');

}

};

xhr.onload = function() {

};

xhr.send(fd);

};

如何在上传时将第二张图像叠加在顶部(如水印)？