I'm trying to recreate a PSD file using the php intervention framework.
But i'm trying to add effects
$img = Image::make('mps_polsa_top.png');
$img->text('SN', 885, 430, function ($font) {
$font->file('fonts/impact.ttf');
$font->size(56.64);
$font->color('#ffffff');
$font->align('center');
$font->valign('top');
});
return $img->response('png');```
this is the code.
Related
now im doing AXIOS code combine with laravel to get image from instagram URL. the URL is this https://www.instagram.com/p/B_zZCRpB895/media/?size=t
AXIOS is new from me. to get the image, i tried this simple code. i set this code into my frontend site
<img id="imgsrc" src="" >
<script>
axios
.get('https://www.instagram.com/p/B_zZCRpB895/media/?size=t', {
responseType: 'arraybuffer'
})
.then(response => {
const buffer = Buffer.from(response.data, 'base64');
document.getElementById("imgsrc").src = Buffer;
console.log(Buffer);
})
.catch(ex => {
console.error(ex);
});
</script>
but the image not display into <img id="imgsrc" src="" >
i really want that, when we open the page. the instagram image can display.
how to solve this matter. please help.
you can use file reader to get base64 and set it as the image source :
<script>
axios.get('https://www.instagram.com/p/B_zZCRpB895/media/?size=t', {responseType: "blob"})
.then(function (response) {
var reader = new window.FileReader();
reader.readAsDataURL(response.data);
reader.onload = function () {
document.getElementById("imgsrc").src = reader.result;
}
});
</script>
Is there a particular reason you are retrieving this via an AJAX call using axios?
The endpoint you provided returns an image source already. To make it appear in the image element all you need to do is set the src to the endpoint URL as shown below. Unless you need to run a process to do something to the image you don't need to get the data as an array buffer.
document.getElementById("imgsrc").src = "https://www.instagram.com/p/B_zZCRpB895/media/?size=t";
I am trying to set up a media asset database using Laravel, Vue, Axios and Intervention image.
I want the user to be able to set a desired image height and width before downloading an image. This is then sent to the controller using an axios post-request. Inside the controller, intervention image is working its magic(k) and returning my resized file as a response.
Now I want the image that's being returned as a response to trigger a download. What do I need to do with my axios-response?
Here's what I currently have:
Axios-Request:
resize(file) {
this.file = file;
let formData = new FormData();
formData.append('imageHeight', this.imageHeight);
formData.append('imageWidth', this.imageWidth);
axios.post('files/resize/' + file.id, formData).then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
this.errors = error.response.data.errors;
this.showNotification(error.response.data.message, false);
this.fetchFile(this.activeTab, this.pagination.current_page);
});
}
Controller:
public function resize($id, Request $request)
{
$file = File::where('id', $id)->where('user_id', Auth::id())->first();
$originalImage = $file->getName($file->type, $file->name, $file->extension);
$originalImagePath = Storage::get($originalImage);
$imageHeight = $request['imageHeight'];
$imageWidth = $request['imageWidth'];
if ($img = Image::make($originalImagePath)) {
return $img->resize($imageWidth,$imageHeight)->response();
}
}
You'll want the Content-Disposition response header to be attachment rather than inline.
http://image.intervention.io/use/http
I need to upload image using ajax. Elaborating my point:
I need to pass my image data to a PHP page and check the type, size, name and all other attributes of the file. If all attributes matches, then only I need to transfer the file. Problem here is passing of data should be done in JSON(AJAX) format only. One more important thing is that I don't have to convert it to base64.
If you can help me in this, You are most welcome.
Thanks in advance.
The idea in SO is to work on the OP current code. I mean, we are not here to make all the job, because it should have a price. Anyway, here is a workaround for your issue:
Convert your image to base64 using javascript. This useful method works like a charm:
// Code taken from MatthewCrumley (http://stackoverflow.com/a/934925/298479)
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to guess the
// original format, but be aware the using "image/jpg" will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
Then just pass the returned string as base64 through ajax:
$.ajax({
url: 'path/to/your/script.php',
type: 'post',
data: { paramName: imagedata } // the returned data from above js method,
/*...*/
});
And, in PHP side, just return the string to an image file:
// Code taken from Austin Brunkhorst (http://stackoverflow.com/a/15153931/3648578)
function base64_to_jpeg($base64_string, $output_file) {
$ifp = fopen($output_file, "wb");
$data = explode(',', $base64_string);
fwrite($ifp, base64_decode($data[1]));
fclose($ifp);
return $output_file;
}
How to change the page orientation of pdf file generated via HTML2PDF to landscape...?
By default, it is opening as Portrait format. I have changed it in html2pdf.class, but nothing changed.Please help me..
This is the php code:
require('../../includes/html2pdf/html2fpdf.php');
$pdf=new HTML2FPDF('L','mm','A3');
$pdf->AddPage();
$pdf->setFont("arial",'',8);
$pdf->WriteHTML($data);
$pdf->Output("outstanding.pdf","I");
Using L as the constructor parameter should work just fine. Don't mess with the class internals.
This is my only code and it works fine. Try using the newest release: HTML2PDF.
// convert to PDF
require_once('../../vendor/html2pdf_v4.03/html2pdf.class.php');
try
{
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->setDefaultFont('Arial');
$html2pdf->writeHTML($html, false);
$html2pdf->Output('output.pdf', 'D');
}
catch(HTML2PDF_exception $e) {
echo $e;
exit;
}
Or you can add orientation on tag.
<page orientation="landscape" format="A5" > Landscape </page>
Check out http://demo.html2pdf.fr/examples/pdf/exemple04.pdf for more example.
This solution also is very good and it's in the documentation:
var element = document.getElementById('element-to-print');
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
// Old monolithic-style usage:
html2pdf(element, opt);
I know there is a lot of questions regarding this but currently I am trying to save user created HTML5 canvas data to a specific folder on my web server.
I am already able to save an image to server using the following:
function sendData(postData){
var ajax = new XMLHttpRequest();
ajax.open("POST",'saveFrame.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
var comicID = document.getElementById('comicID').value;
ajax.onreadystatechange=function()
{
if (ajax.readyState == 4)
{
alert("Frame saved");
}
}
ajax.send(postData);
}
saveFrame.PHP File
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
// Get the data like you would with traditional post
$rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];
// Remove the headers
$removeHeaders=substr($rawImage, strpos($rawImage, ",")+1);
// decode it from base 64 and into image data only
$decode=base64_decode($removeHeaders);
// save to your server
$saveName = "test.jpeg";
$fopen = fopen($saveName, 'wb' );
fwrite( $fopen, $decode);
fclose( $fopen );
}
?>
What I want to be able to do is pass some more variables along side the image so that I can dynamically look up my database using PHP within the saveFrame.php file to determine what filename it should be saved as. I'm unsure how to accomplish this as I'm not accustomed to using AJAX.
Any advice is appreciated,
Alex
You can use the html5 canvaspixelarray property to obtain the canvas data.