Как преобразовать изображение в base_64 перед сохранением в хранилище в JavaScript

Question

Я хочу преобразовать данные изображения в строку base64 Я уже делаю эту технику

file 1
detail_project2.html 
<form method="post" name="frm_pdf_handler" id="frm_pdf_handler" action="<?php echo base_url('index.php/laporan/pdf_handler') ?>">
 <input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">
 <input type="text" id="foo_element" name="grppenyerapankeuangan"/>
<button>Create PDF</button>
</form>
<script>
$(document).ready(function () {


var chart1_data = <?php echo $arrlinechart; ?>;
var chart1_options = {};
var chart1_element = 'chart_realisasi_keuangan';
var chart1_type = google.visualization.ColumnChart;
drawGoogleChart2(chart1_data, chart1_options, chart1_element, chart1_type);
});
</script>

файл 2 devoops.js // из диаграмм Google

function drawGoogleChart2(chart_data, chart_options, element, chart_type) {
var data = google.visualization.arrayToDataTable(chart_data);
 google.visualization.events.addListener(chart, 'ready', function () {
 var image=chart.getImageURI();//convert canvas to image file from google   chart
$("#foo_element").val('data:image/base64,' + image);//store base64 to input field before delivered to php controller
}
}
chart.draw(data, chart_options);
}

файл 3 pdf_handler.php (контроллер codeigniter)

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Pdf_handler extends CI_Controller {
 function index(){
echo "<img src='".$this->input->post("foo_element")."'"."/>";
}
}

Строка base64 успешно сгенерирована, но не может отображать изображение, как мне кажется. кто-нибудь может мне помочь, пожалуйста?

Answer 1

[solved]

это действительно так.

когда я делаю это

var image=chart.getImageURI();

переменное изображение - это не файл изображения, а формат кодировки base64 так что моя ошибка когда я пытаюсь снова конвертировать base64 как это

$("#foo_element").val('data:image/base64,' + image);//my fatal mistake

Итак, это то, что мне нужно сделать

$("#foo_element").val(image);//my revision

и наконец все работает нормально. Всем спасибо: D

Answer 2

Пожалуйста, попробуйте установить это так:

$('#foo_element').html('<img src="data:image/png;base64,' + image + '" />');

Обновление

Можете ли вы прикрепить HTML-файл из того, что выводит эта строка (pdf_handler.php),

echo "<img src='".$this->input->post("grppenyerapankeuangan")."'"."img/>"; 

похоже, так и должно быть

echo "<img src='".$this->input->post("grppenyerapankeuangan")."' />"; 

Также в моем примере он указывает тип изображения как png, не уверен, является ли тип изображения обязательным.