类似微信预览缩放保存插件previewImage.js

这篇具有很好参考价值的文章主要介绍了类似微信预览缩放保存插件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];

            }

        }


    })()文章来源地址https://www.toymoban.com/news/detail-500505.html

到了这里,关于类似微信预览缩放保存插件previewImage.js的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包