jquery 如何设置图片水印文字倾斜？

[易途]

在网上找了个图片添加文字水印的案列，现在我想把文字水印添加到图片的中间或者右下倾斜，望大神解答。希望把代码写出来，写在哪里需要注意什么！谢谢




// html img
<img class="sample2" data-img2blob="../../img/nan/m103.941.11/M103 (1).jpg" alt="">

// 页面JS
<script src="../../js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="../../js/img2blob.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// default
$(".sample1").img2blob();

// with watermark
$(".sample2").img2blob({
watermark: '水印 水印 水印',
fontStyle: 'Microsoft YaHei,Arial',
fontSize: '45', // px
fontColor: 'yellow', // default 'black'
font: 40, // The x coordinate where to start painting the text
fontY: 60, // The y coordinate where to start painting the text
});

});
</script>

// img2blob.js

$.fn.img2blob = function(a) {
var b = {
watermark: '',
fontStyle: 'Arial',
fontSize: '30',
fontColor: 'black',
fontX: 10,
fontY: 50,
};
if (typeof a === 'object') {
a.watermark = (a.watermark == undefined ? b.watermark : a.watermark);
a.fontStyle = (a.fontStyle == undefined ? b.fontStyle : a.fontStyle);
a.fontSize = (a.fontSize == undefined ? b.fontSize : a.fontSize);
a.fontColor = (a.fontColor == undefined ? b.fontColor : a.fontColor);
a.fontX = (a.fontX == undefined ? b.fontX : a.fontX);
a.fontY = (a.fontY == undefined ? b.fontY : a.fontY);
} else {
a = b;
}

$(this).each(function(i, c) {
var d = $(this).data('img2blob'),
e = '.' + $(this).attr('class'),
f = new Image();
f.onload = function() {
var g = document.createElement('canvas');
g.width = f.naturalWidth;
g.height = f.naturalHeight;
var h = g.getContext('2d');
h.drawImage(f, 0, 0);
if(a.watermark != ''){
h.font = a.fontSize + 'px ' + a.fontStyle;
h.fillStyle = a.fontColor;
h.fillText(a.watermark, a.fontX, a.fontY);
}
var j = g.toDataURL('image/png'),
k = DataUriToBinary(j),
l = new Blob([k], {
type: 'image/png'
}),
m = window.URL.createObjectURL(l);
$(e).eq(i).attr('src', m);
};
f.src = d;
});

function DataUriToBinary(n) {
var o = ';base64,',
p = n.indexOf(o) + o.length,
q = n.substring(p),
r = window.atob(q),
s = r.length,
t = new Uint8Array(new ArrayBuffer(s));
for (i = 0; i < s; i++) {
t[i] = r.charCodeAt(i);
}
return t;
}

}
代码出处 https://hovertree.com/h/bjag/kfq30wnj.htm

[泡泡鱼_]

将：

h.fillText(a.watermark, a.fontX, a.fontY);

修改为：

h.translate(g.width - a.watermark.length * a.fontSize, g.height - a.fontSize);
h.rotate(-Math.PI / 4);
h.fillText(a.watermark, a.fontX, a.fontY);

如果倾斜需求需要动态设置，可仿照着给参数加多一个isRotate属性来确定是否启用；按上面修改过后，原参数fontX，fontY即转为了对倾斜文字的位置的微调

[易途]

问题已解决 谢谢。

[易途]

代码改好了，但是 急急急啊 突然发现不兼容火狐，360，搜狗等，只能在谷歌、IE11 ，怎么办啊？？？

[泡泡鱼_]

引用 2 楼 易途 的回复:

代码改好了，但是 急急急啊 突然发现不兼容火狐，360，搜狗等，只能在谷歌、IE11 ，怎么办啊？？？

360，搜狗不知道，从来不用。 但FF支持的呀，IE应该从10开始都支持呀 自己看日志打印是哪个错了，要是因为原生的atob方法不支持，自己去找个替代方法