当前位置:首页 > 电脑知识 > 正文内容

速看(js将图片转换为二进制流)js将图片转换为webp,js将图片转换为base64编码方法,js将图片转换为base64编码方法,

sauo3年前 (2022-09-17)电脑知识119

js可以将图片文件转成base64编码的,便于图片文件的上传与处理,下面就写几种关于js脚本来转换图片为base64编码的方法。

js将图片转换为base64编码的方法

方法1

将自身网站的图片转成base64编码格式,但需要注意的是,是不能处理远程图片的,会产生一个跨域的问题。

PHP
//转换图片为base64函数 function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = canvas.toDataURL("image/"+ext); return dataURL; } var image = new Image(); image.src = 图片路径; image.setAttribute("crossOrigin",Anonymous) image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); }复制

方法2:

前台通过file类型的input选择本地图片时,自动将本地选择的图片转成base64编码格式,下面的示例代码借助的jq插件,如果不想借助jq插件,可以自行修改一下。

PHP
<input type="file" name="" id="mochu" /> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <script> $(body).on(change,#mochu,function(){ var file = document.getElementById(mochu).files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { console.log(reader.result); }, false); reader.readAsDataURL(file); });复制

本文链接:http://blog.sauo.top/?id=281 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=281

分享给朋友:

“速看(js将图片转换为二进制流)js将图片转换为webp,js将图片转换为base64编码方法,js将图片转换为base64编码方法,” 的相关文章

硬核推荐(ubuntu取消自动休眠)ubuntu关闭自动休眠命令,ubuntu 关闭自动休眠模式的方法,ubuntu 关闭自动休眠模式的方法,

硬核推荐(ubuntu取消自动休眠)ubuntu关闭自动休眠命令,ubuntu 关闭自动休眠模式的方法,ubuntu 关闭自动休眠模式的方法,

免费领取腾讯云服务器! 在使用ssh连接ubuntu系统时,发现长时间不输入ssh命令ssh就会自动断开。查找了一下原因,发现是安装ubuntu的电脑自动进入了休眠模式,而ubuntu系统中有多种关闭自动休眠的方法,下面就来说一说使用ssh命令来关闭ubu...

全程干货(查看php是否启动)查看php是否支持rar解压,查看php是ts版本还是nts版本的方法,查看php是ts版本还是nts版本的方法,

全程干货(查看php是否启动)查看php是否支持rar解压,查看php是ts版本还是nts版本的方法,查看php是ts版本还是nts版本的方法,

免费领取腾讯云服务器! 今天有用户来询问php的ts版本与php的nts版本的区别是什么,怎么去查看自己安装的php服务是ts版本还是nts版本,下面博文就来详细的说一下。 php ts版本与nts版本的区别 php官方提供...

这都可以(php保存网络图片到本地)php下载图片到本地,php保存图片到本地的方法,php保存图片到本地的方法,

免费领取腾讯云服务器! 下面列几种网上收集的利用php脚本将远程图片保存至本地的方法,各位自行测试代码是否可用,另外php保存远程图片到本地并不能确保百分百的一定会拉取到远程图片的数据。 php保存远程图片到本地的方法 方法...

干货分享(php输出json中文乱码)json数据中文乱码怎么办,解决 php json中文乱码的问题,解决 php json中文乱码的问题,

免费领取腾讯云服务器! php输出使用json_encode函数生成的json数据的时候,发现数据中的中文被转义成了unicode编码,如果使用ajax请求的json数据还好一点,浏览器会自动将unicode编码转义回来,但如果直接输出到浏览器上,那就会直...

一看就会(imagefilter过滤图像方法)php imagefill,php imagefilter()图片滤镜函数的用法与示例,php imagefilter()图片滤镜函数的用法与示例,

一看就会(imagefilter过滤图像方法)php imagefill,php imagefilter()图片滤镜函数的用法与示例,php imagefilter()图片滤镜函数的用法与示例,

免费领取腾讯云服务器! 有个小需求,需要使用php代码对图片进行颜色调整,比如变成灰色,改变图片的亮度,对比度等等。而php中就内置了一个图片的滤镜函数 imagefilter() ,下面就来具体说说这个函数的用法。 php imagefi...

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

免费领取腾讯云服务器! 上两篇博文,分别写了在window系统下获取文件md5值的方法与mac苹果系统下获取文件md5值的方法,今天这篇博文就写一下在linux系统下获取文件md5值的方法。 Linux系统下获取文件md5值的方法...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。