添加图像、替换、裁剪、删除部分

Posted 2023-03-29

【中文标题】添加图像、替换、裁剪、删除部分

【英文标题】：Add image, replace, crop, delete section

【发布时间】：2021-12-20 17:05:41

【问题描述】：

我有一个图片库，其中包含 Add image、Add video 和 description 字段。添加图像后，我在右上角有一个带有这些功能的按钮：Replace the image、Adjust/crop、Delete、Add Description 和Delete Description，如图所示。 Add Image 功能运行良好，但我不知道替换图像、裁剪等的其余部分。 有人可以帮我找出解决方案吗？或者有人有这样的参考吗？

<div class="blog-box">
            <div class="c-share">
                      <input class="c-share__input" type="checkbox" id="checkbox5">
                        <label class="c-share__toggler" for="checkbox5">
                        <span class="c-share__icon"></span>
                          </label>
                         <ul class="c-share_options">
                         <li><img src="images/icon/replace-icon.png" class="mr-5">Replace Image</li>
                         <li><img src="images/icon/crop-icon.png" class="mr-5">Adjust / Crop</li>
                         <li><img src="images/icon/delete-icon.png" class="mr-5">Delete</li>
                         <li><img src="images/icon/add-description-icon.png" class="mr-5">Add Description</li>
                         <li><img src="images/icon/add-description-icon.png" class="mr-5">Delete Description</li>
                          </ul>
                       </div>
              <div class="tile"> 
               <div class="flip-card-3D-wrapper">
               
                <div id="flip-card">
                 <div class="flip-card-front">
                 <div class="img-wrap">
                  <div class="cropme" id="landscape" style="width: 350px; height: 400px;"></div>
                  </div>
                   <button id="flip-card-btn-turn-to-back">Add Video</button>
                    <textarea name="form_message" class="form-control required border-r-none ht-gallery-new" rows="5" placeholder="Add Description" aria-required="true"></textarea>
                  </div>
                 <div class="flip-card-back"><div class="inner">
                   <div class="description">
                      <p><strong>Note:</strong> <a href="https://www.youtube.com" target="_blank">Click</a> here to see how to find embedded video url</p>
                        <input type="text" required="" placeholder="Paste Embedded Video Url Here" name="gmap" class="form-control allow_only_alphabet space video-url-new">
                        <textarea name="form_message" class="form-control required border-r-none add-des-new" rows="5" placeholder="Add Description" aria-required="true"></textarea>
                       </div>
                    </div>
                <img src="images/return-btn.png" id="flip-card-btn-turn-to-front" class="return-btn-bg"></div>
              </div>
            </div>
           <div class="clear">
          </div>
        </div>
       </div>

【参考方案1】：

我不知道您使用的是什么 js 框架，或者是否有任何后端的东西。但这个 jquery 解决方案可能会对您有所帮助：

Not able to replace the image in the place of old image using javascript

那里有一个指向 sn-p 的链接，他在其中制作了一个图像替换器，允许您在替换之前裁剪图像。它工作不完美，但也许你可以使用它。

我会将其更改为获取图像 URL。

因为对于删除，可以通过一个按钮将 img-tag 的 src 设置为空白。

<div id='imagediv'>
    
</div>

<button onclick="myFunction()">Delete</button>

var html = "<img src='"+ link +"' >"
var link = "urltoimage.com/picture.jpg"

function myFunction() 
  link = "path to blank image"
  document.getElementById("imageDiv").innerHTML = html;

我还没有测试过这个，它不是最神奇的做事方式，但我希望它有所帮助:)

【讨论】：

感谢您的回复并给予您及时的时间...我会检查一下这可能对我有帮助