我选择了图片并在提交表单之前进行了预览。但是我想在选择图像并预览并提交文件后即时编辑文件。
<input type ="file" accept="image/*" id="image" name="image" onchange="preview();">
<p>
<canvas id ="can1" height="0px";></canvas>
</p>
js代码:
<script type="text/javascript">
var img = null;
var canvas1 = document.getElementById("can1");
function preview() {
var inputfile = document.getElementById("image");
img = new SimpleImage(inputfile);
img.drawTo(canvas1);
}
</script>
实际上在提交表单后,图像处理在 Controller 中是这样的:
if ($request->hasFile('image')) {
$filename = time().'-'.$request->image->getClientOriginalName();
$image = Image::make($request->file('image')->getRealPath());
$footer = Image::make(public_path('footer.png'));
$path="photos/shares/uploads/{$filename}";
// Get dimensions for specified images
$width_x=$image->width();
$height_x=$image->height();
$width_y=$footer->width();
// resize the image to a width of $width_x and constrain aspect ratio (auto height)
$footer->resize($width_x,null, function ($constraint) {
$constraint->aspectRatio();
});
$height_y=$footer->height();
$img_canvas = Image::canvas($width_x, $height_x+$height_y);
$img_canvas->insert(Image::make($request->file('image')->getRealPath()));
$img_canvas->insert($footer, 'bottom'); // add offset
$img_canvas->save(public_path($path));
但我希望它在选择图像并显示预览和提交表单后立即发生。
最佳答案
在你的 javascript 中使用这段代码
$("#image").change(function(e) {
var data = new FormData();
data.append('image', $('input[type=file]')[0].files[0]);
data.append('_token', "{{ csrf_token() }}");
$.ajax({
url:'{{url('/my-admin/imageupload')}}',
type: 'POST',
data : data,
enctype : 'multipart/form-data',
contentType: false,
processData: false,
success: function( data ) {
var baseUrl = "{{asset('')}}";
var imageUrl = baseUrl + data.msg;
$('#changeimage').html('<img src="'+ imageUrl +'" height="100px" width="100px">');
},
error: function() {
alert('error');
}
});
});
关于javascript - 在选择图像时预览编辑图像的图像(即时),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48055983/