摘要:有时候,我们不想通过上传本地图片的方式上传图片,而是通过相机拍照,将这个拍照后的图片直接上传到服务器上,不需要保存到本地。现在我们来通过的或者方法对象对象来通过上传图片。
有时候,我们不想通过上传本地图片的方式上传图片,而是通过相机拍照,将这个拍照后的图片直接上传到服务器上,不需要保存到本地。
比如,用video模拟一个摄像头,通过webrtc调用摄像头的方式拍一张照,然后通过canvas通过getContext("2d")获取的绘图对象CanvasRenderingContext2D的drawImage(video, x, y, width, heigth)方法将video图像通过canvas直接画到html页面上,用来呈现拍照后的结果。
通常的做法是用
的方式上传图片的。但这种方式是要求图片具体存在的,本地或者url路径上的。
现在我们来通过canvas的toDataURL或者toBlob方法、File对象、FormData对象来通过ajax上传图片。
- // 调用摄像头的代码省略...
- let video = document.querySelector("#video")
- let canvas = document.querySelector("#canvas")
- let context = canvas.getContext("2d")
- context.drawImage(video, 0, 0, 300, 150) // 将video标签的图片画到canvas上
- // 正片开始
- // 通过canvas调用toBlob方法获取blob对象,传入一个回调函数,这个回调函数的参数就是blob对象
- let s = canvas.toBlob(function (blob) {
- /*
- * 注意第一个File的构造方法第一个参数必须要用[]包起来,表明这是一个数组
- * 第二个参数是这个文件名
- * 第三个参数是选项,其中通过type指定这个文件的mime值
- */
- let file2 = new File([blob], "a.jpg", {type: "image/jpg"})
- // ajax上传文件不能像上传普通对象那样,得用上FormData
- let formData = new FormData()
- formData.append("file", file2)
- $.ajax({
- url: "/a", // 后台接口
- type: "POST",
- processData: false, // processData和contentType必须指定为false
- contentType: false,
- cache: false,
- data: formData,
- success(res) {
- console.log("上传完成!")
- }
- })
- });
第二种方式,通过base64转码,这里只看js代码
这是canvas调用toDataURL方法将图片base64编码
</>code
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
</>code
@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/106638.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...
阅读 1621·2021-11-25 09:43
阅读 4191·2021-11-15 11:37
阅读 3327·2021-08-17 10:13
阅读 3593·2019-08-30 14:16
阅读 3656·2019-08-26 18:37
阅读 2563·2019-08-26 11:56
阅读 1234·2019-08-26 10:42
阅读 722·2019-08-26 10:39