js,JQ 图片转换base64 base64转换为file对象,blob对象
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<pre class="inline:true class:language-javascript decode:1 " >//将图片转换为Base64 //url 图片连接或者是blob对象 //callback 回调函数 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var img = new Image;//经过构造函数来建立的 img 实例，在赋予 src 值后就会马上下载图片，相比 createElement() 建立 <img /> 省去了 append()，也就避免了文档冗余和污染 img.crossOrigin = 'Anonymous'; //要先确保图片完整获取到，这是个异步事件 img.onload = function(){ canvas.height = img.height;//确保canvas的尺寸和图片同样 canvas.width = img.width; ctx.drawImage(img,0,0);//将图片绘制到canvas中 var dataURL = canvas.toDataURL('image/png');//转换图片为dataURL,传第二个参数可压缩图片,前提是图片格式jpeg或者webp格式的 callback(dataURL);//调用回调函数 canvas = null; }; img.src = url; } //将base64转换为文件对象 function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } //转换成file对象 return new File([u8arr], filename, {type:mime}); //转换成成blob对象 //return new Blob([u8arr],{type:mime}); } //将图片转换为base64,再将base64转换成file对象<br /> getImgToBase64('images/ruoshui.png',function(data){<br /> var myFile = dataURLtoFile(data,'testimgtestimgtestimg');<br /> console.log(myFile); <br />}); |
toDataURL函数说明(能够压缩图片)
|
1 2 3 4 5 |
<pre class="inline:true class:language-javascript decode:1 " >canvas.toDataURL(type, encoderOptions); // type 可选 // 图片格式，默认为 image/png // encoderOptions 可选 // 在指定图片格式为 image/jpeg 或 image/webp的状况下，能够从 0 到 1 的区间内选择图片的质量。若是超出取值范围，将会使用默认值 0.92。其余参数会被忽略 |