技术笔记
一名已转行的程序员MUI相册单图上传,以及删除单图
2017-03-12 / 代码笔记 / 749 次围观 / 0 次吐槽
//删除图片 function gatdelImg(idname1,idname2,idname3) { var btnArray = ['确认', '取消']; mui.confirm('确认删除图片?', '温馨提示', btnArray, function(e) { if (e.index == 0) { $(idname1).hide(); $(idname2).show(); document.getElementById(idname3).src=''; } }); } // 添加文件 var f1 = null; function appendFile(path,imgid) { var img = new Image(); img.src = path; // 传过来的图片路径在这里用。 img.onload = function() { var that = this; //生成比例 var w = that.width, h = that.height, scale = w / h; w = 300 || w; //480 你想压缩到多大,改这里 h = w / scale; //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); $(canvas).attr({ width: w, height: h }); ctx.drawImage(that, 0, 0, w, h); var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8); //1最清晰,越低越模糊。有一点不清楚这里明明设置的是jpeg。弹出 base64 开头的一段 data:image/png;却是png。哎开心就好,开心就好 // alert(base64); f1 = base64; // 把base64数据丢过去,上传要用。 var pic = document.getElementById(imgid); pic.src = base64; //这里丢到img 的 src 里面就能看到效果了 } } //上传单张图片 function galleryImg(idname1,idname2,idname3) { plus.gallery.pick(function(path){ appendFile(path,idname3);//处理图片的地方 $(idname1).hide(); $(idname2).show(); }); }
调用方式:
<div class="logo_upload" id="logo-2" onclick="gatdelImg('#logo-2','#logo-1','logo_url')"><img src="" width="70" height="70" id="logo_url" ></div> <div class="logo_upload_add" id="logo-1" onclick="galleryImg('#logo-1','#logo-2','logo_url')"><span class="iconfont icon-tianjia"></span></div>
推荐您阅读更多有关于“”的文章
Powered By Z-BlogPHP
Copyright 技术笔记 Rights Reserved.
额 本文暂时没人评论 来添加一个吧
发表评论