返回首页

PSD 文件图层组格式解析?

来源:www.fanlv.net  时间:2023-09-14 10:03   点击:161  编辑:admin   手机版

我们平常用ps中通过变形命令来修改图片的,让其契合到杯子上面,如果我们要用canvas怎样制作呢?

ps 中的示例

我遇到的需求是完成一个杯子的实时效果图预览,就需要实现这种弯曲的效果,先上代码,然后再讲解原理

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="canvas"></canvas>
		<p>请选择一张图片绘制在杯子上</p>
		<input type='file' id='change' />
	</body>
	<script src='js/jquery-3.1.1.min.js'></script>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

		var img = new Image();
		img.onload = start;

		var productImg = new Image();
		productImg.onload = function() {
			var iw = productImg.width;
			var ih = productImg.height;
			canvas.width = iw * 2 / 3;
			canvas.height = ih * 2 / 3;
			ctx.drawImage(productImg, 0, 0, productImg.width * 2 / 3, productImg.height * 2 / 3);
			//			img.src='/img/test/i.jpg';
		};
		productImg.src = "img/cola.jpeg";

		$(function() {
			$('#change').on('change', function(ev) {
//				console.log(ev);
				var reader = new FileReader();
				var file = this.files[0];
//				console.log(file)
				reader.onload = function(ev) {
					//self.imagePress(ev.target.result, self.option.sizeMax, function(dataURL, blob) {
					//					console.log(ev.target.result);
					img.src = ev.target.result
				}
				reader.readAsDataURL(file);
			})
		})

		function start() {
			var iw = img.width;
			var ih = img.height;

			var xOffset = 190,
				yOffset = 212;

			var a = 80.0;
			var b = 15.0;

			var scaleFactor = iw / (2 * a);


			for(var X = 0; X < 2 * a; X++) {
				var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
				for(var Y = 0; Y < 194 + y * 2; Y++) {
					var _scaleFactor = ih / (194 + y * 2);
					var scaleFactor = iw / (2 * a - Y / 5);
					if(Y < X * 10 && Y < -10 * X + 2 * a * 10) { //Y<x*10
						ctx.drawImage(img, (X - Y / 10) * scaleFactor , Y * _scaleFactor, 1, 1, X + xOffset, y + yOffset + Y, 1, 1);
					}
				}

			}
			//封边,绘制线段遮住毛糙
			ctx.beginPath();
			ctx.moveTo(xOffset, yOffset);
			ctx.lineTo(xOffset + 226 / 10, yOffset + 226);
			ctx.strokeStyle = '#fff';
			ctx.lineWidth = 3;
			ctx.stroke();

			ctx.beginPath();
			ctx.moveTo(xOffset + 2 * a + 1, yOffset);
			ctx.lineTo(xOffset + 2 * a + 1 - 226 / 10, yOffset + 226);
			ctx.strokeStyle = '#fff';
			ctx.lineWidth = 3;
			ctx.stroke();

			ctx.beginPath();
			ctx.moveTo(xOffset, yOffset + 1);
			ctx.bezierCurveTo(xOffset + a / 2 - 10, yOffset + 20, xOffset + a * 3 / 2 + 15, yOffset + 20, xOffset + 2 * a, yOffset + 1);
			ctx.strokeStyle = 'rgb(230,230,230)';
			ctx.lineWidth = 3;
			ctx.stroke();

			ctx.beginPath();
			ctx.moveTo(xOffset + 226 / 10, yOffset+226-1);
			ctx.bezierCurveTo(xOffset + 226 / 10 + a / 2 -5, yOffset+226 + 18, xOffset + 226 / 10 + a * 3 / 2 - 35, yOffset+226 + 18, xOffset + 226 / 10 +  a*3/2-3, yOffset+226 -1);
			ctx.strokeStyle = '#fff';
			ctx.lineWidth = 3;
			ctx.stroke();

		}
	</script>

</html>

如果正常的运行起来那么会得到这样一张图

有了明显的下弧的感觉

要实现这种弧度首先要分两步方法来操作

主要思路就是先绘制出杯子的轮廓,然后将对应位置比例的图片贴上去。先来绘制带有上下半椭圆的形状:

看上图我们可以知道我们只需要把原图按照竖形切割,然后绘制出具有上下半椭圆的形状,把对应位置的图片贴过来就好了,现在来看看如何绘制具有上下半圆的这个形状:

看了上面的椭圆的计算方式,还有下面一个椭圆,下面一个椭圆就稍微简单点,看看它和上面的椭圆有什么关系:

刚才大致了解对于椭圆是如何切割的,现在看看椭圆+斜边是如何切割的,这个相比只是椭圆切割要复杂一点,会同时对垂直进行切割:

现在来看看左右两根线的方程,一个是y=10*x,一个是y=20*a-10*x;

至此我们就完成了全部的图片绘制,此代码的应用场景就是圆柱体,但是遇到特殊的透视关系上,还是不够灵活,如果能直接解析psd中的变形命令,通过替换智能图层的方式实现会更加的灵活

我最近发现了一下能实现这种想法的网站,分享给大家,有兴趣的同学可以试一试


foxpsd-在线psd文件处理工具,替换图层智能对象api接口 FOXPSD
顶一下
(0)
0%
踩一下
(0)
0%
相关评论
我要评论
用户名: 验证码:点击我更换图片