Javascript 如何使用画布将多个图像转换为base64_Javascript_Canvas_Base64_Local Storage_Data Url

Javascript 如何使用画布将多个图像转换为base64

javascript canvas

Javascript 如何使用画布将多个图像转换为base64,javascript,canvas,base64,local-storage,data-url,Javascript,Canvas,Base64,Local Storage,Data Url,我正在存储base64编码的图像，目前我只能创建一个代码，我正在尝试创建两个，但第二个代码似乎正在被覆盖。我不了解画布绘画的总体概念，所以我认为这是我在解决这个问题时遇到的问题的根源当前行为：它在本地存储中存储相同的DataUrl两次。它确实记录了正确的信息。favicon green正在存储，而不是红色如何使用画布对多个base64图像进行编码 html: 我看不出你的代码有什么特别的错误。如果代码不是直接复制粘贴的，我会仔细检查它，以确保您不会切换任何红色和绿色在将画布转换为数据URL

我正在存储base64编码的图像，目前我只能创建一个代码，我正在尝试创建两个，但第二个代码似乎正在被覆盖。我不了解画布绘画的总体概念，所以我认为这是我在解决这个问题时遇到的问题的根源

当前行为：它在本地存储中存储相同的DataUrl两次。它确实记录了正确的信息。favicon green正在存储，而不是红色

如何使用画布对多个base64图像进行编码

html:

我看不出你的代码有什么特别的错误。如果代码不是直接复制粘贴的，我会仔细检查它，以确保您不会切换任何红色和绿色

在将画布转换为数据URL时，不应该有任何令人惊讶的机制

下面是两个示例的快速示例：

const a=document.createElement'canvas'； const b=document.createElement'canvas'； const aCtx=a.getContext'2d'；常量bCtx=b.getContext'2d'； aCtx.fillStyle='000'； aCtx.fillRect0，0，a.宽度，a.高度； const aUrl=a.toDataURL； const bUrl=b.toDataURL； console.logaUrl==bUrl，aUrl，bUrl；

console.log'First difference index:'，Array.prototype.findIndex.callaUrl，aChar，index=>aChar！==布尔[指数]；它有什么作用？它会打印你的控制台日志吗？你做了什么调试？它是否包含在你的if声明中？它是否抛出任何控制台错误？没有错误，它在本地存储中存储相同的DataUrl两次。它确实记录了正确的信息。正在存储favicon绿色，而不是红色。所以我尝试了您建议的干式方法，直接复制了它，然后运行“console.log”is equal:”，localStorage.getItem'redFavicon'==localStorage.getItem'greenFavicon'；”并且实现了。我不确定发生了什么，在测试itHmm之前我已经清除了缓存，这很奇怪。尝试使用document.body.appendcanvas将画布添加到浏览器中，以便您可以实际查看画布并确保其正确绘制。也许这不是画画，只是保存两张空白画布或其他什么。另外，仔细检查控制台和网络错误。好吧，它们绝对不同，它在我的图标上加了一个红点和一个绿点，但它仍然说URI是相等的……这很奇怪。当您检查它们的值时，也输出这两个值，只需查看它们。我想知道当它们被检索时，它们是否因为某种原因而为空，这意味着它们是相同的。因此它们肯定有一个URI，它们是相同的，当我单击它创建的链接时，两个画布都是空白的。

    <head>
        ...
        <link id="favicon" rel="icon" src="/assets/favicon-red-16x16.ico.png">
    </head>
    <body>
        ...
        <!-- hidden images to store -->
        <img id="favicon-green" rel="icon" src="/assets/favicon-green-16x16.ico.png" width="16" height="16" />
        <img id="favicon-red" rel="icon" src="/assets/favicon-red-16x16.ico.png" width="16" height="16" />
        ...
    </body>

    // cache images
    function storeImages() {

        // my sorry attempt to create two canvas elements for two image encodings
        var canvasGreen = document.createElement('canvas');
        var canvasRed = document.createElement('canvas');

        // painting both images
        var ctxGreen = canvasGreen.getContext('2d');
        var ctxRed = canvasRed.getContext('2d');

        // getting both images from DOM
        var favGreen = document.getElementById('favicon-green');
        var favRed = document.getElementById('favicon-red');

        // checking if images are already stored
        var base64Green = localStorage.getItem('greenFavicon');
        var base64Red = localStorage.getItem('redFavicon');
        console.log('storing...')

        if (base64Green == null && window.navigator.onLine || base64Red == null && window.navigator.onLine) {
            ctxGreen.drawImage(favGreen, 0, 0);
            ctxRed.drawImage(favRed, 0, 0);

            // getting images (the DataUrl is currently the same for both)
            base64Green = canvasGreen.toDataURL();
            base64Red = canvasRed.toDataURL();
            localStorage.setItem('greenFavicon', base64Green);
            localStorage.setItem('redFavicon', base64Red);
            console.log("are they equal : ", base64Green == base64Red); // returns true
        }
    }
    storeImages();