按比例在图像上书写文字 [英] Write text on the image in proportion

查看:146
本文介绍了按比例在图像上书写文字的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我有了这张图片:



我希望在图像下添加文字(制作消极图像)。所以我将它扩展到高度并在底部增加额外的高度。我需要的是写下文字:


热门文字



底部较长文字


我还需要这些单词以图像为中心。所以输出应该是:



一切都在PHP GD库上。问题是 - 我不知道如何计算字体大小的比例并使其居中。
我的功能不起作用,计算错误的字体大小并将文本对齐错误..

  private function __generate_text_pref($ type)
{
$ data = array();
开关($ type){
case'title':
$ data ['percent'] = 0.9;
$ data ['text_width_percent'] = 0.8;
休息;
case' subtitle':
$ data ['percent'] = 0.92;
$ data ['text_width_percent'] = 0.6;
休息;
默认值:
$ data ['percent'] = 0.86;
$ data ['text_width_percent'] = 0.8;
休息;
}

list($ img_width,$ img_height)= getimagesize($ this-> settings ['__ temp_image']);

//找到$ txt_width的字体大小= $ img_width的80%...
$ data ['font_size'] = 1;
$ txt_max_width = intval($ data ['text_width_percent'] * $ img_width);

do {

$ data ['font_size'] ++;
$ p = imagettfbbox($ data ['font_size'],0,$ this-> settings ['font'],$ this-> settings ['__ title']);
$ txt_width = $ p [2] - $ p [0];
// $ txt_height = $ p [1] - $ p [7]; //以防万一你需要它

} while($ txt_width< = $ txt_max_width);

// $ data ['font_size'] =($ data ['font_size']> 24)? 24:$ data ['font_size'];

返回数组(
'font_size'=> $ data ['font_size'],
'asys'=>数组(
'x'=> ;(($ img_width - $ txt_width)/ 2),
'y'=>($ img_height * $ data ['percent'])

);
}

它应该具有标题和副标题的默认字体大小并将其降低到更低只有在这种情况下,当文本更长并且不适合包装时..

解决方案

因为它似乎很难确定如果文本比它的边界框宽,而不能实际看到它,这就是我想出的解决方案。



我使用了1000px宽的图像并调整了大小当然,你显然已经完成了所有这些工作。



我在编写答案时并不是那么出色(虽然代码已经过测试并且确实如此我希望这会有所帮助。

 <?php 
$ FormAction = $ _SERVER ['PHP_SELF'] ;

if((isset($ _ POST [MM_insert]))&&($ _POST [MM_insert] ==form1)){//如果表单已提交

//获取原始图片
$ fileName = $ _FILES [ImageName] [name]; //文件名
$ fileTempLoc = $ _FILES [ImageName] [tmp_name]; // PHP tmp文件夹中的文件
$ type = strtolower(substr(strrchr($ fileName,。),1));
if($ type =='jpeg'){$ type ='jpg'; }

//临时上传图片名称
$ original_image = $ _FILES ['ImageName'] ['tmp_name'];

//保存图像的名称 - 在这种情况下与原始
$ new_image = $ _FILES ['ImageName'] ['name']相同;

//获取图片尺寸
$ uploaded_size = getimagesize($ original_image);
$ uploaded_imgw = $ uploaded_size [0];
$ uploaded_imgh = $ uploaded_size [1];

//最大图像宽度和高度
$ max_width =600;
$ max_height =600;

//缩略图图像宽度和高度
$ thumbnail_max_width =100;
$ thumbnail_max_height =100;

//检查我们是否需要调整图片大小
if($ uploaded_imgw> 600 || $ uploaded_imgh> 600){//如果图片大于600x600
//使用GD2 cmd调整图像大小
//获取新尺寸
list($ width_orig,$ height_orig)= getimagesize($ original_image);
$ ratio_orig = $ width_orig / $ height_orig;
//按比例调整我们的图像大小维持其原始方面
if($ thumbnail_max_width / $ thumbnail_max_height> $ ratio_orig){
$ width = $ max_width * $ ratio_orig; // 576
$ height = $ max_height;
} else {
$ height = $ max_height / $ ratio_orig; // 576
$ width = $ max_width; // 600
}
//重新采样/调整图像大小
$ orig_image_p = imagecreatetruecolor($ width,$ height);

if($ type ==gif|| $ type ==png){
imagecolortransparent($ orig_image_p,imagecolorallocate($ orig_image_p,0,0,0));
}
if($ type ==jpg){
$ temp_image = imagecreatefromjpeg($ original_image);
}
if($ type ==gif){
$ temp_image = imagecreatefromgif($ original_image);
}
if($ type ==png){
$ temp_image = imagecreatefrompng($ original_image);
}

imagecopyresampled($ orig_image_p,$ temp_image,0,0,0,0,$ width,$ height,$ width_orig,$ height_orig);

if($ type ==jpg){
imagejpeg($ orig_image_p,$ original_image,80);
}
if($ type ==gif){
imagegif($ orig_image_p,$ original_image);
}
if($ type ==png){
imagepng($ orig_image_p,$ original_image,9);
}
move_uploaded_file($ original_image,'.. / .. / images /'。$ new_image);
imagedestroy($ temp_image);
imagedestroy($ orig_image_p);
} else {//如果图片小于900x900
$ small_image_p = imagecreatetruecolor($ uploaded_imgw,$ uploaded_imgh);

if($ type ==gif|| $ type ==png){
imagecolortransparent($ small_image_p,imagecolorallocate($ small_image_p,0,0,0));
}

if($ type ==jpg){
$ small_temp_image = imagecreatefromjpeg($ original_image);
}
if($ type ==gif){
$ small_temp_image = imagecreatefromgif($ original_image);
}
if($ type ==png){
$ small_temp_image = imagecreatefrompng($ original_image);
}

imagecopyresampled($ small_image_p,$ small_temp_image,0,0,0,0,$ uploaded_imgw,$ uploaded_imgh,$ uploaded_imgw,$ uploaded_imgh);

if($ type ==jpg){
imagejpeg($ small_image_p,$ original_image,80);
}
if($ type ==gif){
imagegif($ small_image_p,$ original_image);
}
if($ type ==png){
imagepng($ small_image_p,$ original_image,9);
}
move_uploaded_file($ original_image,'.. / .. / images /'。$ new_image);
imagedestroy($ small_temp_image);
imagedestroy($ small_image_p);
} //如果小于600x600则结束

//获取我们将使用的图像
$ new_img_src ='../../ images /'。$ new_image;
list($ new_width,$ new_height)= getimagesize($ new_img_src);

if($ type =='jpg'){
$ im = imagecreatefromjpeg($ new_img_src);
}
if($ type =='png'){
$ im = imagecreatefrompng($ new_img_src);
}
if($ type =='gif'){
$ im = imagecreatefromgif($ new_img_src);
}

//为我们的新图像创建一个空白画布
$ new_image_p = imagecreatetruecolor($ new_width,$ new_height);

if($ type ==gif|| $ type ==png){
imagecolortransparent($ new_image_p,imagecolorallocate($ new_image_p,0,0,0));
}
if($ type =='jpg'){
$ new_temp_image = imagecreatefromjpeg($ new_img_src);
}
if($ type =='png'){
$ new_temp_image = imagecreatefrompng($ new_img_src);
}
if($ type =='gif'){
$ new_temp_image = imagecreatefromgif($ new_img_src);
}

imagecopyresampled($ new_image_p,$ new_temp_image,0,0,0,0,$ new_width,$ new_height,$ new_width,$ new_height);

//为我们的画布设置尺寸
$ adj_width = $ new_width + 40;
$ adj_height = $ new_height + 120;

$ bkgrd = imagecreatetruecolor($ adj_width,$ adj_height);
imagefilledrectangle($ bkgrd,0,0,$ adj_width,$ adj_height,0x000000);
$ sx = imagesx($ bkgrd)-imagesx($ bkgrd)+20;
$ sy = imagesy($ bkgrd)-imagesy($ bkgrd)+20;

//将我们的原始图像放在画布中心,距离顶部
imagecopymerge 20px($ bkgrd,$ new_image_p,$ sx,$ sy,0,0,imagesx($ bkgrd) ,imagesy($ bkgrd),100);

//将图像保存到文件并释放内存
if($ type ==jpg){
imagejpeg($ bkgrd,$ new_img_src,80);
}
if($ type ==gif){
imagegif($ bkgrd,$ new_img_src);
}
if($ type ==png){
imagepng($ bkgrd,$ new_img_src,9);
}
imagedestroy($ im);
imagedestroy($ new_image_p);
imagedestroy($ bkgrd);

//现在我们将文本创建为要与我们的新图像合并的图像

//检查边界框的宽度
函数calculateTextBox($ text,$ fontFile,$ fontSize,$ fontAngle){
/ ************
计算* exact *边界框(单像素精度)的简单函数。
该函数返回一个带有这些键的关联数组:
left,top:您将传递给imagettftext的坐标
width,height:您必须创建的图像的尺寸
** *********** /
$ rect = imagettfbbox($ fontSize,$ fontAngle,$ fontFile,$ text);
$ minX = min(array($ rect [0],$ rect [2],$ rect [4],$ rect [6]));
$ maxX = max(array($ rect [0],$ rect [2],$ rect [4],$ rect [6]));
$ minY = min(数组($ rect [1],$ rect [3],$ rect [5],$ rect [7]));
$ maxY = max(array($ rect [1],$ rect [3],$ rect [5],$ rect [7]));

返回数组(
left=> abs($ minX) - 1,
top=> abs($ minY) - 1,
width=> $ maxX - $ minX,
height=> $ maxY - $ minY,
box=> $ rect
);
}

$ text_string = $ _POST ['TopLine']; //这是一个很长的第一行,看看如果它太长了会发生什么;
$ font_ttf =arial.ttf;
$ font_size = 22;
$ text_angle = 0;
$ text_padding = 10; // Img填充 - 文本周围

$ the_box = calculateTextBox($ text_string,$ font_ttf,$ font_size,$ text_angle);

$ imgWidth = $ the_box [width] + $ text_padding;
$ imgHeight = $ the_box [height] + $ text_padding;

$ image = imagecreatetruecolor($ imgWidth,$ imgHeight);
imagefill($ image,imagecolorallocate($ image,0,0,0));

$ color = imagecolorallocate($ image,255,255,255);

imagettftext($ image,
$ font_size,
$ text_angle,
$ the_box [left] +($ imgWidth / 2) - ($ the_box [ width] / 2),
$ the_box [top] +($ imgHeight / 2) - ($ the_box [height] / 2),
$ color,
$ font_ttf,
$ text_string);

//保存文件
imagepng($ image,'.. / .. / images / NewTopImg.png',9);

//销毁图片并重新开始
imagedestroy($ image);

$ text_string = $ _POST ['BottomLine']; //这是一个很长的第二行,看看如果它太长就会发生什么。甚至比第一行更长的行。;
$ font_ttf =arial.ttf;
$ font_size = 16;
$ text_angle = 0;
$ text_padding = 10; // Img填充 - 文本周围

$ the_box = calculateTextBox($ text_string,$ font_ttf,$ font_size,$ text_angle);

$ imgWidth = $ the_box [width] + $ text_padding;
$ imgHeight = $ the_box [height] + $ text_padding;

$ image = imagecreatetruecolor($ imgWidth,$ imgHeight);
imagefill($ image,imagecolorallocate($ image,0,0,0));

$ color = imagecolorallocate($ image,255,255,255);

imagettftext($ image,
$ font_size,
$ text_angle,
$ the_box [left] +($ imgWidth / 2) - ($ the_box [ width] / 2),
$ the_box [top] +($ imgHeight / 2) - ($ the_box [height] / 2),
$ color,
$ font_ttf,
$ text_string);

//保存文件
imagepng($ image,'.. / .. / images / NewBottomImg.png',9);

imagedestroy($ image);

//现在将三个图像合并在一起
//函数合并($ filename_x,$ filename_y,$ filename_result){

//获取指定图像的尺寸
$ filename_vs ='../../Images /'。$ new_image;
$ filename_x ='../../Images/NewTopImg.png';
$ filename_y ='../../Images/NewBottomImg.png';
list($ width_x,$ height_x)= getimagesize($ filename_x);
list($ width_y,$ height_y)= getimagesize($ filename_y);
list($ width_vs,$ height_vs)= getimagesize($ filename_vs);

//在我们走得更远之前,让我们看看我们的文字是否比我们的图像更宽
if($ width_x> $ new_width){//如果它太宽我们可以调整它的大小
//使用GD2 cmd创建较小的图像到最小边
$ line1_img_src ='../../ Images / NewTopImg.png';
$ line1_img_path ='../../Images/NewTopImg.png';
list($ src_width,$ src_height)= getimagesize($ line1_img_src);

$ min = $ new_width; //将我们的最大宽度设置为原始图像的宽度
$ ratio = $ src_height / $ src_width;
$ line1_width = $ min;
$ Line1_height = round($ min * $ ratio);

$ blank_image_line1 = imagecreatetruecolor($ line1_width,$ Line1_height);

imagecolortransparent($ blank_image_line1,imagecolorallocate($ blank_image_line1,0,0,0));

$ image = imagecreatefrompng($ line1_img_src);

imagecopyresampled($ blank_image_line1,$ image,0,0,0,0,$ line1_width,$ Line1_height,$ src_width,$ src_height);

imagepng($ blank_image_line1,$ line1_img_path,9);

imagedestroy($ blank_image_line1);
imagedestroy($ image);

//因为我们调整了第一行的大小,我们需要获得新的维度
$ filename_x ='../../ Images / NewTopImg.png';
list($ width_x,$ height_x)= getimagesize($ filename_x);
//结束调整第一行
}

//现在让我们检查第二行
if($ width_y> $ new_width){//如果它也是wide允许调整大小
//使用GD2 cmd创建更小的图像到最小的一边
$ line2_img_src ='../../ Images / NewBottomImg.png';
$ line2_img_path ='../../ Images / NewBottomImg.png';
list($ src_width,$ src_height)= getimagesize($ line2_img_src);

$ min = $ new_width; //将我们的最大宽度设置为原始图像的宽度
$ ratio = $ src_height / $ src_width;
$ line2_width = $ min;
$ line2_height = round($ min * $ ratio);

$ blank_image_line2 = imagecreatetruecolor($ line2_width,$ line2_height);

imagecolortransparent($ blank_image_line2,imagecolorallocate($ blank_image_line2,0,0,0));

$ image = imagecreatefrompng($ line2_img_src);

imagecopyresampled($ blank_image_line2,$ image,0,0,0,0 $ line2_width,$ line2_height,$ src_width,$ src_height);

imagepng($ blank_image_line2,$ line2_img_path,9);

imagedestroy($ blank_image_line2);
imagedestroy($ image);

//因为我们调整了第二行的大小,我们需要获得新的维度
$ filename_y ='../../ Images / NewBottomImg.png';
list($ width_y,$ height_y)= getimagesize($ filename_y);
//结束调整第二行
}

//创建具有所需尺寸的新图像
$ image = imagecreatetruecolor($ width_vs,$ height_vs);

//加载图像然后复制到目标图像
if($ type ==gif|| $ type ==png){
imagecolortransparent($ image ,imagecolorallocate($ image,0,0,0));
}
if($ type =='jpg'){
$ image_vs = imagecreatefromjpeg($ filename_vs);
}
if($ type =='png'){
$ image_vs = imagecreatefrompng($ filename_vs);
}
if($ type =='gif'){
$ image_vs = imagecreatefromgif($ filename_vs);
}
$ image_x = imagecreatefrompng($ filename_x);
$ image_y = imagecreatefrompng($ filename_y);

//为合并图像设置位置
$ vs_x = imagesx($ image); //已完成图片的宽度
$ vs_y = imagesy($ image); //已完成图片的高度
$ x_x = $ width_x; //顶行的宽度
$ x_x =($ vs_x / 2) - ($ x_x / 2);
$ x_y = $ new_height + 30; //原始img + 20px的高度我们从画布顶部放下它+ 10px以上我们放置在画布上的图片下面的间距
$ y_x = $ width_y; //底线的宽度
$ y_x =($ vs_x / 2) - ($ y_x / 2);
$ y_y = $ new_height + 70; //原始img + 20px的高度我们从画布顶部放下它+ 40px以上的间距低于第一行文本

imagecopy($ image,$ image_vs,0,0,0 ,0,$ width_vs,$ height_vs);
imagecopy($ image,$ image_x,$ x_x,$ x_y,0,0,$ width_vs,$ height_vs);
imagecopy($ image,$ image_y,$ y_x,$ y_y,0,0,$ width_vs,$ height_vs);


//为我们的画布设置尺寸
$ adj_width = $ new_width + 40;
$ adj_height = $ new_height + 120;

$ bkgrd = imagecreatetruecolor($ adj_width,$ adj_height);
imagefilledrectangle($ bkgrd,0,0,$ adj_width,$ adj_height,0x000000);
$ sx = imagesx($ bkgrd)-imagesx($ bkgrd)+20;
$ sy = imagesy($ bkgrd)-imagesy($ bkgrd)+20;

//将我们的原始图像放在画布中心,距离顶部
imagecopymerge 20px($ bkgrd,$ new_image_p,$ sx,$ sy,0,0,imagesx($ bkgrd) ,imagesy($ bkgrd),100);

//将图像保存到文件并释放内存
if($ type ==jpg){
imagejpeg($ image,$ filename_vs,80);
}
if($ type ==gif){
imagegif($ image,$ filename_vs);
}
if($ type ==png){
imagepng($ image,$ filename_vs,9);
}

//清理
imagedestroy($ image);
imagedestroy($ image_x);
imagedestroy($ image_y);
imagedestroy($ image_vs);

// merge($ filename_x,$ filename_y,$ filename_vs);

} //如果表单已提交
?>结束
< table width =800border =0cellspacing =0cellpadding =5align =center>
< tr>
< td>< div id =FormContainer>
< table width =100%border =0cellpadding =0cellspacing =0>
< tr>
< td>< div id =Heading> IMAGE UPLOAD< / div>< / td>
< / tr>
< / table>
< form enctype =multipart / form-dataid =form1name =form1method =postaction =<?php echo $ FormAction;?>>
< table border =0align =centercellpadding =5cellspacing =0>
< tr>
< td colspan =2>仅允许使用JPG,JPEG,PNG和GIF文件。< / td>
< / tr>
< tr>
< td>& nbsp;< / td>
< td>& nbsp;< / td>
< / tr>
< tr>
< td>< div align =rightclass =Strong>文件:< / div>< / td>
< td>< input name =ImageNametype =fileid =ImageNamesize =50/>< / td>
< / tr>
< tr>
< td>& nbsp;< / td>
< td>& nbsp;< / td>
< / tr>
< tr>
< td nowrap =nowrapclass =ElementTitle>< div align =right>第1行文字:< / div>< / td>
< td>< input name =TopLinetype =textid =TopLinevalue =这是一个很长的第一行,看看如果它太长会发生什么size =75 maxlength =100/>< / td>
< / tr>
< tr>
< td nowrap =nowrapclass =ElementTitle>< div align =right>第2行文字:< / div>< / td>
< td>< input name =BottomLinetype =textid =BottomLinevalue =这是一个很长的第二行,看看如果它太长就会发生什么。即使是更长的行比第一个。 size =75maxlength =100/>< / td>
< / tr>
< tr>
< td>& nbsp;< / td>
< td>& nbsp;< / td>
< / tr>
< tr>
< td colspan =2>< table width =150border =0align =centercellpadding =5cellspacing =0>
< tr>
< td>< div align =centerstyle =width:80px; height:37px;>
< input name =Submittype =submitclass =Submitvalue =Upload/>
< / div>< / td>
< td>< div align =centerstyle =width:75px; height:37px;>
< input name =Submit22type =resetclass =Submitvalue =Reset/>
< / div>< / td>
< / tr>
< / table>< / td>
< / tr>
< tr>
< td>& nbsp;< / td>
< td>& nbsp;< / td>
< / tr>
< / table>< input type =hiddenname =MM_insertid =MM_insertvalue =form1>
< / form>
< / div><! - 结束表单容器 - >
< / td>
< / tr>
< tr>
< td>& nbsp;< / td>
< / tr>
< / table>

基本上你正在做的是


  1. 为第一行和第二行创建两个图像

  2. 检查这些图像是否比现有图像更宽
    ,如果是这样的话

  3. 调整大小以适合原始图像宽度

  4. 最后将所有三个图像合并为一个。

您可以在此处更改默认文字大小... $ font_size = 22 $ font_size = 16 分别为第一行和第二行。



不要忘记上传你的ttf字体文件并正确指向它。



最后,你可以在最后添加代码,一旦你完成它们就删除你的两个临时文件。



jodebrabec的部分功劳我在这里修改并使用的calculateTextBox函数。



长文本的示例输出


So I have the image:

and I want to add text under the image (make demotivational image). So I extend it height and add additional height to the bottom. What I need is write the text:

Top text

bottom longer text

also I need these words to be centered on the image. So the ouput should be:

everything is on PHP GD library. The problem is - I don't know how to calculate proportion of font size and center it. My function which is not working, calculate font size wrong and align text wrong..

private function __generate_text_pref($type)
{
    $data = array();
    switch ($type) {
        case 'title':
            $data['percent'] = 0.9;
            $data['text_width_percent'] = 0.8;
            break;
        case 'subtitle':
            $data['percent'] = 0.92;
            $data['text_width_percent'] = 0.6;
            break;
        default:
            $data['percent'] = 0.86;
            $data['text_width_percent'] = 0.8;
            break;
    }

    list($img_width, $img_height) = getimagesize($this->settings['__temp_image']);

    // find font-size for $txt_width = 80% of $img_width...
    $data['font_size'] = 1;
    $txt_max_width = intval($data['text_width_percent'] * $img_width);

    do {

        $data['font_size'] ++;
        $p = imagettfbbox($data['font_size'], 0, $this->settings['font'], $this->settings['__title']);
        $txt_width = $p[2] - $p[0];
        // $txt_height=$p[1]-$p[7]; // just in case you need it

    } while ( $txt_width <= $txt_max_width );

    //$data['font_size'] = ($data['font_size'] > 24) ? 24 : $data['font_size'];

    return array(
        'font_size' => $data['font_size'],
        'asys'      => array(
            'x' => (($img_width - $txt_width) / 2),
            'y' => ($img_height * $data['percent'])
        )
    );
}

it should have the default font size for title and subtitle and decrease it to lower only in that case when text is longer and not fit in the wrapper..

解决方案

Since it seems to be pretty difficult to determine if text is wider than its bounding box without being able to actually "see" it, this is the solution I came up with.

I used a 1000px wide image and resized it to 600. Of course you evidently have all of this worked out already.

I'm not all that great at writing answers (although the code has been tested and does work) so I hope this helps.

<?php
$FormAction = $_SERVER['PHP_SELF'];

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {  // if form is submitted

// get original image
$fileName = $_FILES["ImageName"]["name"]; // The file name
$fileTempLoc = $_FILES["ImageName"]["tmp_name"]; // File in the PHP tmp folder
$type = strtolower(substr(strrchr($fileName,"."),1));
if($type == 'jpeg') { $type = 'jpg'; }

// Temporary upload image name
$original_image = $_FILES['ImageName']['tmp_name'];

// Name to save the image as - in this case the same as the original
$new_image = $_FILES['ImageName']['name'];

// Get the image dimensions
$uploaded_size = getimagesize($original_image);
$uploaded_imgw = $uploaded_size[0];
$uploaded_imgh = $uploaded_size[1];

// Maximum image width and height
$max_width = "600";
$max_height = "600";

// Thumbnail image width and height
$thumbnail_max_width = "100";
$thumbnail_max_height = "100";

// Check to see if we need to resize the image
if ($uploaded_imgw > 600 || $uploaded_imgh > 600) { // if image is larger than 600x600
// Resize image using GD2 cmd
// Get new dimensions
list($width_orig, $height_orig) = getimagesize($original_image);
$ratio_orig = $width_orig/$height_orig;
// resize our image proportionately maintaining its original aspect
if ($thumbnail_max_width/$thumbnail_max_height > $ratio_orig) {
   $width = $max_width*$ratio_orig; //576
   $height = $max_height;
} else {
   $height = $max_height/$ratio_orig; // 576
   $width = $max_width; //600
}
// Resample / Resize the image
$orig_image_p = imagecreatetruecolor($width, $height);

if($type == "gif" || $type == "png"){
    imagecolortransparent($orig_image_p, imagecolorallocate($orig_image_p, 0, 0, 0));
}
if($type == "jpg") {
    $temp_image = imagecreatefromjpeg($original_image);
}
if($type == "gif") {
    $temp_image = imagecreatefromgif($original_image);
}
if($type == "png") {
    $temp_image = imagecreatefrompng($original_image);
}

imagecopyresampled($orig_image_p, $temp_image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);

if($type == "jpg") {
    imagejpeg($orig_image_p, $original_image, 80);
}
if($type == "gif") {
    imagegif($orig_image_p, $original_image);
}
if($type == "png") {
    imagepng($orig_image_p, $original_image, 9);
}
move_uploaded_file($original_image, '../../Images/'.$new_image);
imagedestroy($temp_image);
imagedestroy($orig_image_p);
} else { // if image is smaller than 900x900
$small_image_p = imagecreatetruecolor($uploaded_imgw, $uploaded_imgh);

if($type == "gif" || $type == "png"){
    imagecolortransparent($small_image_p, imagecolorallocate($small_image_p, 0, 0, 0));
}

if($type == "jpg") {
    $small_temp_image = imagecreatefromjpeg($original_image);
}
if($type == "gif") {
    $small_temp_image = imagecreatefromgif($original_image);
}
if($type == "png") {
    $small_temp_image = imagecreatefrompng($original_image);
}

imagecopyresampled($small_image_p, $small_temp_image, 0, 0, 0, 0, $uploaded_imgw, $uploaded_imgh, $uploaded_imgw, $uploaded_imgh);

if($type == "jpg") {
    imagejpeg($small_image_p, $original_image, 80);
}
if($type == "gif") {
    imagegif($small_image_p, $original_image);
}
if($type == "png") {
    imagepng($small_image_p, $original_image, 9);
}
move_uploaded_file($original_image, '../../Images/'.$new_image);
imagedestroy($small_temp_image);
imagedestroy($small_image_p);
} // end if smaller than 600x600

// Get the image we will work with
$new_img_src = '../../Images/'.$new_image;
list($new_width, $new_height) = getimagesize($new_img_src);

if($type == 'jpg') {
    $im = imagecreatefromjpeg($new_img_src);
}
if($type == 'png') {
    $im = imagecreatefrompng($new_img_src);
}
if($type == 'gif') {
    $im = imagecreatefromgif($new_img_src);
}

// Create a blank canvas for our new image
$new_image_p = imagecreatetruecolor($new_width, $new_height);

if($type == "gif" || $type == "png"){
    imagecolortransparent($new_image_p, imagecolorallocate($new_image_p, 0, 0, 0));
}
if($type == 'jpg') {
    $new_temp_image = imagecreatefromjpeg($new_img_src);
}
if($type == 'png') {
    $new_temp_image = imagecreatefrompng($new_img_src);
}
if($type == 'gif') {
    $new_temp_image = imagecreatefromgif($new_img_src);
}

imagecopyresampled($new_image_p, $new_temp_image, 0, 0, 0, 0, $new_width, $new_height, $new_width, $new_height);

// set dimensions for our canvas
$adj_width = $new_width+40;
$adj_height = $new_height+120;

$bkgrd = imagecreatetruecolor($adj_width, $adj_height);
imagefilledrectangle($bkgrd, 0, 0, $adj_width, $adj_height, 0x000000);
$sx = imagesx($bkgrd)-imagesx($bkgrd)+20;
$sy = imagesy($bkgrd)-imagesy($bkgrd)+20;

// Place our original image on the canvas centered and 20px from the top
imagecopymerge($bkgrd, $new_image_p, $sx, $sy, 0, 0, imagesx($bkgrd), imagesy($bkgrd), 100);

// Save the image to file and free memory
if($type == "jpg") {
    imagejpeg($bkgrd, $new_img_src, 80);
}
if($type == "gif") {
    imagegif($bkgrd, $new_img_src);
}
if($type == "png") {
    imagepng($bkgrd, $new_img_src, 9);
}
imagedestroy($im);
imagedestroy($new_image_p);
imagedestroy($bkgrd);

//Now we create our text as images to be merged with our new image

// check width of bounding box
function calculateTextBox($text,$fontFile,$fontSize,$fontAngle) {
/************
simple function that calculates the *exact* bounding box (single pixel precision).
The function returns an associative array with these keys:
left, top:  coordinates you will pass to imagettftext
width, height: dimension of the image you have to create
*************/
    $rect = imagettfbbox($fontSize,$fontAngle,$fontFile,$text);
    $minX = min(array($rect[0],$rect[2],$rect[4],$rect[6]));
    $maxX = max(array($rect[0],$rect[2],$rect[4],$rect[6]));
    $minY = min(array($rect[1],$rect[3],$rect[5],$rect[7]));
    $maxY = max(array($rect[1],$rect[3],$rect[5],$rect[7]));

    return array(
     "left"   => abs($minX) - 1,
     "top"    => abs($minY) - 1,
     "width"  => $maxX - $minX,
     "height" => $maxY - $minY,
     "box"    => $rect
    );
}

$text_string = $_POST['TopLine']; //"This is a very long first line to see what happens if it is too long";
$font_ttf = "arial.ttf";
$font_size = 22;
$text_angle = 0;
$text_padding = 10; // Img padding - around text

$the_box = calculateTextBox($text_string, $font_ttf, $font_size, $text_angle);

$imgWidth = $the_box["width"] + $text_padding;
$imgHeight = $the_box["height"] + $text_padding;

$image = imagecreatetruecolor($imgWidth,$imgHeight);
imagefill($image, imagecolorallocate($image, 0, 0, 0));

$color = imagecolorallocate($image, 255, 255, 255);

imagettftext($image,
    $font_size,
    $text_angle,
    $the_box["left"] + ($imgWidth / 2) - ($the_box["width"] / 2),
    $the_box["top"] + ($imgHeight / 2) - ($the_box["height"] / 2),
    $color,
    $font_ttf,
    $text_string);

// save file
imagepng($image, '../../Images/NewTopImg.png', 9);

// destroy the image and start over
imagedestroy($image);

$text_string = $_POST['BottomLine']; //"This is a very long second line to see what happens if it is too long. Even a longer line than the first one.";
$font_ttf = "arial.ttf";
$font_size = 16;
$text_angle = 0;
$text_padding = 10; // Img padding - around text

$the_box = calculateTextBox($text_string, $font_ttf, $font_size,     $text_angle);

$imgWidth = $the_box["width"] + $text_padding;
$imgHeight = $the_box["height"] + $text_padding;

$image = imagecreatetruecolor($imgWidth,$imgHeight);
imagefill($image, imagecolorallocate($image, 0, 0, 0));

$color = imagecolorallocate($image, 255, 255, 255);

imagettftext($image,
    $font_size,
    $text_angle,
    $the_box["left"] + ($imgWidth / 2) - ($the_box["width"] / 2),
    $the_box["top"] + ($imgHeight / 2) - ($the_box["height"] / 2),
    $color,
    $font_ttf,
    $text_string);

// save file
imagepng($image, '../../Images/NewBottomImg.png', 9);

imagedestroy($image);

// Now merge the three images together
//function merge($filename_x, $filename_y, $filename_result) {

// Get dimensions for specified images
$filename_vs = '../../Images/'.$new_image;
$filename_x = '../../Images/NewTopImg.png';
$filename_y = '../../Images/NewBottomImg.png';
list($width_x, $height_x) = getimagesize($filename_x);
list($width_y, $height_y) = getimagesize($filename_y);
list($width_vs, $height_vs) = getimagesize($filename_vs);

// before we go any farther lets find out if our text is wider than our image
if($width_x > $new_width) { // if it is too wide lets resize it
    // create smaller image using GD2 cmd to the smallest side
    $line1_img_src = '../../Images/NewTopImg.png';
    $line1_img_path = '../../Images/NewTopImg.png';
    list($src_width, $src_height) = getimagesize($line1_img_src);

    $min = $new_width; // set our max width to that of the original image
    $ratio = $src_height/$src_width;
    $line1_width = $min;
    $Line1_height = round($min * $ratio);

    $blank_image_line1 = imagecreatetruecolor($line1_width, $Line1_height);

    imagecolortransparent($blank_image_line1, imagecolorallocate($blank_image_line1, 0, 0, 0));

    $image = imagecreatefrompng($line1_img_src);

    imagecopyresampled($blank_image_line1, $image, 0, 0, 0, 0, $line1_width, $Line1_height, $src_width, $src_height);

    imagepng($blank_image_line1, $line1_img_path, 9);

    imagedestroy($blank_image_line1);
    imagedestroy($image);

    // Because we resized the first line we need to get the new dimensions
    $filename_x = '../../Images/NewTopImg.png';
    list($width_x, $height_x) = getimagesize($filename_x);
    // End resize first line
}

// Now lets check line two
if($width_y > $new_width) { // if it is too wide lets resize it
    // create smaller image using GD2 cmd to the smallest side
    $line2_img_src = '../../Images/NewBottomImg.png';
    $line2_img_path = '../../Images/NewBottomImg.png';
    list($src_width, $src_height) = getimagesize($line2_img_src);

    $min = $new_width; // set our max width to that of the original image
    $ratio = $src_height/$src_width;
    $line2_width = $min;
    $line2_height = round($min * $ratio);

    $blank_image_line2 = imagecreatetruecolor($line2_width, $line2_height);

    imagecolortransparent($blank_image_line2, imagecolorallocate($blank_image_line2, 0, 0, 0));

    $image = imagecreatefrompng($line2_img_src);

    imagecopyresampled($blank_image_line2, $image, 0, 0, 0, 0, $line2_width, $line2_height, $src_width, $src_height);

    imagepng($blank_image_line2, $line2_img_path, 9);

    imagedestroy($blank_image_line2);
    imagedestroy($image);

    // Because we resized the second line we need to get the new dimensions
    $filename_y = '../../Images/NewBottomImg.png';
    list($width_y, $height_y) = getimagesize($filename_y);
    // End resize second line
}

// Create new image with desired dimensions
$image = imagecreatetruecolor($width_vs, $height_vs);

// Load images and then copy to destination image
if($type == "gif" || $type == "png"){
    imagecolortransparent($image, imagecolorallocate($image, 0, 0, 0));
}
if($type == 'jpg') {
    $image_vs = imagecreatefromjpeg($filename_vs);
}
if($type == 'png') {
    $image_vs = imagecreatefrompng($filename_vs);
}
if($type == 'gif') {
    $image_vs = imagecreatefromgif($filename_vs);
}
$image_x = imagecreatefrompng($filename_x);
$image_y = imagecreatefrompng($filename_y);

//set location for merged images
$vs_x = imagesx($image); // width of our completed image
$vs_y = imagesy($image);// height of our completed image
$x_x = $width_x; // width of the top line
$x_x = ($vs_x/2)-($x_x/2);
$x_y = $new_height+30; // height of the original img + 20px we dropped it from the top of the canvas + 10px more for spacing below our "picture" placed on the canvas
$y_x = $width_y; // width of the bottom line
$y_x = ($vs_x/2)-($y_x/2);
$y_y = $new_height+70; // height of the original img + 20px we dropped it from the top of the canvas + 40px more for spacing below the first line of text

imagecopy($image, $image_vs, 0, 0, 0, 0, $width_vs, $height_vs);
imagecopy($image, $image_x, $x_x, $x_y, 0, 0, $width_vs, $height_vs);
imagecopy($image, $image_y, $y_x, $y_y, 0, 0, $width_vs, $height_vs);


// set dimensions for our canvas
$adj_width = $new_width+40;
$adj_height = $new_height+120;

$bkgrd = imagecreatetruecolor($adj_width, $adj_height);
imagefilledrectangle($bkgrd, 0, 0, $adj_width, $adj_height, 0x000000);
$sx = imagesx($bkgrd)-imagesx($bkgrd)+20;
$sy = imagesy($bkgrd)-imagesy($bkgrd)+20;

// Place our original image on the canvas centered and 20px from the top
imagecopymerge($bkgrd, $new_image_p, $sx, $sy, 0, 0, imagesx($bkgrd),     imagesy($bkgrd), 100);

// Save the image to file and free memory
if($type == "jpg") {
    imagejpeg($image, $filename_vs, 80);
}
if($type == "gif") {
    imagegif($image, $filename_vs);
}
if($type == "png") {
    imagepng($image, $filename_vs, 9);
}

// Clean up
imagedestroy($image);
imagedestroy($image_x);
imagedestroy($image_y);
imagedestroy($image_vs);

//merge($filename_x, $filename_y, $filename_vs);

} // end if form submitted
?>
<table width="800" border="0" cellspacing="0" cellpadding="5" align="center">
  <tr>
<td><div id="FormContainer">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><div id="Heading">IMAGE UPLOAD</div></td>
      </tr>
    </table>
<form enctype="multipart/form-data" id="form1" name="form1" method="post" action="<?php echo $FormAction; ?>">
    <table border="0" align="center" cellpadding="5" cellspacing="0">
      <tr>
        <td colspan="2">Only JPG, JPEG, PNG and GIF files are allowed.</td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td><div align="right" class="Strong">File:</div></td>
        <td><input name="ImageName" type="file" id="ImageName" size="50" /></td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td nowrap="nowrap" class="ElementTitle"><div align="right">Line 1 Text:</div></td>
        <td><input name="TopLine" type="text" id="TopLine" value="This is a very long first line to see what happens if it is too long" size="75" maxlength="100" /></td>
        </tr>
      <tr>
        <td nowrap="nowrap" class="ElementTitle"><div align="right">Line 2 Text:</div></td>
        <td><input name="BottomLine" type="text" id="BottomLine" value="This is a very long second line to see what happens if it is too long. Even a longer line than the first one." size="75" maxlength="100" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td colspan="2"><table width="150" border="0" align="center" cellpadding="5" cellspacing="0">
          <tr>
            <td><div align="center" style="width:80px; height:37px;">
              <input name="Submit" type="submit" class="Submit" value="Upload" />
            </div></td>
            <td><div align="center" style="width:75px; height:37px;">
              <input name="Submit22" type="reset" class="Submit" value="Reset" />
            </div></td>
          </tr>
        </table></td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      </table><input type="hidden" name="MM_insert" id="MM_insert" value="form1">
  </form>
</div><!-- end form container -->
</td>
</tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

Basically what you are doing is

  1. Creating two images for the first line and second line
  2. Checking to see if those images are wider than your existing image and if so
  3. Resizing them to fit your original image width
  4. Finally merging all three images into one.

Your default text sizes can be changed here... $font_size = 22 and $font_size = 16 for the first and second line respectively.

Don't forget to upload your ttf font file and point to it correctly.

And finally, you can add code at the end to delete your two temporary files once your done with them.

Partial credit to jodebrabec for the calculateTextBox function I modified and used here. You can find it here

Sample output with short text

Sample output with long text

这篇关于按比例在图像上书写文字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆