0
319
ViewsUsar imagen como marca de agua con compressor.js
Estoy usando compressor.js para compresión de imágenes y marcas de agua. Sin embargo, solo me parece posible una marca de agua basada en texto. También quiero agregar una imagen (logotipo) a la marca de agua.
¿Alguna idea de cómo usar la imagen como marca de agua con compressor.js?
·
Juan Pablo Isaza
1 answers
Answer question0
Puede hacer esto usando lafunción de dibujo , así:
<!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>Toda la división por 4 se debe a que mi imagen de marca de agua es enorme. Eso no es necesario.
Aquí hay una captura de pantalla del antes/después:
·
Juan Pablo Isaza
Report
Answer question