Javascript 如何获取图像数据并存储到隐藏的文本框中

在对这个问题进行了很长时间的深入研究之后…我在这里尝试了一些东西…但在此之前，让我澄清一下这里的问题…我在PHP页面中有一个IMG标记，我正在尝试在那里成功加载图像…现在我正试图将图像数据捕获到一个隐藏的文本框中，以便我可以使用该图像数据作为mPDF的PHP变量

为了实现这一点，我首先制作了Javascript：

function logoImg(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
        getBase64Image();
    }

    $('.delete-logo').css('display', 'inline-block');
}

function getBase64Image() {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var img = document.getElementById('img_prev');

    context.drawImage(img, 0, 0 );
    var theData = context.getImageData(0, 0, img.width, img.height);

    document.getElementById('tx').value = theData;
}

在PHP文件中，这里是IMG标记：

<div class="logo_prev">
    <img id="img_prev" src="/test7/assets/img/logo-placeholder.png" alt="Your logo" class="img-thumbnail invoice-logo img-responsive"/>
</div>

<br>

<input type='file' onchange="logoImg(this);" name="invoice_logo" class="select-logo" data-validation="mime size" data-validation-allowing="jpg, png, gif" data-validation-max-size="2M" data-validation-error-msg="Only jpg, gif or png are allowed (Max 2mb)" />
<input type="text" id="tx" name="tx"/>

我真的需要一些线索来继续…请帮助我。

您应该使用该方法来获取Base64字符串。我包含了一个可运行的代码片段

与此相反：

var theData = context.getImageData(0, 0, img.width, img.height);

使用以下命令：

var theData = canvas.toDataURL();

功能登录（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'img_prev'）.attr（'src'，e.target.result）；
};
reader.readAsDataURL（input.files[0]）；
getBase64Image（）；
}
$（'.delete logo'）.css（'display'，'inline block'）；
}
函数getBase64Image（）{
var canvas=document.createElement（'canvas'）；
var context=canvas.getContext（'2d'）；
var img=document.getElementById（'img_prev'）；
drawImage（img，0,0）；
var theData=canvas.toDataURL（）；
document.getElementById（'tx'）。值=数据；
}

@dave…在从以下代码调用函数getBase64Image（）时，我在文本框中获得值，如下所示…[object ImageData]。。。