先说背景:工作中遇到一个问题,file组件上传图片,file是可以上传n张图片;但是,后台逻辑历史原因,只能展现一张。因此:考虑到成本,决定在前端将多张图片合并成一张给后端。
先上代码
_mergeImage2Canvas:function() {
// 获取file上传和展现的图片。一般file上传之后,有个小图标展现。
var imgs = $(".img_files");
if (!imgs) {
return false;
}
// 创建原始图像
// 原因:file上传之后,展现往往是个缩略图,无法取到真正大小
for (var i = 0; i < imgs.length; i++) {
var fbwImg = document.createElement("img");
var fbwImgID = "temp_img_id" + i;
$("#" + fbwImgID).remove();
fbwImg.src = imgs[i].src;
fbwImg.className = "temp-img-class";
// 不显示,仅供调用
fbwImg.style.display = "none";
// 临时区域扩展
$("#temp_section").append(fbwImg);
}