<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.str {
font: normal bold 5px Arial
/*font-size: 5px*/
color: rgb(224, 226, 226,0.4)
position: absolute
padding-left: 16px
padding-top: 53px
display: none
}
.str2 {
font: normal bold 5px Arial
/* font-size: 5px*/
color: rgb(224, 226, 226,0.4)
position: absolute
padding-left: 66px
padding-top: 130px
display: none
}
</style>
</head>
<body>
<div>HOMEANGEL</div>
<div>HOMEANGEL</div>
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" style="width:100pxheight:100px" />
<div id="picture" style="width:100%margin-left: 60px">
</div>
<script>
$(function () {
var img = ["https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"]
GetCanvas(img)
})
function AddCanvas(src, ById) {
var img = new Image()
img.src = src
img.onload = function () {
imgW = img.width
imgH = img.height
//准备canvas环境
var canvas = document.getElementById(ById)
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext("2d")
// 绘制图片
ctx.drawImage(img, 0, 0, img.width, img.height)
// 绘制水印
ctx.font = "20px bold Arial"
ctx.fillStyle = "rgb(224, 226, 226,0.6)"//这里是颜色
ctx.fillText("watermark watermark", 20, 60)
ctx.fillText("watermark watermark", 120, 160)
ctx.fillText("watermark watermark", 220, 220)
//ctx.fillText("HOMEANGEL", 90, 130)
canvas.style.width = "100px"
canvas.style.height = "100px"
}
}
function GetCanvas(Strhtml) {
if (Strhtml.length >0 &&Strhtml != "") {
var html = ""
for (var i = 0i <Strhtml.lengthi++) {
var str = "sample" + (i + 1)
html += ' <canvas id=' + str + ' name="test" src=' + Strhtml[i] + ' "></canvas>'
}
$("#picture").html(html)//这里图片添加到html，然后for，添加水印
}
for (var i = 0i <Strimg.lengthi++) {
var str = "sample" + (i + 1)
var src = Strhtml[i]
AddCanvas(src, str)//id没传递
}
}
</script>
</body>
Canvas简介及实践：
canvas是HTML5新增的元素，主要作用是支持用JS画图。
一、创建Canvas元素
二、通过JavaScript来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
•1:JavaScript使用id来寻找canvas元素。
•2:创建context对象。getContext(“2d”)对象是内建的HTML5对象。
3:绘制一个红色的矩形。fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸
三、实例-图像 把一幅图像放置到画布上：
四、水印生成主流程
1、建立一个画布：
2、生成水印字符串：
3、CanvasElement.toDataURL() 方法返回一个包含图片展示的data URLs，包含了Base64过的图像信息。说明：Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. 例如：“data:image/pngbase64,R0lGODdhMAAwAPAAAAAAAP”
4、平铺在background上
第一文件修改,editor\dialog\fck_image.html,找到目录下的这个文件找到<span fckLang="DlgLnkUpload">Upload</span>其后加入
<input type="checkbox" name="C1" value="ON"><span fckLang="DlgLnkUploadwm">WaterMark</span>
<input type="radio" value="V1" checked name="R1"><span fckLang="DlgLnkUploadwmtext">Text</span>
<input type="text" name="T1" size="20">
<input type="radio" value="V2" name="R1"><span fckLang="DlgLnkUploadwmpic">Picture</span>
第二文件修改,editor\filemanager\browser\default\frmupload.html,找到目录下这个文件找到document.getElementById('eUploadMessage').innerHTML = 'Upload a new file in this folder'
换成
document.getElementById('eUploadMessage').innerHTML = 'Upload'
找到<span id="eUploadMessage">Upload a new file in this folder</span><br>
换成
<span id="eUploadMessage">Upload</span>
<input type="checkbox" name="C1" value="ON">WaterMark
<input type="radio" value="V1" checked name="R1">Text
<input type="text" name="T1" size="20">
<input type="radio" value="V2" name="R1">Picture
<br>第三文件修改处,editor\filemanager\browser\default\connectors\php\commands.php,找到这个文件找到
break
}
}
在其后加入,这里有两处,查找的时候要到最后一处的后面加入以下代码
if($_POST['C1']=="ON")
{
$watermark=1 //是否附加水印(1为加水印,其他为不加水印)
}
else
{
$watermark=2
}
if($_POST['R1']=="V1")
{
$watertype=1 //水印类型(1为文字,2为图片)
}
else
{
$watertype=2
}
if($_POST['T1']=="")
{
$waterstring= http://php.tmacn.cn//水印字符串
}
else
{
$waterstring=$_POST['T1']
}
$waterimg="lady.png" //水印图片
if($watermark==1)
{
$image_size = getimagesize($sFilePath)
$iinfo=getimagesize($sFilePath,$iinfo)
$nimage=imagecreatetruecolor($image_size[0],$image_size[1])
$white=imagecolorallocate($nimage,255,255,255)
$black=imagecolorallocate($nimage,0,0,0)
$red=imagecolorallocate($nimage,255,0,0)
imagefill($nimage,0,0,$white)
switch ($iinfo[2])
{
case 1:
$simage =imagecreatefromgif($sFilePath)
break
case 2:
$simage =imagecreatefromjpeg($sFilePath)
break
case 3:
$simage =imagecreatefrompng($sFilePath)
break
//case 6:
//$simage =imagecreatefromwbmp($sFilePath)
//break
default:
die("不支持的文件类型")
exit
}
imagecopy($nimage,$simage,0,0,0,0,$image_size[0],$image_size[1])
switch($watertype)
{
case 1: //加水印字符串
imagestring($nimage,2,3,$image_size[1]-15,$waterstring,$black)
break
case 2: //加水印图片
$simage1 =imagecreatefrompng($waterimg)
imagecopy($nimage,$simage1,10,10,0,0,163,50)
imagedestroy($simage1)
break
}
switch ($iinfo[2])
{
case 1:
imagegif($nimage, $sFilePath)
//imagejpeg($nimage, $sFilePath)
break
case 2:
imagejpeg($nimage, $sFilePath)
break
case 3:
imagepng($nimage, $sFilePath)
break
//case 6:
//imagewbmp($nimage, $sFilePath)
////imagejpeg($nimage, $sFilePath)
//break
}
//覆盖原上传文件
imagedestroy($nimage)
imagedestroy($simage)
}
将lady.png水印文件COPY到这个目录
这个图片文件到时改成自己的水印第四个修改的文件:editor\lang\en.js,找到这个文件找到
DlgLnkBtnUpload : "Send it to the Server",
其后加入
DlgLnkUploadwm : "WaterMark",
DlgLnkUploadwmtext : "Text",
DlgLnkUploadwmpic : "Picture",第五个修改的文件:editor\lang\zh-cn.js,找到这个文件找到DlgLnkBtnUpload : "发送到服务器上",其后加入
DlgLnkUploadwm : "是否加水印",
DlgLnkUploadwmtext : "文本",
DlgLnkUploadwmpic : "图片",第四和每五个文件是语言包文件,我只修改英文和简体中文,其它全清了,没怎么会用到,如果大家用其它语言,可以作相应的修改
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）