Question

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

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

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

图像在屏幕上，就在页面右侧，在人面前。它已经从数据意义上下载了。
原始图像数据的转换必须在客户端完成。
相关图片来自任意域。也就是说，它们可能是也可能不是同源域。
如果需要，用户（如果对解决方案有帮助）可以提供其他权限（例如，安装FF工具栏以帮助解决跨域和其他问题）。也就是说，如果有助于解决问题，代码可以在客户端获得特别认可。

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

到目前为止，我看不到所有上述限制内的帖子。

Answer 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，使其认为图片来自您的域。

image.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例如。

Answer 2

要使其在跨域客户端中工作，您需要使用属性 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

如何将下载的内嵌图像转换为客户端的Base64

2 个答案: