如何正确地将我的图像转换为Base64?

时间:2017-03-20 20:01:04

标签: javascript base64 image-conversion

我正在尝试获取并将我的图像转换为Base64但编码(没有任何可能会破坏我的应用程序的特殊字符)。可悲的是,代码无效。我想知道代码是否有问题。

以下是代码:

    $('#button_upload').on('click', function () {
        upload();
    });



    $(":file").on('change', function(){
        loadImage(this);
    });




    function isBase64(str) {
        try {
            return btoa(atob(str)) == str;
        }catch (err) {
            return false;
        }
    }


    function getDataUri(url, callback) {
        var image = new Image();
        image.onload = function (url) {
            var canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
            canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

            canvas.getContext('2d').drawImage(this, 0, 0);
            callback(canvas.toDataURL('image/jpeg').replace(/^data:image\/(png|jpg);base64,/, ''));



        };

        image.src = url;

    };

    function loadImage(image) {
        if (image.files && image.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(image.files[0]);
        };
    };

    function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
    };

    function upload() {

        var src = document.getElementById('myImg').src
        getDataUri(src, function (dataUri) {
            var parameters= {
                picture: dataUri
            };

1 个答案:

答案 0 :(得分:0)

我修正了这一行:

callback(canvas.toDataURL('image/jpeg').replace(/^data:image\/(png|jpg);base64,/, ''));

callback(canvas.toDataURL('image/jpeg').replace(/^data:image\/(png|jpeg);base64,/, ''));

它是字符串文字,因此正则表达式必须完全等于情况。