Overlay Cloudinary上傳小部件在圖像上

我有一個圖像和Cloudinary上傳小部件。小部件在屏幕上顯示爲一個按鈕，帶有一個href和幾行javascript。我想將小部件按鈕直接放在圖像的頂部，但我很難獲取格式化權限。這些都在一個醒目的網站上託管。Overlay Cloudinary上傳小部件在圖像上

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

來源

2016-09-19 chicago.coder

這裏簡單的解決方案。原來，我只需要居中對齊圖像，添加幾行換行符，然後放下它下面的按鈕。

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

來源

2016-09-19 21:00:14

Overlay Cloudinary上傳小部件在圖像上

回答

相關問題