整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
著互聯網與科技的發展，電商也在快速地發展。產品精修在電商設計中占有至關重要的位置，影響消費者購買欲望的除了產品本身的質量外，更重要的是產品給人第一印象的美觀。就像你去看美女選秀時，如果模特是歪瓜裂棗，你肯定不會有看下去的欲望。產品也是如此，首先吸引你的是好看的外觀，你才有了解下去的欲望。而體現產品美觀度最簡單粗暴的方法就是修圖，也就是產品精修。個人認為產品精修主要修的是產品的結構（主要體現在其光影關系）和其自身材質，就像人的骨骼和皮膚。
沒有光影關系對比的產品再美也是花瓶，它會顯得很假、很單薄，沒有立體感。產品修圖就像畫素描一樣，首先刻畫它的三大面五大明暗調子，刻畫它的質感。我們在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小時內與您取得聯系。
