vue将图片链接转为二进制文件流

应用场景：用户修改图片后会覆盖以前上传的图片，需将以前的的图片转为文件流与修改的图片一起上传

1.需先将图片链接、本地图片转为Base64

imageUrlToBase64(imageUrl) {let image = new Image() // 一定要设置为let，不然图片不显示image.setAttribute('crossOrigin', 'anonymous') // 解决跨域问题image.src = imageUrl +"&v=" + Math.random() // 如果是本地图片替换为 image.src = imageUrlimage.onload = () => {var canvas = document.createElement("canvas")canvas.width = image.widthcanvas.height = image.heightvar context = canvas.getContext('2d')context.drawImage(image, 0, 0, image.width, image.height)var quality = 0.8var 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.lengthlet 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);
}

vue将图片链接、本地图片转为二进制文件流相关推荐

vue 动态获取的图片路径不显示_解决Vue动态加载本地图片问题
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png' ...
vue使用v-for遍历本地图片不显示
vue使用v-for遍历本地图片不显示的问题 1.项目中本地有一组图片需要循环遍历展示,在使用v-for遍历之后发现无法展示图片,解决方法如下. 2.首先,正常的图片路径如下,但是想要展示不能按正常的 ...
php 网络图片转本地,PHP将Base64图片转换为本地图片并保存
PHP将Base64图片转换为本地图片并保存 /** * [将Base64图片转换为本地图片并保存] * @param [Base64] $base64_image_content [要保存的Base ...
vue导入及使用本地图片
MSite.vue导入本地图片图片所在位置: 1.直接使用 <template><img src="./image/1.jpg"/> </tempa ...
base64链接转为地址php,php将图片链接转换为base64编码文件流
/** * 图片链接转换为 base64 文件流 * @param $imgUrl * @return string */ function img_url_to_base64($imgUrl) { ...
vue如何动态渲染本地图片img
动态渲染本地图片 <div class="wrap_left" v-for="item of array" :key="item.id" ...
Futter基础第3篇：实现引用远程图片、本地图片、实现圆形图片，实现圆角图片【Image.network、Image.asset、BorderRadius.circular（150）】
文章目录一丶效果图二丶代码+注释三丶知识点一丶效果图 [1]引用远程图片 [2]引用本地图片 [3]实现圆形图片(方法一).圆角图片(受弧度影响) [4]实现圆形图片(方法二) 二丶 ...
Java修改图片大小尺寸图片缩放（URL图片和本地图片）
方式一:使用Image.getScaledInstance 使用jdk的awt包下的Image.getScaledInstance实现图片的缩放.好处是无需引入第三方jar,缺点是会稍微有点模糊. 工 ...
php将图片链接转换为base64编码文件流
/** * 图片链接转换为 base64 文件流 * @param $imgUrl * @return string */ function img_url_to_base64($imgUrl) {$ ...
正则表达式提取markdown中图片链接(提取图片链接作为文章首图)
网上搜使用正则表达式提取md中的图片链接作为文章首图没找到好用的只好自己写了一个最大缺点要自己去除括号只能获取最后一个的url 以后有空再搞 let url = markdown.repla ...

vue将图片链接、本地图片转为二进制文件流

vue将图片链接转为二进制文件流

1.需先将图片链接、本地图片转为Base64

2.再将base64转为文件流

二更文件流转bese64

vue将图片链接、本地图片转为二进制文件流相关推荐

最新文章

热门文章

vue将图片链接、本地图片转为二进制文件流

vue将图片链接转为二进制文件流

1.需先将图片链接、本地图片转为Base64

2.再将base64转为文件流

二更 文件流转bese64

vue将图片链接、本地图片转为二进制文件流相关推荐

最新文章

热门文章

二更文件流转bese64