前端上传图片,但是要限制图片大小,要求是:800*600,
如果小了,那就拉伸;大了,就压缩。
要实现这个,是把该功能放到前端用js,还是后端java处理呢?放在哪里处理会好些?
以及具体操作,感谢。
可以放到前端用js处理 但是最好还是在后端判断下大小以免有人搞事
用h5的canvas可以重新绘制图片 各大主流的浏览器都是支持的【不考虑老古董
随手捏了个函数 可以返回一个大小为800*600的和递进来img内容一样的image对象
function changImgSizeTo800x600(img){
var canvas=document.createElement("canvas"),
ctx=canvas.getContext("2d");
canvas.width=800;
canvas.height=600;
ctx.drawImage(img,0,0,img.width,img.height,0,0,800,600);
var outImg=new Image();
outImg.src=canvas.toDataURL();
return outImg;
}
大哥给点分咱下点资源QAQ
按我目前对JS的了解,前端JS可能做不了太多,当然了,如果只考虑H5的浏览器的话,
倒是可以可以考虑一下canvas对图片进行重绘,不过不知道能不能实现.
以前有通过flash进行转换的插件,但现在flash用的越来越少了.
如果你这条是个强制性要求,建议还是在服务端转换,毕竟挂公网的东西,就要小心着别人来搞破坏了.
放后台吧 更简单一点
接受图片 然后判断width height
如果符合就后续上传操作
如果不符合 就修改图片大小然后上传
我觉得你进入了一个误区,你要的其实就是现实的时候不要留白或者现实不全,这个只需要用前段的一些自适应技术就能解决,比如bootstrap 。
另外图片的宽高是由图片头决定的,所以你想直接改变图片本身的宽高需要对整个图片的内容和头做调整,这样就会很复杂。
可以用photoshop 吧,有个选项是可以把吐脯氨限制在100kb以内
后台吧,前段不太能做,及时能做也非常复杂。后台用ffmpeg之类的视频工具就行了。
一般的话控制尺寸都会使用裁剪插件,变形,变形是不可能的,怎么会做变形的操作呢,日常操作都是用限制比例,限制宽高也行.Cropper.js