我正在使用compressor.js进行图像压缩和水印。然而，对我来说，似乎只有基于文本的水印是可能的。我也想将图像( Logo )添加到水印中。
知道如何使用compressor.js使用图像作为水印吗？
最佳答案
您可以使用 drew function 来执行此操作，像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/compressorjs/1.0.7/compressor.min.js"></script>
</head>
<body>
<img id="watermark" src="watermark.png" style="display: none" />
<h3>Input</h3>
<div id="input"><img id="image" src="picture.png" style="max-width:250px"></div>
<h3>Output</h3>
<div id="output"></div>
<script>
window.addEventListener('DOMContentLoaded', function () {
var Compressor = window.Compressor;
var URL = window.URL || window.webkitURL;
var image = document.getElementById('image');
var output = document.getElementById('output');
var watermark = document.getElementById('watermark');
var xhr = new XMLHttpRequest();
xhr.onload = function () {
new Compressor(xhr.response, {
strict: false,
drew: function (context, canvas) {
context.drawImage(
watermark,
0,
0,
watermark.width,
watermark.height,
canvas.width - ((watermark.width / 4) + 10),
canvas.height - ((watermark.height / 4) + 10),
(watermark.width / 4),
(watermark.height / 4))
},
success: function (result) {
var newImage = new Image();
newImage.src = URL.createObjectURL(result);
newImage.style = "max-width:250px";
output.appendChild(newImage);
},
error: function (err) {
window.alert(err.message);
},
});
};
xhr.open('GET', image.src);
xhr.responseType = 'blob';
xhr.send();
});
</script>
</body>
</html>
所有除以4是因为我的水印图像很大。这不是必需的。
这是之前/之后的屏幕截图:
替代方法
这是向图像添加水印的另一种方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<img id="watermark" src="https://upload.wikimedia.org/wikipedia/en/7/71/Corona_Extra.svg" style="display: none" />
<img id="image" src="https://images.unsplash.com/photo-1665606855702-144fd49af552?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80%20870w" style="display:none">
<canvas id="output"></canvas>
<script>
var imagesLoaded = 0;
var main = document.getElementById("image");
var watermark = document.getElementById("watermark");
function imageHasLoaded() {
imagesLoaded++;
if (imagesLoaded == 2) {
var c = document.getElementById("output");
var ctx = c.getContext("2d");
c.width = main.width;
c.height = main.height;
ctx.drawImage(main,
0, 0,
main.width, main.height,
0, 0,
main.width, main.height);
ctx.drawImage(watermark,
0, 0,
watermark.width, watermark.height,
(main.width - watermark.width) / 2, (main.height - watermark.height),
watermark.width, watermark.height);
}
}
main.load = imageHasLoaded();
watermark.load = imageHasLoaded();
</script>
</body>
</html>
关于javascript - 使用compressor.js使用图像作为水印，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68744118/