摘要:有时候,我们不想通过上传本地图片的方式上传图片,而是通过相机拍照,将这个拍照后的图片直接上传到服务器上,不需要保存到本地。现在我们来通过的或者方法对象对象来通过上传图片。
有时候,我们不想通过上传本地图片的方式上传图片,而是通过相机拍照,将这个拍照后的图片直接上传到服务器上,不需要保存到本地。
比如,用video模拟一个摄像头,通过webrtc调用摄像头的方式拍一张照,然后通过canvas通过getContext("2d")获取的绘图对象CanvasRenderingContext2D的drawImage(video, x, y, width, heigth)方法将video图像通过canvas直接画到html页面上,用来呈现拍照后的结果。
通常的做法是用
的方式上传图片的。但这种方式是要求图片具体存在的,本地或者url路径上的。
现在我们来通过canvas的toDataURL或者toBlob方法、File对象、FormData对象来通过ajax上传图片。
第二种方式,通过base64转码,这里只看js代码
这是canvas调用toDataURL方法将图片base64编码
let base64 = canvas.toDataURL(); // 同样通过canvas的toDataURL方法将canvas图片Base64编码 let bstr = atob(base64.split(",")[1]); // atob是将base64编码解码,去掉data:image/png;base64,部分 let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } // 写法同上 let file2 = new File([u8arr], "a.jpg", {type: "image/jpg"}) let formData = new FormData() formData.append("file", file2) console.log(formData) $.ajax({ url: "/a", type: "POST", processData: false, contentType: false, cache: false, data: formData, success(res) { console.log("上传完成!") } })
其上两种写法皆可
下面是后台代码,这里用的是java
@Controller public class IndexCtronller { @RequestMapping(value = "/a", method = RequestMethod.POST) public ResponseEntity index(MultipartFile file) { // 通过MultipartFile对象接收文件 String contextPath = "C:UsersdaggerDesktop"; // 上传文件路径 File file1 = new File(contextPath, "a.jpg"); try { file.transferTo(file1); // 将文件保存到服务器桌面 } catch (IOException e) { e.printStackTrace(); } return null; } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/76016.html
摘要:有时候,我们不想通过上传本地图片的方式上传图片,而是通过相机拍照,将这个拍照后的图片直接上传到服务器上,不需要保存到本地。现在我们来通过的或者方法对象对象来通过上传图片。 有时候,我们不想通过上传本地图片的方式上传图片,而是通过相机拍照,将这个拍照后的图片直接上传到服务器上,不需要保存到本地。比如,用video模拟一个摄像头,通过webrtc调用摄像头的方式拍一张照,然后通过canva...
摘要:哈哈主要还是我嫌麻烦四上传图片这里的页面样式,图片压缩和预览都和上面一样,这里我主要配置一下的,让接口能够成功上传。如果想让用户有更好的体验,可以对图片进行一下压缩和本地预览。 一、通过Form表单提交上传 HTML enctype属性必不可少 上面一种方法通过表单自有属性进行提交,看似简单,但是也有其最大的缺点,那就是提交...
摘要:哈哈主要还是我嫌麻烦四上传图片这里的页面样式,图片压缩和预览都和上面一样,这里我主要配置一下的,让接口能够成功上传。如果想让用户有更好的体验,可以对图片进行一下压缩和本地预览。 一、通过Form表单提交上传 HTML enctype属性必不可少 上面一种方法通过表单自有属性进行提交,看似简单,但是也有其最大的缺点,那就是提交...
公司最近有需要压缩上传图片功能,查找了些资料并实现了一把。 主要用到的原生组件:FileReader、Canvas、Blob、FormData 逻辑步骤: FileReader.readAsDataURL将上传的图片文件转为Base64格式 将img绘制到canvas上,canvas.toDataURL压缩图片 new Blob将压缩后的Base64转为Blob格式 FormData.appen...
阅读 2849·2021-10-26 09:49
阅读 3181·2021-10-14 09:42
阅读 1963·2021-09-13 10:31
阅读 2532·2019-08-30 11:13
阅读 2922·2019-08-29 16:31
阅读 1025·2019-08-29 13:58
阅读 1819·2019-08-29 12:12
阅读 3511·2019-08-26 13:48