• 图片添加水印
2020-12-22 14:29:23

图片添加水印

2017年08月25日 14:25:08阅读数：347

wather('3.jpg');

//图片水印的封装

function wather($soruce,$water='2.jpg',$position=9,$alpha = 100, $type = "jpeg",$path = 'test',$isRanName = true) { //打开图片$soruceRes = open($soruce);$waterRes = open($water); //获取图片的大小 算出位置$soruceInfo = getimagesize($soruce);$waterInfo = getimagesize($water); //算出位置 switch($position)

{

case 1:

$x = 0;$y = 0;

break;

case 2:

$x = ($soruceInfo[0] - $waterInfo[0]) / 2;$y = 0;

break;

case 3:

$x =$soruceInfo[0] - $waterInfo[0];$y = 0;

break;

case 4:

$x = 0;$y = ($soruceInfo[1] -$waterInfo[1]) / 2;

break;

case 5:

$x = ($soruceInfo[0] - $waterInfo[0]) / 2;$y = ($soruceInfo[1] -$waterInfo[1]) / 2;

break;

case 6:

$x =$soruceInfo[0] - $waterInfo[0];$y = ($soruceInfo[1] -$waterInfo[1]) / 2;

break;

case 7:

$x = 0;$y = $soruceInfo[1] -$waterInfo[1];

break;

case 8:

$x = ($soruceInfo[0] - $waterInfo[0]) / 2;$y = $soruceInfo[1] -$waterInfo[1];

break;

case 9:

$x =$soruceInfo[0] - $waterInfo[0];$y = $soruceInfo[1] -$waterInfo[1];

break;

default:

$x = mt_rand(0,$soruceInfo[0] - $waterInfo[0]);$y = mt_rand(0,$soruceInfo[1] -$waterInfo[1]);

break;

}

//把x y 求出来的值供两张图片合并的时候用

imagecopymerge($soruceRes,$waterRes,$x,$y,0,0, $waterInfo[0],$waterInfo[1],$alpha);$func = 'image'.$type; //处理path路径 是否启用随机文件名 if($isRanName)

{

$name = uniqid().'.'.$type;

}else{

$pathinfo = pathinfo($soruce);

//var_dump($pathinfo);$name = $pathinfo['filename'].'.'.$type;

}

$path = rtrim($path,'/').'/'.$name;$func($soruceRes,$path);

imagedestroy($soruceRes); imagedestroy($waterRes);

}

//打开图片的函数

function open($path) { //判断文件是否存在 if(!file_exists($path))

{

exit('文件不存在');

}

$info = getimagesize($path);

//var_dump($info ); switch($info['mime'])

{

case 'image/jpeg':

case 'image/jpg':

case 'image/pjpeg':

$res = imagecreatefromjpeg($path);

break;

case 'image/png';

$res = imagecreatefrompng($path);

break;

case 'image/gif':

$res = imagecreatefromgif($path);

break;

case 'image/wbmp':

case 'image/bmp':

$res = imagecreatefromwbmp($path);

break;

}

return $res; } 全部评论 文明上网理性发言，请遵守新闻评论服务协议0条评论 立即提交 更多相关内容 • 给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。 canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条... • Android 图片添加水印的实现方法 实现效果图： 手机端打水印（文字和图片)使用的是Bitmap、Matrix和Canvas类的一些方法， 可以实现拉伸、旋转、位移等等效果。 原理很简单， 就是在画布Canvas上绘制图形、图片、... • python实现给图片添加文字水印，也包含给动图添加文字水印。实现了两种方法，分别使用了两种不同的库。详细注释。 • 图片上传加水印；js上传图片加水印；vue给图片添加水印 uni-app微信小程序图片加水印，点击看这篇 需求场景： 要求上传图片，并给图片添加水印。传给后端的也是有水印的图片。 逻辑步骤： 通过input上传图片，拿到图片的信息和base64，将图片绘制到画布上，在画布上添加文字（既水印），最后将画布导出成图片，得到的src就是一张有水印的图片。 文末代码可直接复制使用！！！ 此代码可直接复制使用！！！有效的记得点个赞收藏支持下！ <template> <div class="content"> <input type="file" class="box-orc-input" @change="uploadPic($event)" />
<div>
<img class="img_box" :src="imgsrc" alt="">
<div>原图base：{{imgsrc}}</div>
</div>
<div>
<img class="img_box" :src="img2" alt="">
<div>水印图base：{{img2}}</div>
</div>

</div>
</template>

<script>
function ie9 () {
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
return true
} else {
return false
}
}
export default {
data () {
return {
imgsrc: '',//原图片地址
img2: '',//水印图片地址
}
},
methods: {
// 通过input上传图片
console.log(event)
if (event.target.files[0].type != 'image/png' && event.target.files[0].type != 'image/jpg' && event.target.files[0].type != 'image/jpeg') {
return this.$message.warning('请选择上传图片，格式支持：.png 或 .jpeg 或 .jpeg') } if (ie9()) { this.$message.warning('iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。')
retrun
}
//iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。
let inputDOM = event.target
let _this = this
_this.imgsrc = e.target.result//这是原图的base

_this.getImgWay(e)
inputDOM.value = null //将input置空 否则上传相同文件无反应 (不过置空后 34行的打印 就看不到 event.target.files 文件数据（可以先注释此行看下数据--就是图片文件）   )
}
},
// 根据图片的base获取图片的信息
getImgWay (e) {
// console.log(e)
let _this = this
// 组装img图片
var base = e.target.result //图片的base64码，可以直接赋值给img的src
let res = base.split(',')
var image = new Image()
image.src = base //base64数据--赋值

console.log('原图片信息', image)
_this.imgToCanvas(image)
}
return false
},
// 把image 转换为 canvas对象
imgToCanvas (image, btn_type, YYZZ) {
let _this = this
// 创造画布
var canvas = document.createElement("canvas")
canvas.width = image.width
canvas.height = image.height
var cxt = canvas.getContext("2d")
// 将图片绘制上去
cxt.drawImage(image, 0, 0)
// 给画布上添加水印文字
cxt.font = "20px Georgia"
cxt.fillText("--水印文字 可自定义--", (image.width - 200), (image.width / 10), 300)
//将画布导出成图片
_this.canvasToImg(canvas, btn_type, YYZZ)
return canvas
},
//canvas转换为image
canvasToImg (canvas) {
let _this = this
console.log(4, canvas)
var src = canvas.toDataURL("image/jpeg")
console.log('将绘有水印和img的canvas 转成图片获取到src', src)
_this.img2 = src
return src
},
}
}
</script>

<style>
.img_box {
/* width: 100px;
height: 100px; */
}
.content {
}
.photo,
.photo image {
display: inline-block;
width: 220upx;
height: 220upx;
}
width: 220upx;
height: 220upx;
border: dashed 1px #aaa;
display: flex;
justify-content: center;
align-items: center;
font-size: 50upx;
}
canvas {
border: solid 1px gray;
position: absolute;
left: 5000upx;
}
</style>


展开全文
• java 图片添加水印 图片叠加文字类 图片生成方法,如果需要在已有的图片叠加文字
• js 图片加水印 h5 canvas实现，替换代码中的图片为自己的图片位置即可运行 chrome测试通过
• 易语言图片加水印源码系统结构:位图水印, ======窗口程序集1 || ||------__启动窗口_创建完毕 || ||------_合成按钮_被单击 || ||------_源图按钮_被单击 || ||------_水印按钮_被单击 || ||------_保存
• 下面我就将介绍一下怎么给图片添加水印，图片的拼接，怎么制作个性名片以及制作一个涂鸦的画板。   水印 水印的添加总的来说可以简单的分为三步来走，第一步先完成一个画布的创建，第二步在画板上画出你想添加水印...
• 需求： 微信小程序，上传图片，成功后图片水印，既图片的网络地址也有水印。 上传图片使用uni-app的uni.chooseImage（）方法，水印是用canvas。 未知问题： 小程序模拟器上，上传第一张图片没问题，再次上传第二张...

原博主点击查看

需求： 微信小程序，上传图片，成功后图片有水印，既图片的网络地址也有水印。
上传图片使用uni-app的uni.chooseImage（）方法，水印是用canvas。

以下代码可以直接使用：（注意：如果遇到canvas无效或者图片不显示问题：可能就是你在自定义组件内使用canvas，但是没有传递第二个参数this导致的，详见已知问题和解决办法）

<template>
<view class="content">
<view v-for="(photo,index) in photoData" :key="index" class="photo">
<image :src="photo" @click="previewPhoto(photo,photoData)"></image>
<view class="closeA" @tap="deletePhoto(index)">&times;</view>
</view>
<!-- 获取有水印的图片过程 必须使canvas显示 获取完成后在隐藏掉canvas 配合canvas样式定位 使其错位 -->
<!-- canvas的隐藏 在小程序中 使用 v-if或display：none 都不生效   使用hidden属性 true隐藏 false显示 -->
<canvas :style="{width:canvasWidth,height:canvasHeight}" canvas-id="myCanvas" :hidden='flagC'></canvas>
</view>
</template>

<script>
export default {
data() {
return {
flagC: false,
photoData: [],
photoArray: [],
canvasWidth: '',
canvasHeight: '',
photoIndex: 0
}
},
},
methods: {
// 添加图片事件
this.photoIndex = 0;
let ctx = uni.createCanvasContext('myCanvas');
uni.chooseImage({
count: 6,
sourceType: ['album', 'camera'],
success: res => {
this.photoArray = res.tempFilePaths;
title: "图片加载中..."
})
}
})
},

// 调用添加水印的函数
if (this.photoIndex < this.photoArray.length - 1) {
this.photoIndex++;
} else {
}
})
},

// 添加水印
this.flagC = false
uni.getImageInfo({
// 注意此时的地址是正常的图片地址 以下是给图片添加水印返回新的url地址
src: this.photoArray[this.photoIndex],
success: res => {
this.canvasWidth = ${res.width}px; this.canvasHeight = ${res.height}px;
var ctx = uni.createCanvasContext('myCanvas');
// 在自定义组件内 需要传递第二参数 this canvas才生效
// var ctx = uni.createCanvasContext('myCanvas', this);
ctx.clearRect(0, 0, res.width, res.height);
ctx.beginPath();
ctx.drawImage(this.photoArray[this.photoIndex], 0, 0, res.width, res.height);

// 为图片添加水印
ctx.translate(res.width / 2, res.height / 2);
ctx.rotate(45 * Math.PI / 180);

//这部分是水印的大小位置和数量
let horizontal = res.width / 4;
let vertical = res.height / 3;
let fonstsize = res.width / 30;
for (let i = 0; i <= 2; i++) {
for (let j = 0; j <= 2; j++) {
ctx.beginPath();
ctx.setFontSize(fonstsize);
ctx.setFillStyle("rgba(255,255,255,0.3)");
// ctx.fillText("-仅供保险投保使用-", i * horizontal - res.width / 2, j * vertical - res.height / 2);
ctx.fillText("--仅供保险投保使用--", (i * horizontal - res.width / 2) * 2, j * vertical - res.height / 2, fonstsize*15*2);
}
}

// 开始绘制添加水印的图片并显示在页面中
ctx.draw(false, () => {
setTimeout(() => {
console.log("asdf");
uni.canvasToTempFilePath({
canvasId: "myCanvas",
success: res => {
// 注意此时的地址是加了水印的图片地址（直接url输入浏览器也可以查看包含水印）
console.log(123,res.tempFilePath)
this.flagC = true
this.photoData.push(res.tempFilePath);
callback();
}
})
// 在自定义组件内 需要传递第二参数 this canvas才生效
// }, this)
}, 500)
});
}
})
},

// 预览图片
previewPhoto(url, list) {
uni.previewImage({
current: url,
urls: list.map(item => item)
})
},

// 删除图片
deletePhoto(index) {
this.photoArray.splice(index, 1);
this.photoData.splice(index, 1);
console.log(this.photoArray)
}
}
}
</script>

<style>
.content {
}
.photo,
.photo image {
display: inline-block;
width: 220upx;
height: 220upx;
}
width: 220upx;
height: 220upx;
border: dashed 1px #aaa;
display: flex;
justify-content: center;
align-items: center;
font-size: 50upx;
}
canvas {
border: solid 1px gray;
position: absolute;
left: 5000upx;
}
</style>



未知问题： 小程序模拟器上，上传第一张图片没问题，再次上传第二张图片，会发现第二张图片显示出来的是两张图片的叠加图；但是在真机使用时候，却不会出现也不影响（故没有处理，猜测解决方案：可以再每次上传图片处理水印时候，使用不同的canvas元素，不要使用同一个去做水印）；

已知问题：
1.若canvas图片渲染不出来，也就是uni.createCanvasContext（）方法无效
2.或ctx.draw（）无效，
3.或uni.canvasToTempFilePath（）接口总是失败；
4.或拿不到图片的tempFilePath；以上问题都是一个原因导致

（查看uni-app文档或者微信小程序canvas文档可知原因：1.是需要在template模板里有canvas元素；2.是在自定义组件或者公共组件内，必须传递第二个参数this）。

解决办法就是： createCanvasContext和canvasToTempFilePath两个地方的方法需要传递第二参数this

var ctx = uni.createCanvasContext('myCanvas', this);

uni.canvasToTempFilePath({获取图片的内容代码 详见下面}, this)


截图是uni-app的文档：

微信小程序工具 操作上传一张图：

未知问题演示：上传第二张图：（叠加图片问题只会在小程序模拟器中出现，在实际真机使用中不会影响）

展开全文
• 类引入后，直接调用即可，非常方便简单，支持图片或文字，文字可调整透明度和色彩、文字大小、字体等。
• 前些日子把phpcms的内置编辑器改成了百度UE编辑器，非常好用，但是有个地方不是很满意，就是没法给上传的图片加水印了，经过一番研究终于实现了出来，分享给大家。
• java给图片添加水印，网站开发过程中可能需要对上传的图片添加属于本网站的水印，这是一个工具类，能实现添加文字水印和添加图片水印。
• 主要介绍了Android图片添加水印图片并把图片保存到文件存储的实现代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
• 七牛云上传图片实现添加水印java代码测试类注意事项要先获取七牛的ak，sk以及空间水印样式
• 代码如下: ‘文字水印 Function WordWatermark(ImagePath) Dim Image Set Image= Server.CreateObject(“Persits.Jpeg”) ‘ 建立对象 Image.Open server.mappath(ImagePath) ‘ 图片所在位置 Image.Canvas.Font....
• 主要为大家详细介绍了Android实现为图片添加水印的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
• 开发一个项目,需要用到图片加水印的功能,这里考虑使用后台加水印,在上传的时候或者回显到页面时候,取图片文件的流数据,进行加水印在返回流数据就行了,非常简单,不懂可以问我
• 我看到网上有好多关于图片加水印的类,写的很好 ,我这里只是把相应的原理写下,具体需求,根据自己的情况来修改,很简单的,写的不好,高手见谅
• 微信小程序用Canvas给图片加水印，拼接图片，制作名片PHelper-master.zip
• html2canvas 网页对图片加水印
• JS用层实现为图片添加水印效果
• 由于公司业务需求，使用python+PIL+opencv等模块实现对图片加水印以及图片缩放比例后加水印，并生成图片base64格式图片，代码里注释很详细,都可以看懂。 图片路径修改成本地图片位置，直接就可以运行。
• 按键精灵手机版IOS，图片加水印源码，可实现给图片加水印。把水印图片加到主图片里面。暂时只支持IOS系统。
• 主要为大家分享了一段php图片添加水印例子，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
• 不少摄影爱好者的优质照片有了新的发表平台，图片的增加繁荣了自媒体平台，但同时也出现了不少剽窃他人图片的现象，原来只发原片的摄影爱好者，纷纷开始在自己的图片上打上水印，今天小编给大家介绍一款加水印的软件...

随着自媒体的迅速发展，不少摄影爱好者的优质照片有了新的发表平台，图片的增加繁荣了自媒体平台，但同时也出现了不少剽窃他人图片的现象，原来只发原片的摄影爱好者，纷纷开始在自己的图片上打上水印，今天小编给大家介绍一款加水印的软件，具体步骤如下：

步骤一：我们在浏览器上搜索“水印云”，点击“立即体验”。

步骤二：注册一个账号并登录，点击“图片加水印”；

步骤三：点击“添加文件”，并本地上传图片；

步骤四：选择右上角“添加图片水印”，并上传要添加的水印，如图所示；

水印大小可以根据视觉效果来进行调节，调节好字号之后点击“开始加水印”， 水印加好之后点击“下载文件”即可保存到本地电脑。

效果图如下：

展开全文
• 主要介绍了ASP.NET实现图片自动添加水印，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
• 1、在网上查看了很多 资料，一般合成图片的方法，有两种；这种要简单、灵活些； 2、做成一哥demo，供学习参考；
• 强化了给图片加水印的功能。可以实现对图片加文字水印和图像水印。其中文字水印支持X轴扩展，Y轴扩展，或者全屏加水印，支持文字的旋转。 有具体示例可以直接参考。 //自定义所有各种属性 ImageWaterManage ...

...