js,JQ 图片转换base64 base64转换为file对象,blob对象

//将图片转换为Base64 --2019-8-21更新,加注释
//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对象 getImgToBase64('images/ruoshui.png',function(data){    var myFile = dataURLtoFile(data,'testimgtestimgtestimg');    console.log(myFile); });

toDataURL函数说明(可以压缩图片) --2019-8-21添加

canvas.toDataURL(type, encoderOptions);
   type 可选
       图片格式,默认为 image/png
   encoderOptions 可选
       在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略

参考网址:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

上传图片的时候只需要将File对象或者Blob对象追加到FormData对象即可 ( 相关文章: https://www.cnblogs.com/wangzhaobo/p/8962085.html );2019-10-23更新加链接

有不懂的地方可以留言, 或者联系博主.

posted @ 2018-06-14 23:43  王召波  阅读(...)  评论(...编辑  收藏
支付宝捐赠 微信打赏
欢迎资助我持续写作,金额随意,欢迎来赏!