类似微信预览缩放保存插件previewImage.js
很好用的预览缩放保存插件。
插件源码如下：
(function(){
let insideObject = {
// 'inputId' : '' // 用于页面多图片预览时绑定相应预览图片
'inputName':'plantIconPath', // 用于表单提交
'imageId':'preview_img', // 用于预览图片的渲染
'defaultImgPath' : "", // 用于未选择图片时显示默认图片
'bingding' : {} // 用于多个预览图片时绑定对应按钮和图片标签 结构为 按钮ID: 图片ID
}
let canInit = false;
window.previewImageCustom = function (Element){
let currentImageId = null;
if (JSON.stringify(insideObject.bingding) != "{}") {
for(let key in insideObject.bingding){
if (Element.id == key) {
currentImageId = insideObject.bingding[key];
}
}
if (currentImageId == null) { console.warn("您绑定的ID不存在，可能导致无法选择正确的预览图标签！"); }
}
else{
currentImageId = insideObject.imageId;
}
if (!canInit) { console.warn("您未执行初始化方法，预览图片的标签可能无法正确渲染！") }
// 寻找预览图片组件
let perviewImage = document.getElementById(currentImageId);
if (perviewImage == "" || perviewImage == undefined) { console.error('未找到预览图片标签，请检查初始化函数参数是否正确！'); return;}
if (perviewImage.tagName != 'IMG' && perviewImage != 'img' ) { console.error('预览组件需要是img标签，请检查是否有重复的id元素！'); return; }
let inputFile = document.getElementById(currentImageId+Element.id);
if (!inputFile) {
// input 组件定义
inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.id = currentImageId+Element.id;
inputFile.accept = 'image/png,image/gif,image/jpeg,video/mp4';
inputFile.name = insideObject.inputName; //'plantIconPath';
inputFile.style.width = 0+'px';
inputFile.style.height = 0+'px';
inputFile.onchange = function(){
// previewFile();
let reader = new FileReader();
reader.onloadend = function (){
perviewImage.src = reader.result;
}
if (inputFile.files[0]) {
reader.readAsDataURL(inputFile.files[0]);
}
else {
perviewImage.src = insideObject.defaultImgPath;
}
}
Element.parentNode.appendChild(inputFile);
}
inputFile.click();
}
window.previewImageInit = function(obj){
canInit = true;
for(let key in obj){
insideObject[key] = obj[key];
}
}
})()