web►php

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 本文链接 : https://newbmiao.github.io/2017/02/17/auto-wrap-chinese-use-imagick-and-upload-image-by-base64-encode-str.html