开发者社区> 问答> 正文

宜搭问题,请问如何实现上传水印照片后日期组件显示上传照片的时间?和水印时间对应上?

image.png
请问如何实现上传水印照片后日期组件显示上传照片的时间?和水印时间对应上?
想通过上传照片的时间计算工时,谢谢各位大佬!!!

展开
收起
游客ylc4gdnbd6zo4 2023-11-10 07:59:44 92 0
2 条回答
写回答
取消 提交回答
  • 在宜搭中,要实现上传水印照片后日期组件显示上传照片的时间并与水印时间对应,可以采取以下步骤:

    1. 创建一个表单,并在表单中添加一个上传控件,允许用户上传水印照片。
    2. 创建一个日期组件,用于显示上传照片的时间。
    3. 在上传控件的事件处理器中,获取上传照片的时间戳,并将其转换为字符串格式。
    4. 将步骤 3 中得到的字符串赋值给日期组件。

    下面是具体的代码示例:

    1. 在表单中添加上传控件和日期组件:

      <div>
      <label>上传水印照片:</label>
      <input type="file" id="upload-photo" />
      </div>
      <div>
      <label>上传照片时间:</label>
      <input type="text" id="photo-time" readonly />
      </div>
      
    2. 在 JavaScript 中监听上传控件的变化事件,并在事件处理器中获取上传照片的时间戳:

      document.getElementById('upload-photo').addEventListener('change', function() {
      var file = this.files[0];
      var reader = new FileReader();
      reader.onloadend = function() {
      // 获取照片的时间戳
      var timestamp = reader.result.split(',')[1].split(';')[0];
      document.getElementById('photo-time').value = timestamp;
      };
      reader.readAsDataURL(file);
      });
      
    3. 在 HTML 中,将步骤 2 中得到的时间戳转换为字符串格式,并赋值给日期组件:

      document.getElementById('photo-time').value = new Date(timestamp).toString();
      
    2023-11-10 22:00:38
    赞同 展开评论 打赏
  • 面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。

    在宜搭中实现上传水印照片后日期组件显示上传照片的时间并与水印时间对应上的方法通常需要编程技能。您可以按照以下步骤来实现:

    1. 获取上传的照片信息:当用户上传照片后,可以通过JavaScript或者其他编程语言来获取这张照片的相关信息,包括文件名、大小、最后修改日期等。

    2. 提取照片的水印时间:接下来,您需要解析照片的元数据(Exif数据)以获取水印时间。这一步骤可以通过第三方库如exif.js来实现。

    3. 更新日期组件:最后,将提取出的水印时间显示在宜搭中的日期组件上。这需要使用宜搭API来更新日期组件的值。

    以下是一个简单的示例代码,用于解释整个过程:

    // 获取上传的照片对象
    var photo = document.getElementById("photo");
    
    // 使用exif.js解析照片的元数据
    EXIF.getData(photo, function() {
        var dateOriginal = EXIF.getTag(this, "DateTimeOriginal"); // 获取原始拍摄时间
        console.log(dateOriginal);
    });
    
    // 使用宜搭API更新日期组件的值
    Eidater.setComponentValue("date_component_id", dateOriginal);
    
    2023-11-10 13:24:12
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载