canvas合成图片水印

最新推荐文章于 2024-12-15 14:27:55 发布

usp1994

最新推荐文章于 2024-12-15 14:27:55 发布

阅读量376

点赞数

文章标签： canva可画 javascript

本文链接：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/131761496

版权

当我们需要在图片上添加水印时，可以使用Canvas来实现。下面是一个使用Canvas添加图片水印的示例代码：

简介

在本篇文章中，我们将介绍如何使用Canvas来给图片添加水印。通过使用HTML5的Canvas元素和JavaScript，我们可以轻松地在图片上添加自定义的水印。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="../button.css">
	<style>
		.clip {
			position: absolute;
			clip: rect(0 0 0 0);
		}
	</style>
</head>
<body>
<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>
</body>
<script>
	
	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;
				// 使用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+下才有效果';
	}
</script>
</html>