javascript - 获取将图像大小调整为其容器的脚本的名称+其他功能

Question

我发现了一个我非常喜欢它的功能的网站。 Click here to go to the website

我想开发类似的东西，可以通过 WordPress CMS 进行管理。 我想知道我是否可以购买或使用已经解决所有这些问题的插件/脚本:

• 拥有一个网格构建器，允许我们定义每个项目的尺寸(宽度和高度)+订单项目
• 能够在 block 内添加背景图像
• 背景图像必须在其容器的大小内按比例缩放
• 能够使用 css 类来更新布局(如果需要)
• 添加了在悬停+标题+样式+文本+链接等上实现不同图像的功能

非常欢迎任何链接/示例/插件，谢谢

Answer 1

您正在搜索我们在德国所说的:“产蛋、产奶的多毛母 pig ”。它的意思是:这样的东西不存在。

但是你可以使用gridster绕过困难的部分并添加一些非常简单的功能:

<div class="gridster">
   <ul>
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
   </ul>
</div>
<input type="text" placeholder="CSS Class" class="classname">
<input type="text" placeholder="Content" class="content">
<input type="text" placeholder="Image URL" class="imageurl">
<button class="add">Add</button>

当你的 DOM 加载时，在你的脚本文件中:

//init gridster
 var gridster = $(".gridster ul").gridster().data('gridster');

//get the content
var myDynamicClass=$("input.classname").val();
var myDynamicContent=$("input.content").val();
var myDynamicImage='style="background-image:url('+$("input.imageurl").val()+')  no-repeat center center fixed; background-size: cover;"';

//add a new grid element to gridster
$("button.add").click(function(){
    gridster.add_widget('<li class="'+myDynamicClass+'" '+myDynamicImage+'>'+myDynamicContent+'</li>', 2, 1);
});

编辑: 你可以自己用js实现一个裁剪和调整大小的工具。 Here是我几天前完成的完整客户端解决方案。基本上，您可以使用 javascript 操作它，将其加载到 Canvas 中，裁剪它，然后将 Canvas 保存为图像。