一个画布，我想加载一个Base64字符串，表示png图像，但只是显示一个空白的白色框

A canvas into which I would like to load a Base64 string that represents a png image but just displays a blank white box

本文关键字：一个 显示 空白 白色 图像 Base64 加载 表示 字符串 png      更新时间：2023-09-26

我有一个画布，我想加载一个Base64字符串，表示png图像。然而，下面的代码只是显示一个空白的白框，我很困惑为什么。当我查看画布中的数据时，它看起来与从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);
            }
        });

要注意Base64的解析方式。如果它被解析为电子邮件，它将在默认情况下每76行插入一个字符。大多数Base64编码器都有关闭此功能的选项。我正在看MIME::Base64

From the document:

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

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

事实证明，这个问题与画布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';
            }
        });
    }
相关文章：