vue将图片链接、本地图片转为二进制文件流
vue将图片链接转为二进制文件流应用场景:用户修改图片后会覆盖以前上传的图片,需将以前的的图片转为文件流与修改的图片一起上传1.需先将图片链接转为Base64imageUrlToBase64(imageUrl) {let image = new Image() // 一定要设置为let,不然图片不显示image.setAttribute('crossOrigin', 'anonymous') //
·
vue将图片链接转为二进制文件流
应用场景:用户修改图片后会覆盖以前上传的图片,需将以前的的图片转为文件流与修改的图片一起上传
1.需先将图片链接、本地图片转为Base64
imageUrlToBase64(imageUrl) {
let image = new Image() // 一定要设置为let,不然图片不显示
image.setAttribute('crossOrigin', 'anonymous') // 解决跨域问题
image.src = imageUrl +"&v=" + Math.random() // 如果是本地图片替换为 image.src = imageUrl
image.onload = () => {
var canvas = document.createElement("canvas")
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var quality = 0.8
var dataURL = canvas.toDataURL("image/jpeg", quality) // 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png,因为压缩成png后base64的字符串可能比不转换前的长!
this.base64toFile(dataURL)
}
}
2.再将base64转为文件流
base64toFile (dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
let file = new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
console.log(file)
}
如果有更好的方式请跟我留言,谢谢!
二更 文件流转bese64
let reader = new FileReader();
reader.readAsDataURL('文件流');
reader.onload = function(e) {
let base64String = e.target.result;
console.log("bese64编码:", base64String);
}
更多推荐
已为社区贡献4条内容
所有评论(0)