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

Question

在安静地深入研究这个问题之后...我正在尝试这里...但在此之前让我清除这里的问题...我在 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"/>

我真的需要一些线索来推进它...请帮助我。

Answer 1

您应该使用 canvas.toDataURL() 方法来获取 Base64 字符串。我包含了一个可运行的片段。

而不是这个：

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

使用这个：

var theData = canvas.toDataURL();

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 = canvas.toDataURL();
    document.getElementById('tx').value = theData;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="logo_prev">
    <img id="img_prev" src="" 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"/>

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

how to get image data and store into hidden textbox

javascript

php

data-uri