美文网首页
图片上传自动转成base64

图片上传自动转成base64

作者: Creator93 | 来源:发表于2018-01-22 22:39 被阅读0次
/**
 * @author  mq 
 * 上传图片base64
 * @param {String} inputId 类型为file的input的id
 * @param {String} picWarpId 为返显选择的图片的容器id。
 * @param {Function} callback 。照片base64生成完成后的回调函数。
 * 
 * */
(function(window, XXX, undefined) {
    'use strict';
    var service = {};
    service.$uploadImg = ['$rootScope',
        function($rootScope) {
            return {
                uploadImg: function(inputId, picWarpId, callback) {
                    if(typeof picWarpId === 'function') {
                        callback = picWarpId;
                        picWarpId = undefined;
                    }
                    var fileInput = document.getElementById(inputId);
                    var url = null,file = "";
                    
                    fileInput.onchange = function() {
                        if(!this.files[0]) {
                            return false;
                        }
                        file = this.files[0];

                        if(window.createObjectURL != undefined) { // basic
                            url = window.createObjectURL(file);
                        } else if(window.URL != undefined) { // mozilla(firefox)
                            url = window.URL.createObjectURL(file);
                        } else if(window.webkitURL != undefined) { // web_kit or chrome
                            url = window.webkitURL.createObjectURL(file);
                        }
                        if(picWarpId) {
                            converImgToBase64(url, function(base64Img) {
                                $("#" + picWarpId).children().remove();
                                $("#" + picWarpId).append("<img />");
                                $("#" + picWarpId).children().attr("src", base64Img);
                                callback.call(this,base64Img);
                            })
                        }
                        function converImgToBase64(url, callback, outputFormat) {
                            var canvas = document.createElement("CANVAS"),
                                ctx = canvas.getContext('2d'),
                                img = new Image;
                            img.crossOrigin = 'Anonymous';
                            img.onload = function() {
                                canvas.height = img.height;
                                canvas.width = img.width;
                                ctx.drawImage(img, 0, 0);
                                var dataURL = canvas.toDataURL(outputFormat || 'image/png');
                                callback.call(this, dataURL);
                                canvas = null;
                            };
                            img.src = url;
                        }
                    };
                }
            }
        }
    ];
    XXX.module('YYYY').service(service);
})(window, window.XXX);

相关文章

网友评论

      本文标题:图片上传自动转成base64

      本文链接:https://www.haomeiwen.com/subject/pgoraxtx.html