1

是否有任何技术可以转换已下载的图像 - 内联 JPEG/GIF/等。网页中出现的图像 - 使用客户端 JavaScript 转换为 Base64 数据？

我不是在谈论如何使用其他方式（服务器端、在线工具等）将图像转换为 Base64。

这些是我的特定用例的约束：

  • 图像现在在屏幕上，就在页面上，在人的面前。它已经在数据意义上被下载了。
  • 原始图像数据的转换必须在客户端完成。
  • 有问题的图像来自任意域。也就是说，它们可能属于或不属于同源域。
  • 如果需要（如果对解决方案有帮助），用户可以提供额外的权限（例如，安装 FF 工具栏以帮助避开跨域和其他问题）。也就是说，如果这有助于解决问题，则可以在客户端对代码进行特殊认可。

最终目标是将页面上的所有图像（在 DOM 中）转换为 JavaScript 内部的 Base64 数据。换句话说，用户可以在页面上看到的每个图像都已转换为某种 JavaScript 变量，其中包含 Base64 数据。

到目前为止，我没有看到任何帖子符合上述所有限制。

4

2 回答 2

1

我认为这与您正在寻找的内容很接近，但唯一的问题是它仅适用于本地托管的图像和 HTML5。

function toURL(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);
    var s = canvas.toDataURL();
    return s.substring(s.indexOf(","));
}

var test = document.getElementById("myImage");

console.log(toURL(test));

您可以使用以下代码欺骗 javascript，使其认为图像来自您的域。

图像.php

<?php
    $image = getAnImagePathAndTypeFromTheDatabaseByID($_GET["id"]); 
    //returns something like
    //array("path" => "http://www.anotherwebsite.com/image.png", "type" => "png")
    header("Content-type: image/$image[type]");
    echo file_get_contents($image["path"]);
?>

然后只需导航到 image.php?id=1 例如。

于 2013-07-31T17:44:06.607 回答
0

要让它在跨域客户端工作，您需要使用属性 crossorigin = "true" 调用图像，或者在 Logan Murphy 代码中添加一行：

function toURL(image) {
    image.setAttribute('crossOrigin', 'anonymous');
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);
    var s = canvas.toDataURL();
    return s.substring(s.indexOf(","));
}

我使用这段代码：

// image-to-uri.js v1
// converts a URL of an image into a dataURI
function imageToURI(url, callback) {
    // Create an empty canvas and image elements
    let canvas = document.createElement('canvas');
    let img = document.createElement('img');
    img.onload = function () {
        let ctx = canvas.getContext('2d');
        // match size of image
        canvas.width = img.naturalWidth || img.width;
        canvas.height = img.naturalHeight || img.height;
        // Copy the image contents to the canvas
        ctx.drawImage(img, 0, 0);
        // Get the data-URI formatted image
        callback(null, canvas.toDataURL('image/png'));
    };
    img.ononerror = function () {
        callback(new Error('FailedToLoadImage'));
    };
    // canvas is not supported
    if (!canvas.getContext) {
        setTimeout(callback, 0, new Error('CanvasIsNotSupported'));
    } else {
        img.setAttribute('crossOrigin', 'anonymous');
        img.src = url;
    };
};

这是基于此https://github.com/HenrikJoreteg/image-to-data-uri.js/blob/master/image-to-data-uri.js

于 2021-05-24T15:10:26.267 回答