TA貢獻1934條經(jīng)驗 獲得超2個贊
您可以使用帶有合并圖像包的JavaScript 輕松地將圖像組合在一起。
使用以下圖像：
/body.png
/eyes.png
/mouth.png
你可以做：
import mergeImages from 'merge-images';
mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
.then(b64 => document.querySelector('img').src = b64);
// data:image/png;base64,iVBORw0KGgoAA...
這將更新img元素以顯示此圖像：
TA貢獻1812條經(jīng)驗 獲得超5個贊
該線程中已經(jīng)有一些出色的客戶端方法，但是如果您想在服務器端執(zhí)行此操作，流行的 Intervention Image 包非常方便，并且旨在與 Laravel 一起使用。
如果您的圖像大小不同，您將不得不進行一些調(diào)整大小的數(shù)學運算，但從根本上說，您希望該insert方法將一個重疊在另一個之上。
// create new Intervention Image
$img = Image::make('public/foo.jpg');
// paste another image
$img->insert('public/bar.png');
// create a new Image instance for inserting
$watermark = Image::make('public/watermark.png');
$img->insert($watermark, 'center');
// insert watermark at bottom-right corner with 10px offset
$img->insert('public/watermark.png', 'bottom-right', 10, 10);
TA貢獻1900條經(jīng)驗 獲得超5個贊
好吧，這更多是關于 css 和 html 問題順便說一句，您可以在 css 中的 border-image 屬性中執(zhí)行此操作，示例 Html
<img src="https://images.unsplash.com/photo-1565013161635-98472edee347?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" width="50%" id="borderimg1">
CSS
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
**Result**
舉報