Question

我尝试加载图片并将其数据放入HTML Image元素但未成功。

var fs = require("fs");
var content = fs.read('logo.png');

在阅读文件内容后，我必须以某种方式将其转换为Image或将其打印到画布。我试图使用在堆栈上找到的代码将二进制数据转换为Base64数据URL。

function base64encode(binary) {
  return btoa(unescape(encodeURIComponent(binary)));
}
var base64Data = 'data:image/png;base64,' +base64encode(content);
console.log(base64Data);

返回的Base64无效数据URL。我正在尝试更多的方法，但没有成功。你知道实现这一目标的最佳（最短）方式吗？

Answer 1

这是一个相当荒谬的解决方法，但它确实有效。请记住，PhantomJS'（1.x？）画布有点broken。因此canvas.toDataURL函数返回大量膨胀的编码。我发现的最小的是具有讽刺意味的image/bmp。

function decodeImage(imagePath, type, callback) {
    var page = require('webpage').create();
    var htmlFile = imagePath+"_temp.html";
    fs.write(htmlFile, '<html><body><img src="'+imagePath+'"></body></html>');
    var possibleCallback = type;
    type = callback ? type : "image/bmp";
    callback = callback || possibleCallback;
    page.open(htmlFile, function(){
        page.evaluate(function(imagePath, type){
            var img = document.querySelector("img");
            // the following is copied from http://stackoverflow.com/a/934925
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;

            // Copy the image contents to the canvas
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            // Get the data-URL formatted image
            // Firefox supports PNG and JPEG. You could check img.src to
            // guess the original format, but be aware the using "image/jpg"
            // will re-encode the image.
            window.dataURL = canvas.toDataURL(type);
        }, imagePath, type);
        fs.remove(htmlFile);
        var dataUrl = page.evaluate(function(){
            return window.dataURL;
        });
        page.close();
        callback(dataUrl, type);
    });
}

您可以这样称呼它：

decodeImage('logo.png', 'image/png', function(imgB64Data, type){
    //console.log(imgB64Data);
    console.log(imgB64Data.length);
    phantom.exit();
});

或者

decodeImage('logo.png', function(imgB64Data, type){
    //console.log(imgB64Data);
    console.log(imgB64Data.length);
    phantom.exit();
});

我尝试了几件事。我无法弄清fs.read返回的文件编码。我还试图通过file:// - URL动态地将文件加载到about：blank DOM中，但这不起作用。因此，我选择将本地html文件写入磁盘并立即打开它。

使用Phantom.js将文件加载到IMAGE对象中

1 个答案: