PHP平铺水印

$bigImgPath = "logo.png"; //原图
$logo = "logo2.png"; //水印
$im = imagecreatefromstring(file_get_contents($bigImgPath));
//获取水印源
$watermark = imagecreatefromstring(file_get_contents($logo));
//获取图、水印 宽高类型
list($bgWidth, $bgHight, $bgType) = getimagesize($bigImgPath);
list($logoWidth, $logoHight, $logoType) = getimagesize($logo);
//定义平铺数据
$x_length = $bgWidth - 10; //x轴总长度
$y_length = $bgHight - 10; //y轴总长度
//创建透明画布 伪白色
$opacity=20;
$w = imagesx($watermark);
$h = imagesy($watermark);
$cut = imagecreatetruecolor($w,$h);
$white = imagecolorallocatealpha($cut, 255,255,255,0);
imagefill( $cut, 0, 0, $white );
//整合水印
imagecopy($cut, $watermark, 0, 0, 0, 0, $w, $h);
//循环平铺水印
for ($x = 0; $x < $x_length; $x) {
for ($y = 0; $y < $y_length; $y) {
imagecopymerge($im, $cut, $x, $y, 0, 0, $logoWidth, $logoHight, $opacity);
$y += $logoHight;
}
$x += $logoWidth;
}
header("Content-type:image/png");
imagejpeg($im);
die;

示例水印图片


示例效果图


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue页面中生成图片并平铺水印,可以使用HTML5的Canvas API。下面是一个简单的示例: 1. 在Vue组件中添加一个Canvas元素: ``` <canvas ref="canvas"></canvas> ``` 2. 在Vue组件的mounted钩子函数中获取Canvas元素的上下文(context),并加载图片: ``` mounted() { // 获取Canvas元素的上下文 const canvas = this.$refs.canvas; const context = canvas.getContext('2d'); // 加载图片 const img = new Image(); img.src = 'path/to/image'; img.onload = () => { // 将图片绘制到Canvas上 context.drawImage(img, 0, 0, canvas.width, canvas.height); // 添加水印 const watermarkImg = new Image(); watermarkImg.src = 'path/to/watermark/image'; watermarkImg.onload = () => { // 计算水印平铺次数 const repeatX = Math.ceil(canvas.width / watermarkImg.width); const repeatY = Math.ceil(canvas.height / watermarkImg.height); // 平铺水印 for (let i = 0; i < repeatX; i++) { for (let j = 0; j < repeatY; j++) { context.drawImage(watermarkImg, i * watermarkImg.width, j * watermarkImg.height); } } } } } ``` 3. 在Vue组件的template中添加一个按钮,点击按钮时将Canvas保存为图片: ``` <template> <div> <canvas ref="canvas"></canvas> <button @click="saveImage">保存图片</button> </div> </template> <script> export default { methods: { saveImage() { // 将Canvas保存为图片 const canvas = this.$refs.canvas; const dataURL = canvas.toDataURL('image/png'); const link = document.createElement('a'); link.href = dataURL; link.download = 'image.png'; link.click(); } } } </script> ``` 这样就可以在Vue页面中生成包含平铺水印的图片,并且可以通过点击按钮将该图片保存到本地。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值