首页 文章

覆盖图像上的Cloudinary上传小部件

提问于
浏览 次
0

我有一个图像和一个Cloudinary上传小部件 . 小部件在屏幕上显示为一个按钮，带有一个href和几行javascript . 我想将小部件按钮直接放在图像的顶部，但我很难正确地进行格式化 . 这些都在Strikingly网站上托管 .

<div id="picture" data-reactid="107">

<img
width="600"
height="600"
src="//res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_9000,w_1200,f_auto/v1/7607/107c9c89-b233-482f-8f88-a106232d0f79_4_tidnqb.png"
class="lazyautosizes lazyloaded"
data-src="//res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_9000,w_1200,f_auto/v1/7607/107c9c89-b233-482f-8f88-a106232d0f79_4_tidnqb.png"
data-sizes="auto"
data-reactid="108"
sizes="600px">

      <input style="position:absolute;width:80px;left:120px;top:180px;"

        <a href="#" id="opener"></a>

        <script type="text/javascript">
        $("#opener").cloudinary_upload_widget({
          cloud_name: "CloudicusNamicus",
          upload_preset : "preset",
          cropping: "server",
          cropping_aspect_ratio: "1",
          cropping_show_dimensions: "true",
          theme: "white",

          // pixels
          max_image_width: 1055,
          max_image_height: 1055,
          min_image_height: 350,
          min_image_width: 350,

          gravity: "custom",
          moderation: "webpurify",
          thumbnail_transformation : 'g_center,l_old-overlay.png,fl_relative,w_1.0,h_1.0/c_scale'
        }), function(error, result) {console.log(error, result)};

        </script>
      </input>
</div>
cloudinary

1 回答

  • 1

    这里很容易解决 . 结果我只需要对齐图像，添加几个换行符，然后放下它下面的按钮 .

    <div align="center" ><img src="//res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_9000,w_1200,f_auto/v1/7607/107c9c89-b233-482f-8f88-a106232d0f79_4_tidnqb.png" data-sizes="auto" data-reactid="108" sizes="400px">

    <div id="button" align="center">

  <a href="#" id="opener"></a>

    <script type="text/javascript">
    $("#opener").cloudinary_upload_widget({
      cropping: "server",
      cropping_aspect_ratio: "1",
      cropping_show_dimensions: "true",
      theme: "white",

      // pixels
      max_image_width: 1055,
      max_image_height: 1055,
      min_image_height: 350,
      min_image_width: 350,

      gravity: "custom",
      moderation: "webpurify",
      thumbnail_transformation : 'g_center,l_old-overlay.png,fl_relative,w_1.0,h_1.0/c_scale'
    }, function(error, result) {console.log(error, result)});

    </script>

</div>
    回复于

相关问题