关键词：
先上一张图：
以上图片是js几乎所有图片类型的转换方式了。接下来讲讲几种常用的类型转换：
1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含一个Image对象的参数，代码如下：
function urltoImage (url,fn)
var img = new Image();
img.src = url;
img.onload = function()
fn(img);
;
2、 imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入一个Image对象，代码如下：
function imagetoCanvas(image)
var cvs = document.createElement("canvas");
var ctx = cvs.getContext(‘2d‘);
cvs.width = image.width;
cvs.height = image.height;
ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
return cvs ;
;
3、 canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量; fn 为回调方法，包含一个 Blob 对象的参数;代码如下：
function canvasResizetoFile(canvas,quality,fn)
canvas.toBlob(function(blob)
fn(blob);
,‘image/jpeg‘,quality);
;
这里的 Blob 对象表示不可变的类似文件对象的原始数据。 Blob 表示不一定是 JavaScript 原生形式的数据。 File 接口基于 Blob ，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做File类型对待，其他更具体的用法可以参考MDN文档。
4、 canvasResizetoDataURL(canvas,quality) 会将一个 Canvas 对象压缩转变为一个 dataURL 字符串,其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量;代码如下：
methods.canvasResizetoDataURL = function(canvas,quality) return canvas.toDataURL(‘image/jpeg‘,quality); ;
5、 filetoDataURL(file,fn) 会将 File （ Blob ）类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File （ Blob ）类型文件; fn 为回调方法，包含一个 dataURL 字符串的参数;代码如下：
function filetoDataURL(file,fn)
var reader = new FileReader();
reader.onloadend = function(e)
fn(e.target.result);
;
reader.readAsDataURL(file);
;
6、 dataURLtoImage(dataurl,fn) 会将一串 dataURL 字符串转变为 Image 类型文件,其中 dataurl 参数传入一个 dataURL 字符串, fn 为回调方法，包含一个 Image 类型文件的参数，代码如下：
function dataURLtoImage(dataurl,fn)
var img = new Image();
img.onload = function()
fn(img);
;
img.src = dataurl;
;
7、 dataURLtoFile(dataurl) 会将一串 dataURL 字符串转变为 Blob 类型对象，其中 dataurl 参数传入一个 dataURL 字符串,代码如下：
function dataURLtoFile(dataurl)
var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--)
u8arr[n] = bstr.charCodeAt(n);
return new Blob([u8arr], type:mime);
;
以上7种转换基本可以覆盖所有类型转换了，下面看下JS等比压缩图片的办法：
function proDownImage(path,imgObj) // 等比压缩图片工具
//var proMaxHeight = 185;
var proMaxHeight=300;
var proMaxWidth = 175;
var size = new Object();
var image = new Image();
image.src = path;
image.attachEvent("onreadystatechange",
function() // 当加载状态改变时执行此方法,因为img的加载有延迟
if (image.readyState == "complete") // 当加载状态为完全结束时进入
if (image.width > 0 && image.height > 0)
var ww = proMaxWidth / image.width;
var hh = proMaxHeight / image.height;
var rate = (ww < hh) ? ww: hh;
if (rate <= 1)
alert("imgage width*rate is:" + image.width * rate);
size.width = image.width * rate;
size.height = image.height * rate;
else
alert("imgage width is:" + image.width);
size.width = image.width;
size.height = image.height;
imgObj.attr("width",size.width);
imgObj.attr("height",size.height);
);
参考：
https://blog.csdn.net/twtcqw2008/article/details/80766914
ts图片类型转换base64,url,file
...('crossOrigin','Anonymous');Img.onload=asyncfunction()constcanvas=document.createElement('canvas');constwidth=Img;constheight=Img;canvas.width=width;canvas.height=height;canvas.getContext('2d')!.drawImage(Img,0,0,width,height);dataURL=canvas.toDataURL('image/jpeg&... 查看详情
图片压缩canvas
...e">上传的文件；使用FileReader读取图片，并新建一个Image对象将FileReader读取的图片数据放进去；使用canvas将Image对象等比缩放并写入到画布中，保存为base64格式的数据（这里使用的是FormData对象上传，其实这里已经可以直接将base... 查看详情
canvas将图片转成base64格式以及验证图片是否透明(代码片段)
...mg.src=e.target.result;self.isAlphaBackground=false;//缩放图片需要的canvasvarcanvas=document.createElement(‘canvas‘);varcontext=canvas.getContext(‘2d‘);//base64地址图片加载完毕后img.onload=function()//图片原始尺寸varoriginWidth=this.width;varoriginHeight=this.height;//c... 查看详情
js压缩上传图片base64长度
...taURL(img);方法,在其onload事件中,将用户选择的图片读入Image对象.2)在image对象的onload事件中,通过canvas的canvas.getContext(‘2d‘) 的drawImage方法,将Image改变大小绘制到canvas上 查看详情
上传图片转换格式为base64并预览
...64()letfileObj=document.getElementById(‘fileEl‘).files[0]//获取文件对象letreader=newFileReader()//新建一个FileReader对象reader.readAsDataURL(fileObj)//将读取的文件转换成base64格式reader.onload=function(e)document.getElementById(‘img‘).src=e.target.result//将img标签... 查看详情
javascript将base64转换为file(代码片段)
在JavaScript中，可以使用Blob对象将base64字符串转换为File对象。在JavaScript中，可以使用Blob对象将base64字符串转换为File对象。 方法一（推荐，但存在兼容性问题）：首先,你需要从base64字符串中获取文件类型,然后将文件类型和b... 查看详情
base64转file对象兼容性问题
参考技术A1、直接将base64转file对象（有兼容问题）（ieedge360兼容模式）//将base64转换成file对象functiondataURLtoFile(dataurl,filename)vararr=dataurl.split(','),mime=arr[0].match(/:(.*?);/)[1], bstr=atob(arr[1]),n=bstr.length,u8arr=newUint8Ar... 查看详情
文件file对象转换为base64格式数据
functiongetBase64(file)returnnewPromise(function(resolve,reject)letreader=newFileReader()letimgResult=‘‘reader.readAsDataURL(file)reader.onload=function()imgResult=reader.resultreader.onerror=func 查看详情
jsbase64与canvasbase64
参考技术A获取到上传的文件myfile，创建一个fileRead文件对象，使用readAsDataURL方法可以将读取到的文件编码成DataURL。文件加载成功后，e.target.result就是文件图片所对应的base64编码。直接赋值给img的src，就能显示图片。下面是onload... 查看详情
canvas使用canvas压缩图片大小
...，返回base64fn*/functionchangeFileToBaseURL(file,fn)//创建读取文件对象varfileReader=newFileReader();//如果file没定义返回nullif(file==undefined)returnfn(null);//读取file文件,得到的结果为base64位fileReader.readAsDataURL(file);fileReader.onload=function()//把读取到的ba... 查看详情
js将图片转换为base64
varimg="imgurl";//imgurl就是你的图片路径functiongetBase64Image(img){varcanvas=document.createElement("canvas");canvas.width=img.width;canvas.height=img.height;varctx=canvas.getContext("2d");ctx.drawImage(img, 查看详情
js将base64转回图片格式
...imgurl";//imgurl就是你的图片路径functiongetBase64Image(img)varcanvas=document.createElement("canvas");canvas.width=img.width;canvas.height=img.height;varctx=canvas.getContext("2d");ctx.drawImage(img,0,0,img.width,img.height);varext=img.src.substring(img.src.lastIndex... 查看详情
js将图片转换为base64
直接上代码：varimg="imgurl";//imgurl就是你的图片路径functiongetBase64Image(img){varcanvas=document.createElement("canvas");canvas.width=img.width;canvas.height=img.height;varctx=canvas.getContext("2d");ctx.drawImag 查看详情
base64位转化为图片url
参考技术A***base64位地址其实也可以直接放在img的src回显1.在created生命周期调用查看接口，得到base64位后，先得到file对象2.得到url 查看详情
计算上传base64文件大小(代码片段)
1//计算文件大小2functionfile_size($base64)34$base64_image=str_replace(‘‘,‘+‘,$base64);5if(preg_match(‘/^(data:s*audio/(w+);base64,)/‘,$base64_image,$result))6$base_img=str_replace($result[1],‘‘,$base64_image);7$base_img=str_replace(‘=‘,‘‘,$base_img);8$img_len=strlen($ba... 查看详情
javascript把项目本地的图片或者图片的绝对路径转为base64字符串blob对象在上传
...目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传。用处： 从本地选择图片上传，如项目规定只能选择本项目文件夹下的图像上传为头像等。主要思想： 使用canvas.toDataURL()方法将图片的绝对路径转换为ba... 查看详情
阿里二面：get请求能传图片吗？(代码片段)
...知道的是，图片一般有两种传输方式：base64和file对象。base64图片图片的base64编码想必大家都见过：base64的本质是字符串，而GET请求的参数在url里面，所以直接把图的base64数据放到url里面，就可以实现GET请... 查看详情
将图像数据uri（base64）设置为画布背景(代码片段)
我正在使用Fabric.js。我在页面上有一个视频，我正在使用canvas元素将其转换为图像。并使用canvas.toDataURL()给我正确的base64视频图像。现在我想将此图像数据URI添加为同一画布的背景图像。我正在使用此代码执行此操作：varimg=newIm... 查看详情