我在提交表单之前选择了图像并预览了它。但是我想在选择图像后动态编辑文件并预览并提交文件。
<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>
实际上在提交表单后,图像处理在控制器中喜欢这个:
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');
}
});
});
在这里,我发布了运行输出的答案。请检查一下!
jQuery(function($){
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-image");
console.log(fileInput);
fileInput.addEventListener("change",function(e){
var files = this.files
showThumbnail(files)
},false)
fileDiv.addEventListener("click",function(e){
$(fileInput).show().focus().click().hide();
e.preventDefault();
},false)
fileDiv.addEventListener("dragenter",function(e){
e.stopPropagation();
e.preventDefault();
},false);
fileDiv.addEventListener("dragover",function(e){
e.stopPropagation();
e.preventDefault();
},false);
fileDiv.addEventListener("drop",function(e){
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
showThumbnail(files)
},false);
function showThumbnail(files){
for(var i=0;i<files.length;i++){
var file = files[i]
var imageType = /image.*/
if(!file.type.match(imageType)){
console.log("Not an Image");
continue;
}
var image = document.createElement("img");
// image.classList.add("")
var thumbnail = document.getElementById("thumbnail");
image.file = file;
thumbnail.appendChild(image)
var reader = new FileReader()
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
}(image))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
image.onload= function(){
ctx.drawImage(image,100,100)
}
}
}
});
.drop-area{
width:100px;
height:25px;
border: 1px solid #999;
text-align: center;
padding:10px;
cursor:pointer;
}
#thumbnail img{
width:100px;
height:100px;
margin:5px;
}
canvas{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="file" style="display:none" id="upload-image" multiple="multiple"></input>
<div id="upload" class="drop-area">
Upload File
</div>
<div id="thumbnail"></div>
它已经在以下链接中回答:
How to enlarge an image on hover or click?
希望这会有所帮助。
链接中的最佳答案是:
将所有图像添加到容器中,例如:
<div class="imageContainer">
<img src ="lion1.jpg" height="150" width="300" />
</div>
然后在悬停时设置一些CSS对该容器中的所有<img>
标签执行某些操作:
.imageContainer > img:hover {
width: 500px;
height: 200px;
}
我没有试过这个,但我认为它可能会让你走上正确的道路来试验自己。