js 将base64转回图片格式
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 将base64转回图片格式相关的知识,希望对你有一定的参考价值。
如题,求高手解答!
求大神给方法啊,js将已经获取到base64的图片,还原成JPG或者PNG的图片文件格式,例XXX.jpg或者xxx.png
var img = "imgurl";//imgurl 就是你的图片路径
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 = img;
image.onload = function()
var base64 = getBase64Image(image);
console.log(base64);
追问
有几个方法找不到啊,drawImage,这个方法,有更完整的例子吗?有的话联系我,346751186
js对图片进行质量压缩后上传服务器
基本的原理就是将图片格式转换成base64格式的,进行压缩,然后再转回固定格式的图片文件,大的形式是以form表单形式进行后台交互的,但里面会new一个form和一个XMLHttpRequest对象,这样可以弥补form表单提交文件没有失败返回的空缺,当限制使用jquery里的AjaxForm的时候,这也是一个很好的选择。
var bl = convertBase64UrlToBlob(base64Codes); form.append("fileupload", bl, "file_"+Date.parse(new Date())+".jpg")
以下代码是压缩图片的源码,项目里面可以直接拿来复用的:
var xhr; var fileObj = document.getElementById("postPic").files[0]; // js 获取文件对象 var url = ctx+‘/ucenter/activityZp/uploadFileDataAjax‘;//后台接口地址 var form = new FormData(); // FormData 对象 form.append("act_id",id); form.append("studentIdAndSchoolId",studentId); //alert("原始大小===="+fileObj.size/1024); if(fileObj.size/1024 > 2048) { //大于2M,进行压缩上传 photoCompress(fileObj, { quality: 0.5//压缩比例 }, function(base64Codes){ var bl = convertBase64UrlToBlob(base64Codes); form.append("fileupload", bl, "file_"+Date.parse(new Date())+".jpg"); xhr = new XMLHttpRequest(); // XMLHttpRequest 对象 xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。 xhr.onload = uploadComplete; //请求完成 xhr.onerror = uploadFailed; //请求失败 xhr.send(form); //开始上传,发送form数据 //alert("压缩过") }); }else { photoCompress(fileObj, { quality: 1 }, function(base64Codes){ var bl = convertBase64UrlToBlob(base64Codes); form.append("fileupload", bl, "file_"+Date.parse(new Date())+".jpg"); xhr = new XMLHttpRequest(); // XMLHttpRequest 对象 xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。 xhr.onload = uploadComplete; //请求完成 xhr.onerror = uploadFailed; //请求失败 xhr.send(form); //开始上传,发送form数据 }); }
注意:代码里面点击input的时候,触发选中照片以后,触发以上的压缩图片事件,过程中会new FormData,生成另外一个input,如果同一张图片上传两次,并且都失败,这样就会有可能触发两次交互,导致接口重复调用,以及第二次状态提示框点击事件失效,最好在第一次完成以后刷新当前页面或者找方法销毁这个formdata;
<div id="inputReset"> <input type="file" name="fileupload" accept="image/*" id="postPic" onchange="loadImg()"> </div>
以上是关于js 将base64转回图片格式的主要内容,如果未能解决你的问题,请参考以下文章