从 php 返回图像时出现乱码

Question

我正在使用此代码生成条形码，我想使用 ajax

显示它

<?php

require('class/BCGColor.php');
require('class/BCGDrawing.php');
require('class/BCGean8.barcode.php');

$font = new BCGFontFile('font/Arial.ttf', 18);
$color_black = new BCGColor(0, 0, 0);
$color_white = new BCGColor(255, 255, 255);

// Barcode Part
$code = new BCGean8();
$code->setScale(2);
$code->setThickness(30);
$code->setForegroundColor($color_black);
$code->setBackgroundColor($color_white);
$code->setFont($font);
$code->parse($_GET['code']);

// Drawing Part
$drawing = new BCGDrawing( '' , $color_white);
$drawing->setBarcode($code);
$drawing->draw();

header('Content-Type: image/png');

$drawing->finish(BCGDrawing::IMG_FORMAT_PNG);

?>

这是我的 html 和 js

<img src="" id="my_image" />
<a href="gen_barcode.php?code=1234567">Click</a>

$('a').on('click', function (e){
    $.ajax({
        url: "gen_barcode.php",
        type: 'GET',
        data: { code: '1234567' },
        success: function (data, textStatus, jqXHR) {
            console.log(data)
            $('#my_image').attr('src', data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(data)
        },
    })
    e.preventDefault();
})

我从服务器收到了一些看起来很奇怪的乱码字符串。我该如何纠正它。我做错了什么。

Answer 1

您正在将图像的 src 设置为图像的实际数据。 src 应设置为图像的 URL，而不是其内容。相反，将其设置为生成数据的页面的 url：

$('a').on('click', function (e){
    $('#my_image').attr('src', 'gen_barcode.php?code=1234567');
    e.preventDefault();
});

从 php 返回图像时出现乱码

Getting gibberish while returning image from php

php

ajax

jquery

dynamic-image-generation