前端水印圖片及文字js教程

時間 2019-12-09

原文原文鏈接

前端水印圖片文字教程以下，複製代碼修改圖片地址便可看到效果，工做中遇到總結的，喜歡就關注下哦：html

<!DOCTYPE html>
<html>前端

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="referrer" content="never">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<script src="//topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/js/common/jquery.js"></script>jquery

<title></title>canvas

</head>跨域

<body>ui

<div id="imgBox" align="center"></div>spa

<script>scala

//shuiyin
var data1 = ['./bg.png', './person_rule.png']; //[背景圖，二維碼]
var c = document.createElement('canvas'),htm

ctx = c.getContext('2d'),
len = data1.length;
c.width = 360; //背景圖寬
c.height = 600; //背景圖高
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = 'transparent'; //畫布填充顏色
ctx.fill();教程

function drawing(n) {
if(n < len) {
var img = new Image;
img.crossOrigin = 'Anonymous'; //解決跨域
img.src = data1[n];
img.onload = function() {
if(n == 1) {
//繪製水印圖片
ctx.drawImage(img, 14, 510, 80, 80);
// 繪製水印文字
ctx.font = "16px microsoft yahei";
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillText('這裏是水印文字', 104, 540);
ctx.fillText("長按識別二維碼，當即領取", 104, 570);

} else {
ctx.drawImage(img, 0, 0, c.width, c.height);
}
drawing(n + 1); //遞歸
}
} else {
//保存生成做品圖片
convertCanvasToImage(c);
// Canvas2Image.saveAsJPEG(c); //保存到電腦
}
}
drawing(0);
//}
function convertCanvasToImage(canvas) {
var hc_image = new Image();
hc_image.src = canvas.toDataURL("image/png");
$('#imgBox').html(hc_image);
}
//end

</script>