imagick中文自动换行和base64串上传图片

文章目录

  1. 1. imagick中中文自动换行
  2. 2. base64串的图片上传

本文分享两个:

  • imagick中中文自动换行
  • base64串的图片上传

没啥太大关联,只是工作用到记录下,供需要的用

imagick中中文自动换行

首先是imgick的类库使用推荐 Intervention/image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$canvas = Image::canvas(500,500,'#e2e2e2');
$txt = self::autoWrap($fontSize, './msyh.ttf', $text,$lineWidth);
//$txt = array_slice(explode(PHP_EOL, $txt), 0, 2);//这里是处理需要显示几行
//$txt = implode(PHP_EOL, $txt);
//这里x,y设置为要显示文字左上角线的中心点坐标就可以,$font->align('center');会自动让文字左右居中
$canvas->text($txt, $x, $y, function (Font $font) use ($t) {
$font->file('./msyh.ttf');//imgick作为driver需配置字体文件
$font->size($t['size']);//$t是字体相关配置
$font->color($t['color']);
$font->align('center');
$font->valign('top');
});

重点是如何计算每个字的长度,然后通过行宽断句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
* 根据预设宽度让文字自动换行
* @param int $fontsize 字体大小
* @param string $ttfpath 字体名称
* @param string $str 字符串
* @param int $width 预设宽度
* @param int $fontangle 角度
* @param string $charset 编码
* @return string $_string 字符串
*/
protected static function autoWrap($fontsize, $ttfpath, $str, $width, $fontangle = 0, $charset = 'utf-8')
{
$_string = "";
$_width = 0;
$temp = self::chararray($str, $charset);
foreach ($temp[0] as $v) {
$w = self::charWidth($fontsize, $fontangle, $v, $ttfpath);
$_width += intval($w);
if (($_width > $width) && ($v !== "")) {
$_string .= PHP_EOL;
$_width = 0;
}
$_string .= $v;
}
return $_string;
}
/**
* 返回一个字符的数组
*
* @param string $str 文字
* @param string $charset 字符编码
* @return array $match 返回一个字符的数组
*/
public static function charArray($str, $charset = "utf-8")
{
$re['utf-8'] = "/[\x01-\x7f]|[\xc2-\xdf][\x80-\xbf]|[\xe0-\xef][\x80-\xbf]{2}|[\xf0-\xff][\x80-\xbf]{3}/";
$re['gb2312'] = "/[\x01-\x7f]|[\xb0-\xf7][\xa0-\xfe]/";
$re['gbk'] = "/[\x01-\x7f]|[\x81-\xfe][\x40-\xfe]/";
$re['big5'] = "/[\x01-\x7f]|[\x81-\xfe]([\x40-\x7e]|\xa1-\xfe])/";
preg_match_all($re[$charset], $str, $match);
return $match;
}
/**
* 返回一个字符串在图片中所占的宽度
* @param int $fontsize 字体大小
* @param int $fontangle 角度
* @param string $ttfpath 字体文件
* @param string $char 字符
* @return int $width
*/
protected static function charWidth($fontsize, $fontangle, $char, $ttfpath)
{
$box = @imagettfbbox($fontsize, $fontangle, $ttfpath, $char);
$width = max($box[2], $box[4]) - min($box[0], $box[6]);
return $width;
}

base64串的图片上传

这里我合成图片调用$img->encode('data-url')输出前台预览图片,
确认后才上传,为了方便就直接那base64串转blob上传

为了通用,如果你想搞个大的,比方说直接将页面的某个图片上传,可以参考一下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//base64串转blob
function getBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
//图片直接转data-url
function getBase64Image(img, quality) {
var canvas = document.createElement("canvas");
if (!quality) {
quality = 0.6;
}
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext("2d").drawImage(img, 0, 0);
return canvas.toDataURL("image/jpeg", quality);
}
//图片直接上传
function upload(imgObj, callback) {
var blob = getBlob(getBase64Image(imgObj));
var apiUrl = 'xxx';
var fd = new FormData();
fd.append('image', blob);
$.ajax({
url: apiUrl,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
data: fd,
type: 'post',
success: callback
});
}
如有疑问,请留言或邮件newbvirgil@gmail.com
本文链接 : http://blog.newbmiao.com/2017/02/17/auto-wrap-chinese-use-imagick-and-upload-image-by-base64-encode-str.html