0

我有一个画布，我想在其中加载一个代表 png 图像的 Base64 字符串。但是，下面的代码只显示一个空白的白框，我不知道为什么。当我查看画布中的数据时，它看起来与从 FileReader 对象（也在下方）获取数据的画布相同。非常感谢您对推断此问题的任何帮助！

此代码显示一个白色画布：

html

        <canvas id="canvas" width="114" height="114" style="z-index: 999999; display: none; padding-left: 50px"></canvas>

javascript

        var websiteIconData = $('#ctl00_ContentPlaceHolder1_websiteIcon');
        if (websiteIconData.val() != '') {
            var canvas = document.getElementById('canvas');
            var ctx = document.getElementById('canvas').getContext('2d');
            var loadedImg = new Image();
            loadedImg.onload = function () {
                ctx.drawImage(this, 0, 0);
                Debugger.log(ctx);
            };
            loadedImg.src = websiteIconData.val();
            canvas.style.display = 'block';
        }

此代码显示图像：

        $('#loadWebsiteIcon').on({
            change: function (ev) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    function draw() {
                        var ctx = document.getElementById('canvas').getContext('2d');
                        var img = new Image();
                        img.onload = function () {
                            var MAX_WIDTH = 114;
                            var MAX_HEIGHT = 114;
                            var width = img.width;
                            var height = img.height;
                            if (width > MAX_WIDTH) {
                                width = MAX_WIDTH;
                            }
                            if (height > MAX_HEIGHT) {
                                height = MAX_HEIGHT;
                            }
                            ctx.drawImage(img, 0, 0, width, height);
                            for (var i = 0; i <= document.images.length; i++) {
                            }
                            Debugger.log(ctx);
                        };
                        img.src = e.target.result;
                    }
                    draw();
                };
                reader.readAsDataURL(ev.target.files[0]);
                var canvas = document.getElementById('canvas');
                canvas.style.display = 'block';
                var imgData = canvas.toDataURL();
                $('#ctl00_ContentPlaceHolder1_websiteIcon').val(imgData);
                Debugger.log(imgData);
            }
        });
4

2 回答 2

1

小心 Base64 的解析方式。如果它被解析为电子邮件，它将默认插入一个每 76 行的字符。大多数 Base64 编码器都有一个选项可以关闭它。我在看MIME::Base64

从该文件：

返回的编码字符串被分成每行不超过 76 个字符的行，并且它将以 $eol 结尾，除非它为空。

其中 $eol 是论点之一。在此模块的情况下，将其设置为空字符串将防止 base64 被分解。

于 2013-04-29T22:07:52.950 回答
0

事实证明，这个问题与 canvas API 或 Base64 编码无关。这更像是 canvas.toDataURL(); 的问题。在图像加载到画布之前调用函数。将此行移到 img.onload 函数中似乎可以解决问题。下面是正确的代码：

    function initImageChange() {
//this is will be a string in Base64, in this case it is an <input type="text">... tag
        var imageData = $('#imageData');
//this is a canvas tag in on the page
        var canvas = document.getElementById('canvas');
//load the image from the imageData var if it exists
        if (imageData.val() != '') {
            var ctx2=canvas.getContext('2d');
            var loadedImg = new Image();
            loadedImg.onload = function() {
                ctx2.drawImage(this, 0, 0);
            };
            loadedImg.src = imageData.val();
            canvas.style.display = 'block';
        }
//this is a function that loads an image from a file onto the canvas and 
//sends the Base64 representation of this image to the text input tag.  This 
//could fairly easily be send directly to a post request or saved some other way
        $('#loadImage').on({
            change: function (ev) {
                var ctx = document.getElementById('canvas').getContext('2d');
                var dataURL = '';
                var reader = new FileReader();
                reader.onload = function (e) {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    function draw() {
                        var img = new Image();
                        img.onload = function () {
                            var MAX_WIDTH = 130;
                            var MAX_HEIGHT = 110;
                            var width = img.width;
                            var height = img.height;
                            if (width > MAX_WIDTH) {
                                width = MAX_WIDTH;
                            }
                            if (height > MAX_HEIGHT) {
                                height = MAX_HEIGHT;
                            }
                            ctx.drawImage(img, 0, 0, width, height);
                            dataURL = canvas.toDataURL();
                            $('#ctl00_ContentPlaceHolder1_websiteIcon').val(dataURL);
                            ctx.restore();
                        };
                        img.src = e.target.result;

                    }
                    draw();
                };
                reader.readAsDataURL(ev.target.files[0]);
                canvas.style.display = 'block';
            }
        });
    }
于 2013-05-01T15:28:43.753 回答