根据滑块值弯曲图像答案

【问题标题】：Bend an image based on a slider value根据滑块值弯曲图像
【发布时间】：2016-05-02 02:47:16
【问题描述】：

参考这篇文章：How to create image curved using css or jquery (See picture) 和这个 JSFiddle：http://jsfiddle.net/AVRLv/

如何使图片也可以拉伸？不仅仅是一个盒子半径。

我希望能够通过弯曲程度的值来控制图像的弯曲形式。

我已经想出了如何更改图像的宽度和大小：

HTML

<p>
  <label for="amount">Trust Value:</label>
  <input type="text" id="amount" style="border:0; color:#ff0000; font-weight:bold;">
</p>
<div id="slider-range-max"></div>


<img src="http://www.discoposse.com/wp-content/uploads/2014/08/test-all-the-things.jpg" id="image"/>

Javascript

$(function() {
$( "#slider-range-max" ).slider({
  range: "min",
  min: 0,
  max: 10,
  value: 0,
  step: .001,
  slide: function( event, ui ) {
        $("#image").width(ui.value * 100);
        $("#image").height(ui.value * 50);
  }
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });

提前谢谢你！

风格

【问题讨论】：

我猜你可能无法在客户端“弯曲”和图像，即使你可以将它加载到画布中并修改画布等。

标签： javascript jquery html css image-processing

【解决方案1】：

将您创建的拉伸效果与边框半径相结合可能会产生所需的效果。

您可以使用 jQuery 的 .css() 方法编辑图像的样式。

在这种情况下，您可以在滑块的 slide 事件中使用它来动态更改图像的边框，使其看起来弯曲。

$(function() {
$( "#slider-range-max" ).slider({
  range: "min",
  min: 1,
  max: 10,
  value: 0,
  step: .001,
  slide: function( event, ui ) {
        $("#image").width(ui.value * 100);
        $("#image").height(200);
        $('#image').css('border-top-left-radius', '50% 15px')
        $('#image').css('border-top-right-radius', '50% 15px')
        $('#image').css('border-bottom-left-radius', '50% 15px')
        $('#image').css('border-bottom-right-radius', '50% 15px')
  }
  });
  $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});

这是带有上述代码的fiddle。当然可以更改这些值以自定义效果。

【讨论】：