Les dejo mi respuesta de como pude solucionar este problema, ojala alguien le ayude.
Utilice un formulario oculto en donde este recibe la url de la imagen, la manda por metodo POST para despues en el archivo de PHP ahi convierte la image/png a una imagen y la puede mostrar, ojala les ayude asi como ami me ayudo para sacar este problema.
$.ajax({
method:"POST",
url:"../ajax/pagar_recarga_oxxo_ajax.php",
data:jsonData,
success:function(data){
var respuesta = JSON.parse(data);
// console.log(respuesta);
if(respuesta["responsecode"] == "ERROR"){
$(".texto-mensaje").text(respuesta["responseobject"]["message"]);
$("#msj").modal("toggle");
closeMessageOverlay();
}
else if(respuesta["responsecode"] == "OK"){
var resultados = respuesta["responseobject"]["datospago"];
var codigoBarras = resultados["codigobarras"];
var fechaExpiracion = resultados["fechaexpiracion"];
var importePago = resultados["importe"];
var referenciaOxxo = resultados["referencia"];
// console.log(codigoBarras);
$(".referenciaOxxo").text("Referencia: "+referenciaOxxo);
$(".fechaExpOxxo").text("Expira: "+fechaExpiracion);
$(".importeOxoo").text("Importe: "+importePago);
$("#formDescargarCodigoOxxo #imagenOxxo").val(codigoBarras);
$("#formDescargarCodigoOxxo #referenciaOxxo").val(referenciaOxxo);
var canvas = document.getElementById("codigoOxxo");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = codigoBarras;
img.onload = function(){
ctx.drawImage(img, 25, 25, 250, 100);
}
var botonDescargarImg =
"<button type='button' class='form-btn-cancelar' onclick='descargarCodigoOxxo();'>Descargar"+
"</button>";
$(".btnRecargaOxxo").html(botonDescargarImg);
$(".contenedorRecargar").addClass("hide");
}
}
});
function descargarCodigoOxxo(){ $("#formDescargarCodigoOxxo").submit(); }
<div class="col-lg-12 col-md-5 padding-off metodosPago">
<p class="referenciaOxxo"></p>
<canvas id="codigoOxxo"></canvas>
<p class="fechaExpOxxo"></p>
<p class="importeOxoo"></p>
</div>
<div class="col-lg-12 col-md-5 padding-off btnRecargaOxxo"></div>
<form class="formularioCamposOcultos" name="formDescargarCodigoOxxo" id="formDescargarCodigoOxxo" action="../ajax/codigoOxxo.php" method="POST">
<input type="text" name="imagenOxxo" id="imagenOxxo">
<input type="text" name="referenciaOxxo" id="referenciaOxxo">
</form>
<?php
$imagenOxxo = $_POST["imagenOxxo"];
$referenciaOxxo = $_POST["referenciaOxxo"];
$codigoBarras = imagecreatefrompng($imagenOxxo);
$codigoBarras = imagescale($codigoBarras, 430, 170);
$image = imagecreatefrompng("baseOxxo.png");
$color = imagecolorallocate($image, 0, 0, 0);
imagecopymerge($image, $codigoBarras, 35, 35, 0, 0, 430, 170, 100);
imagettftext($image, 20, 0, 150, 235, $color, "arial.ttf", $referenciaOxxo);
ob_start();
imagepng($image);
$contents = ob_get_contents();
ob_end_clean();
$codigoOxxo = "data:image/png;base64,".base64_encode($contents);
imagedestroy($image);
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=OXXO_'.$referenciaOxxo.'.png');
header('Content-type: image/png');
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
ob_clean();
flush();
readfile($codigoOxxo);
?>