首页 > 解决方案 > 无法存储输入类型的图像=隐藏

问题描述

我正在使用图像裁剪 jquery 插件https://www.jqueryscript.net/other/Simple-jQuery-Client-Side-Image-Cropping-Plugin-Awesome-Cropper.html

要使用这个插件,我必须使用<input id="someId" class="crop-img" type="hidden"> ( type="hidden" instead of type="file")

以及要实例化的脚本,

$(document).ready(function(){
   $('.crop-img').awesomeCropper(
      { width:1020, height:434 , debug: true }
    );
})

但问题是我无法在 php laravel 框架中获得价值,因为type="hidden"如果我将其更改为type="file"我获得价值但裁剪插件不起作用......请帮助......

标签: php

解决方案


问题是这个插件以base64编码的形式将裁剪后的图像保存到隐藏的输入字段中。因此,您不会获得可以通过表单提交发送的文件类型。您可以做的是获取该数据并将其发送到您的服务器,然后将 base64 转换为图像。您可以像这样使用 JQuery 获取该数据,

let base64EncodedImage = $('#someId').val();

它将返回一个如下所示的输出,

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAgAElEQVR4Xuydd3xcxbm/n+19V2V3teq9S5ZcZMu9YAO2AWODaQkQQgIhvSc3uUlukpvkpocL6Z2E3sHGGPdeZMuWrN7r7mqlXWl73/19JAjcJPyuCeDEutr5S/aZec8733l2Zs6cOe8I4vF4nHeQpotHYzGCoTDRaPQdWEoU/b+kgOCdgPUXqALBELFY7P+SLom6vEMF/gosv9+PdcyG0+lEIpFgMqURDkcwpRnf9DbTMAVCISKRv+6ppoHz+XxEolHUKhUikegdupkoPtsUeB2saagazjZiNluRyaQzw9r4hB2RUMg9H7jr7+o1Dc80OP5A8O+uBYNBWlrbkEll6A2pmNLS/ipPLOTDMelGqEwibO8nqMoix6Cmv7cXfaoOs2UCBAI0yUZMRhVtDc1IkpJQKNQo5CKkEhEeuwOZPosUtQTzUC9STQZGbZyOf

推荐阅读