js获取图片的base64编码并压缩

获取图片的base64编码

<!DOCTYPE html><html><head><meta charset=\"gbk\"><title></title></head><body><input accept=\"image/*\" name=\"upimage\" id=\"upload_file\" type=\"file\" onchange=\"gen_base64()\">　　　　　<br/><textarea id=\"base64_output\" name=\"Word\" style=\" width:820px\"></textarea>　　　　 <br/>　　　　　<img src=\"\" id=\"myImg\" /><script type=\"text/javascript\">function $_(id) {return document.getElementById(id);}function gen_base64() {var file = $_(\'upload_file\').files[0];r = new FileReader(); //本地预览r.onload = function(){$_(\'base64_output\').value = r.result;　　　　　　　　　　　　 $_(\'myImg\').src= r.result;}r.readAsDataURL(file);  //Base64}</script></body></html>

案例2：js压缩图片

<html><body><script>function getUrl(fil) {var Cnv = document.getElementById(\'myCanvas\');var Cntx = Cnv.getContext(\'2d\');//获取2d编辑容器var imgss =  new Image();//创建一个图片var agoimg=document.getElementById(\"ago\");for (var intI = 0; intI < fil.length; intI++) {//图片回显var tmpFile = fil[intI];var reader = new FileReader();reader.readAsDataURL(tmpFile);reader.onload = function (e) {url = e.target.result;imgss.src = url;agoimg.src=url;agoimg.onload = function () {//等比缩放var m = imgss.height / imgss.width;Cnv.width = 300 ;//该值影响缩放后图片的大小Cnv.height =300*m;//img放入画布中Cntx.drawImage(agoimg, 0, 0,300,300*m);　　　　//把画布中的数据，写出到某img的src里var Pic = document.getElementById(\"myCanvas\").toDataURL(\"image/png\");var imgs =document.getElementById(\"press\");imgs.src =Pic ;}}}}</script><input type=\"file\" id=\"fileId\" name=\"fileId\" value=\"上传图片\" hidefocus=\"true\" onchange=\"getUrl(this.files);\"/>   <br/><canvas id=\"myCanvas\"   style=\"display: block\" ></canvas>old img::<img src=\"\" alt=\"\" id=\"ago\" style=\"width: 500px;\"/>new img::<img src=\"\" alt=\"\" id=\"press\"/></body></html>

效果图