160 lines
4.2 KiB
JavaScript
160 lines
4.2 KiB
JavaScript
/*
|
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
* watermark.js - Create watermarked images with Canvas and JS
|
|
*
|
|
* Version: 1 (2011-04-04)
|
|
* Copyright (c) 2011 Patrick Wied ( http://www.patrick-wied.at )
|
|
* This code is licensed under the terms of the MIT LICENSE
|
|
*
|
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
*/
|
|
|
|
(function(w){
|
|
var wm = (function(w){
|
|
var doc = w.document,
|
|
gcanvas = {},
|
|
gctx = {},
|
|
imgQueue = [],
|
|
className = "watermark",
|
|
watermark = false,
|
|
watermarkPosition = "bottom-right",
|
|
watermarkPath = "watermark.png?"+(+(new Date())),
|
|
opacity = (255/(100/50)), // 50%
|
|
initCanvas = function(){
|
|
gcanvas = doc.createElement("canvas");
|
|
gcanvas.style.cssText = "display:none;";
|
|
gctx = gcanvas.getContext("2d");
|
|
doc.body.appendChild(gcanvas);
|
|
},
|
|
initWatermark = function(){
|
|
watermark = new Image();
|
|
watermark.src = "";
|
|
watermark.src = watermarkPath;
|
|
|
|
if(opacity != 255){
|
|
if(!watermark.complete)
|
|
watermark.onload = function(){
|
|
applyTransparency();
|
|
}
|
|
else
|
|
applyTransparency();
|
|
|
|
|
|
}else{
|
|
applyWatermarks();
|
|
}
|
|
|
|
},
|
|
// function for applying transparency to the watermark
|
|
applyTransparency = function(){
|
|
var w = watermark.width || watermark.offsetWidth,
|
|
h = watermark.height || watermark.offsetHeight;
|
|
setCanvasSize(w, h);
|
|
gctx.drawImage(watermark, 0, 0);
|
|
|
|
var image = gctx.getImageData(0, 0, w, h);
|
|
var imageData = image.data,
|
|
length = imageData.length;
|
|
for(var i=3; i < length; i+=4){
|
|
imageData[i] = (imageData[i]<opacity)?imageData[i]:opacity;
|
|
}
|
|
image.data = imageData;
|
|
gctx.putImageData(image, 0, 0);
|
|
watermark.onload = null;
|
|
watermark.src = "";
|
|
watermark.src = gcanvas.toDataURL();
|
|
// assign img attributes to the transparent watermark
|
|
// because browsers recalculation doesn't work as fast as needed
|
|
watermark.width = w;
|
|
watermark.height = h;
|
|
|
|
applyWatermarks();
|
|
},
|
|
configure = function(config){
|
|
if(config["watermark"])
|
|
watermark = config["watermark"];
|
|
if(config["path"])
|
|
watermarkPath = config["path"];
|
|
if(config["position"])
|
|
watermarkPosition = config["position"];
|
|
if(config["opacity"])
|
|
opacity = (255/(100/config["opacity"]));
|
|
if(config["className"])
|
|
className = config["className"];
|
|
|
|
initCanvas();
|
|
initWatermark();
|
|
}
|
|
setCanvasSize = function(w, h){
|
|
gcanvas.width = w;
|
|
gcanvas.height = h;
|
|
},
|
|
applyWatermark = function(img){
|
|
/*
|
|
var f = image.height / image.width;
|
|
var newHeight = canvas.width * f;
|
|
|
|
*/
|
|
var proporcion = ( img.height / img.width );
|
|
var ancho = 600;
|
|
//var alto_orginal = img.height;
|
|
//var alto = (alto_original * proporcion);
|
|
//alert("hola pro"+alto);
|
|
gcanvas.width = ancho;// || img.offsetWidth;
|
|
//gcanvas.width = img.width || img.offsetWidth;
|
|
//gcanvas.height = img.height || img.offsetHeight;
|
|
gcanvas.height = (gcanvas.width * proporcion);// || img.offsetHeight;
|
|
gctx.drawImage(img, 0, 0,ancho,gcanvas.height);
|
|
var position = watermarkPosition,
|
|
x = 0,
|
|
y = 0;
|
|
if(position.indexOf("top")!=-1)
|
|
y = 20;
|
|
else if(position.indexOf("middle")!=-1)
|
|
y = (gcanvas.height -watermark.height)/2;
|
|
else
|
|
y = gcanvas.height-watermark.height-20;
|
|
|
|
if(position.indexOf("left")!=-1)
|
|
x = 20;
|
|
else if(position.indexOf("center")!=-1)
|
|
x = (gcanvas.width - watermark.width) /2;
|
|
else
|
|
x = gcanvas.width-watermark.width-20;
|
|
|
|
|
|
gctx.drawImage(watermark, x, y);
|
|
img.onload = null;
|
|
|
|
img.src = gcanvas.toDataURL();
|
|
|
|
},
|
|
applyWatermarks = function(){
|
|
setTimeout(function(){
|
|
var els = doc.getElementsByClassName(className),
|
|
len = els.length;
|
|
while(len--){
|
|
var img = els[len];
|
|
if(img.tagName.toUpperCase() != "IMG")
|
|
continue;
|
|
|
|
if(!img.complete){
|
|
img.onload = function(){
|
|
applyWatermark(this);
|
|
};
|
|
}else{
|
|
applyWatermark(img);
|
|
}
|
|
}
|
|
},10);
|
|
};
|
|
|
|
|
|
return {
|
|
init: function(config){
|
|
configure(config);
|
|
}
|
|
};
|
|
})(w);
|
|
w.wmark = wm;
|
|
})(window); |