在图像上叠加 Cloudinary 上传小部件

Posted 2023-02-16

【中文标题】在图像上叠加 Cloudinary 上传小部件

【英文标题】：Overlay Cloudinary Upload Widget on Image

【发布时间】：2017-01-27 12:07:03

【问题描述】：

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

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

<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"
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>

【参考方案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>