图片上传、转换等问题总结

 1 本地图片: 2 <input type="file" id="image"><br/> 3 ?4 ????var reader = new FileReader(); 5 ?????????var AllowImgFileSize = 2100000; // 上传图片最大值（单位字节）（2m） 6 ?????????var file = $("#image")[0].files[0]; 7 ?????????var imgUrlBase64; 8 ?????????if (file) { 9 ?????????????// 将文件以Data URL形式读入页面10 ?????????????imgUrlBase64 = reader.readAsDataURL(file);11 ?????????????reader.onload = function (e) {12 ?????????????????// var ImFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length; //截取base64码部分（可选可不选，需要与后台沟通）13 ?????????????????if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {14 ?????????????????????alert(‘上传失败，请上传不大于2M的图片‘);15 ?????????????????????return;16 ?????????????????}else{17 ?????????????????????// 执行上传操作18 ?????????????????????alert(reader.result);19 ?????????????????}20 ?????????????}21 ?????????}22 23 24 项目中的图片,本地相对路径的图片25 26 function(){27 ????var url = "static/img/js1.jpg"; // 这是站内的一张图片资源，采用相对路径28 ????convertImgToBase64(url, function(base64Img) {29 ????????//转化后的base6430 ????????alert(base64Img)31 ????})32 }33 34 // 实现将项目的图片转化成base6435 36 function convertImgToBase64(url, callback, outputFormat){37 ????var canvas = document.createElement(‘CANVAS‘),38 ????????ctx = canvas.getContext(‘2d‘),39 ????????img = new Image;40 ????????img.crossOrigin = ‘Anonymous‘;41 ????????img.onload = function(){42 ????????????canvas.height = img.height;43 ????????????canvas.width = img.width;44 ????????????ctx.drawImage(img,0,0);45 ????????????var dataURL = canvas.toDataURL(outputFormat || ‘image/png‘);46 ????????????canvas = null;47 ????????}48 ????????img.src = url;49 }50 51 网络图片资源转化为base6452 function() {53 ????//这是网上的一张图片链接54 ????var url="http://pl.pstatp.com/large/435d000085555bd8de10";55 ????getBase64(url)56 ????????.then(function(base64){57 ????????????console.log(base64); //处理成功打印在控制台58 ????????}), function(err) {59 ????????console.log(err); // 打印异常信息60 ????});61 }62 63 //传入图片路劲，返回base6464 function getBase64(img){65 ????function getBase64Image(img,width,height) { //width、height调用时传入具体像素值，控制大小，不传则默认图像大小66 ????????var canvas = document.createElement("canvas");67 ????????canvas.width = width ? width: img.width;68 ????????canvas.height = height ? height : img.height;69 70 ????????var ctx = canvas.getContext("2d");71 ????????ctx.drawImage(img, 0, 0, canvas.width, canvas.height);72 ????????var dataURL = canvas.toDataURL();73 ????????return dataURL;74 ????}75 ????var image = new Image();76 ????image.crossOrigin = ‘‘;77 ????image.src = img;78 ????var deferred = $.Deferred();79 ????if(img){80 ????????image.onload = function(){81 ????????????deferred.resolve(getBase64Image(image)); //将base64传给done上传处理82 ????????}83 ????????return deferred.promise(); // 问题要让onload完成后再return sessionStorage[‘imgTest]84 ????}85 }