小白提问:js中的函数参数调用为id,新增其他模块如何复用该函数?

在做一个电子签名的页面,需要能新增多个签名框,现在新增后的框要如何复用之前调用 id 来使用的函数呢?
签名的代码如下

$(function() {// 初始化内容
        $("#canvasEdit").attr("width" ,$("#editing_area").innerWidth()-1 );
        //初始化动作,根据DOM的ID不同进行自定义,如果不写则内部默认取这四个
        $().esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
        //处理结果
        $("#result").val($('#t1').text());
        $('#t1').click(function () {
            $("#result").val($('#t1').text());
        });
        $('#t2').click(function () {
            $("#result").val($('#t2').text());
        });

        //=======弹窗签名=======
        $('#btn').on('click', function(){
            $('#dialog').show();
        });

        $('#dialog').on('click', '.weui_btn_dialog', function(){
            $('#dialog').hide();
        });

        //-======上传图片==========================================
        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        var maxSize = 1024 * 1024*10; // 10240KB,也就是 10MB
        var maxWidth = 1900;  // 图片最大宽度
        var maxCount = 2;// 最大上传图片数量

        //
        var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)"><div class="weui_uploader_status_content">0%</div></li>',
            $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");

        $uploaderInput.on("change", function (e) {
            files = e.target.files;
            // 如果没有选中文件,直接返回
            if (files.length === 0) {
                return;
            }
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                var imgID = genGUID();
                var reader = new FileReader();
                var fileType = file.type;
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {

                    $.toast('该类型不允许上传' + fileType, "forbidden");
                    continue;
                }

                if (file.size > maxSize) {
                    $.toast("图片太大,不允许上传", "forbidden");
                    continue;
                }

                if ($('.weui-uploader__file').length >= maxCount) {
                    $.toast('最多只能上传' + maxCount + '张图片', "forbidden");
                    return;
                }


                reader.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL(fileType,0.6); //0.6指的是压缩60%

                        // 插入到预览区
                        $uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#ImgID#', imgID)));

                        var num = $('.weui-uploader__file').length;
                        $('#uploadCount').text(num);

                        // 模拟上传进度
                        var progress = 0;
                        function uploading() {
                            $uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%');
                            if (progress < 100) {
                                setTimeout(uploading, 30);
                            } else {
                                $uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标
                            }
                        }
                        setTimeout(uploading, 30);
                    };
                    //alert(e.target.result);
                    img.src = e.target.result;

                    //alert(img.src);
                    //这里实现上传
                    //$.ajax({});
                    uploadImg(img.src,"1");


                };
                reader.readAsDataURL(file);

            }
        });



        var index; //第几张图片
        $uploaderFiles.on("click", "li", function () {
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function () {
            $gallery.fadeOut(100);
        });

        //删除图片
        $(".weui-gallery__del").click(function () {
            $uploaderFiles.find("li").eq(index).remove();
            var num = $('.weui-uploader__file').length;
            $('#uploadCount').text(num);
        });
    });

    function uploadImg(base64Data,upLoadType){

        var url = "/mtwork/deliveryMan/uploadBase64Img";
        //alert(url);
        $.ajax({
            url:url,
            async: false,//同步
            type:"post",
            data:{myPhoto:base64Data},
            dataType:"JSON",
            success:function(data){
                if(upLoadType == "1"){
                    if($("#upLoadImg").val()==""){
                        $("#upLoadImg").val(JSON.parse(data.data).url);
                    }else{
                        $("#upLoadImg").val($("#upLoadImg").val()+";"+JSON.parse(data.data).url);
                    }
                }else{
                    $("#upLoadSign").val(JSON.parse(data.data).url);
                }
                //alert(JSON.parse(data.data).url);
                if(data.success == true){
                    console.log("上传成功");
                }else{
                    console.log("上传失败");
                }
            },
            error:function(){
                console.log("上传失败");
            }
        });
    }


    //生成guid
    function genGUID() {
        var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        return (G1 + G2);
    }
阅读 512
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题