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上传小部件在图像上

回答

相关问题