整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
着互联网与科技的发展，电商也在快速地发展。产品精修在电商设计中占有至关重要的位置，影响消费者购买欲望的除了产品本身的质量外，更重要的是产品给人第一印象的美观。就像你去看美女选秀时，如果模特是歪瓜裂枣，你肯定不会有看下去的欲望。产品也是如此，首先吸引你的是好看的外观，你才有了解下去的欲望。而体现产品美观度最简单粗暴的方法就是修图，也就是产品精修。个人认为产品精修主要修的是产品的结构（主要体现在其光影关系）和其自身材质，就像人的骨骼和皮肤。
没有光影关系对比的产品再美也是花瓶，它会显得很假、很单薄，没有立体感。产品修图就像画素描一样，首先刻画它的三大面五大明暗调子，刻画它的质感。我们在ps修图时着重加强的是它的亮面、暗面和高光来体现。
三大面五大明暗调子图示
去除瑕疵
根据我自己的工作经验，我认为产品的光影关系在ps中刻画主要分为两大部分：暗面与亮面的对比与过渡和高光的处理。对光影关系的把握和拿捏是要靠大量的练习才能掌握的。暗面与亮面的对比，我个人的做法是把亮面拼命提亮到合适值和拼命压暗暗面（不能过曝和过黑，过曝就是一片白色，过暗就是一片黑色，没有细节。如果掌握不了，请参考上面的三大面五大明暗调子图示）。执行这两个面的对比，主要用到是ps中的亮度与对比度工具、曲线工具、色阶工具、阴影与高光工具和camera raw滤镜。我个人喜欢用曲线工具和camera raw滤镜来调整。
下面跟大家分享曲色阶与曲线运用小技巧：当亮面与暗面对比不强烈时，整个画面就会灰蒙蒙一片时，就可以运用下面的小技巧来调整。（操作步骤如下图）
曲色阶与曲线运用小技巧
当亮面与暗面对比不强烈时，整个画面就会灰蒙蒙一片时，就可以运用camera raw滤镜来调整，下图红框部分就是调整选项，各选项数值根据画面来调整（不能过曝，也不能过黑）。
camera raw滤镜
如果上面的步骤没有效果，那么就要分别抠出高光和暗面来调整它的光影关系了。高光部分刻画主要用到羽化和曲线工具。首先复制原图一层，再抠出高光区域并建立选区（高光选区快捷键“Ctrl+Alt+2”，择暗部快捷键是“ctrl+alt+shift+2”。），然后羽化选区，数值自定，羽化后按快捷键是ctrl+m调出曲线工具，曲线数值按图片实际效果来调。
当亮面和暗面对比过渡不和谐时可以用修补工具选中明暗交界线附近的区域并把选区移动到亮面，直到过渡和谐为止。
灰面的刻画
“气质”好，穿什么“衣服”都好看。产品的材质是产品气质的一种体现方式，也是产品情感的一种表达方式。比如说钢铁材质传达的气质是刚硬、锋利。金银材质传达的气质是高贵、贵重........。
我们在调整好产品光影关系之后，往往会削弱产品材质的体现。这时就需要我们在光影调整好的基础上叠加一层材质上去（在网上找或者自己制作都行）。
下面给大家分享一些常见的材质的制作方法，制作材质经常用到的是滤镜和图层样式、渐变工具等等。下面推荐一些教程网站供大家学习，我就不详细讲了。
运用处理产品图片案例：http://www.ps-xxw.cn/shiyongjiqiao/8654.html
更多材质效果教程网站：思缘论坛、ps联盟、ps学习网、ps家园、飞特网
Java实现根据svg模版动态生成图片
需要Java语言动态生成图片
用流程图简单说明下我这边工作中使用的场景
仅供参考
所以这里就需要生成证书了
我先给大家看下最终实现的图片效果
这里要先说明一下
下面说下我是如何解决的
这种方式是不能实现这个需求的
这个的原理就是对网页截图 但只能对于静态页面截图 不能根据不同的参数值动态生成图片
所以不提倡使用这种方式
但也介绍下这种使用方式 朋友们根据自己的实际需求情况有选择的使用
这是h5代码
test文件夹下面的内容
安装一个docker nginx 将test文件夹加载到nginx容器的/usr/share/nginx/html目录下面
docker run --name nginx80 -p 8000:80 -v /tmp/test:/usr/share/nginx/html -d docker.io/nginx
访问的页面效果
这张图片是截图生成的图片 但url中的id值并没有传给页面
在h5代码中请求后端接口获取数据动态显示出来也是不可以的
所以这种方式使用局限性很窄
大致原理是 通过http请求该url获取该url的文件流然后解析h5代码生成图片
其实现原理大致为 读取svg document h5代码 将动态参数map解析到h5代码中 转换成字节数组 生成图片格式
我本地是mac系统没有这个问题 在发布到测试环境linux系统出现了这个问题
先看下问题的现象
看到了没 生成的图片中文全是乱码
原因是因为linux系统没有中文字体
既然linux系统没有中文字体 那么就安装它嘛 let's 盘它！！！
brew install fontconfig
fc-list :lang=zh (注意‘：’前的空格)
mac环境默认会安装很多中文字体
yum -y install fontconfig
fc-list :lang=zh
果然没有中文字体
a 先在mac系统中找到字体安装目录
/System/Library/Fonts
b 找到宋体对应的文件
c 将该文件上传到linux指定的目录下
/usr/share/fonts/chinese
d 赋予文件夹操作权限
chmod -R 755 /usr/share/fonts/chinese
e 安装ttmkfdir来搜索目录中所有的字体信息，并汇总生成fonts.scale文件
yum -y install ttmkfdir
ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir
vi /etc/fonts/fonts.conf
添加
<dir>/usr/share/fonts/chinese</dir>
fc-cache
a 找到jdk所在的安装目录
echo $JAVA_HOME
b 将宋体文件复制过来
cp /usr/share/fonts/chinese/STHeiti\ Light.ttc /usr/local/software/jdk1.8.0_141/jre/lib/fonts/fallback
fallback代表存放后备语言的文件夹
https://gitee.com/pingfanrenbiji/resource/tree/master/image
注意: 引入的依赖问题
<!--phantomjs -->
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>2.53.1</version>
</dependency>
<dependency>
<groupId>com.github.detro</groupId>
<artifactId>ghostdriver</artifactId>
<version>2.1.0</version>
</dependency>
<!--svg-->
<dependency>
<groupId>com.github.hui.media</groupId>
<artifactId>svg-core</artifactId>
<version>2.5</version>
</dependency>
这些依赖jar包我是上传到了公司的私服上了
若是朋友们下拉不下来
我提供给大家这些底层jar包的实现源码
https://gitee.com/pingfanrenbiji/quick-media
自行上传到自己的私服即可
JavaScript中，您可以使用HTML5的<input type="file">元素来实现图片上传功能。
以下是一个简单的示例代码，演示如何在JavaScript中上传图片：
HTML部分：
<input type="file" id="uploadInput">
<button onclick="uploadImage()">上传图片</button>
JavaScript部分：
function uploadImage() {
var fileInput=document.getElementById('uploadInput');
var file=fileInput.files[0];
if (file) {
var formData=new FormData();
formData.append('image', file);
// 发送图片数据到服务器
// 这里可以使用XMLHttpRequest或fetch等方法发送请求
// 请根据您的需求选择适当的方法
// 示例中使用XMLHttpRequest发送POST请求
var xhr=new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload=function() {
if (xhr.status===200) {
// 上传成功
console.log('图片上传成功');
} else {
// 上传失败
console.log('图片上传失败');
}
};
xhr.send(formData);
}
}
API部分：
[HttpPost]
[RequestSizeLimit(5242880)]
public async Task<APIResult> upload(IFormCollection collection)
{
APIResult rtn=new APIResult();
if (collection==null)
{
rtn.code=-100;
rtn.msg="图片列表为空";
return rtn;
}
else
{
try
{
string file_path="";
// 预处理 用户参数:用户指定子路径
string userPath=DateTime.Now.ToString("yyyy-MM-dd");
if (collection.ContainsKey("path"))
{
collection.TryGetValue("path", out Microsoft.Extensions.Primitives.StringValues val);
if (!val.Equals("undefined"))
{
userPath=val.ToString();
}
}
// 预处理 文件路径
// 注意：这里可能会根据不同的环境来 修改 路径前面是否需要添加 /
// 当发现上传不成功，目录无法创建时，可以尝试修改这里
file_path=$"upload/imgs/{userPath}/";
var uploadPath=Path.Combine(_webHostEnvironment.WebRootPath, file_path);
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
// 处理文件
FormFileCollection filelist=(FormFileCollection)collection.Files;
foreach (IFormFile file in filelist)
{
// 保存文件到磁盘
string name=file.FileName;
string FilePath=Path.Combine(uploadPath, name);
string type=Path.GetExtension(name);
using (var stream=System.IO.File.Create(FilePath))
{
await file.CopyToAsync(stream);
};
// 保存文件信息到表
Sys_File f=new Sys_File();
f.code="image";
f.name=name;
f.file_type=type.Trim('.');
f.file_group=userPath;
f.file_path=$"/{file_path}{name}";
f.is_active=true;
f.memo="";
f.createTime=DateTime.Now;
using (var dbctx=DBHelper.db)
{
await dbctx.AddAsync(f);
await dbctx.SaveChangesAsync();
};
// 返回消息，包含文件路径
rtn.datas=$"/{file_path}{name}";
rtn.code=100;
rtn.msg="文件已保存！";
}
}
catch (Exception ex)
{
rtn.code=-200;
rtn.msg="图片保存失败!";
Log4NetUnit.Instance.Log.Error("图片保存失败:" + ex.Message);
}
return rtn;
}
}在这个示例中，我们首先在HTML中创建了一个<input type="file">元素，用于选择要上传的图片。
然后，我们在JavaScript中编写了一个uploadImage函数，该函数在点击"上传图片"按钮时触发。
在uploadImage函数中，我们首先获取到<input>元素，并从中获取到用户选择的图片文件。
然后，我们创建一个FormData对象，并将图片文件添加到其中。
接下来，我们可以使用XMLHttpRequest或fetch等方法将图片数据发送到服务器。
在示例中，我们使用XMLHttpRequest发送了一个POST请求，将图片数据作为FormData发送到/upload端点。
您需要根据您的实际情况修改URL和请求方法。
当请求完成时，我们可以根据响应的状态码来判断上传是否成功。
在示例中，如果状态码为200，则表示上传成功，否则表示上传失败。
请注意，由于安全性限制，JavaScript无法直接访问用户的文件系统。
因此，用户必须手动选择要上传的文件。
*请认真填写需求信息，我们会在24小时内与您取得联系。
