技术笔记

一名已转行的程序员
当前位置:网站首页 / 代码笔记 / 正文

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>


推荐您阅读更多有关于“”的文章

本站所有文章如无特别注明均为原创。作者:程序员小邓 ,复制或转载请以超链接形式注明转自 技术笔记
原文地址《MUI相册单图上传,以及删除单图
额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP

Copyright 技术笔记 Rights Reserved.