我想很多经常做H5同学都会遇到过让用户上传照片的这种需求，那我这里给大家分享一些我常用的一些方法~废话不多时候，下面可以写一些干货，如果有更好的方法欢迎留言讨论！
首先，需要准备一些需要用到的东西。
第一个，腾讯tgideas团队发布过个image-editor移动端的插件，这个还是比较好用的，我也经常用这个来做移动端图片上传的一些功能，当然也有其他的一些插件，我也用过一些，但是在这里不作过多讨论，后面我会专门整理出来！我先把这个插件链接发出来，有需要的人可以去下载一下！戳这里！
第二个，就是安装一个PHP拓展 Imagick
基本准备工作已经做完，然后上代码！
1，引用js，HTML部分 只需要一个div和一个input就可以了。css 部分就省略了，主要说逻辑！
<script src="http://www.zeptojs.cn/zepto.js"></script>
<script src="js/image-editor.js"></script>
<div id="container"> </div>
<input type="file" accept="image/*" id="up_img" class="up_img" value="">
2，js实例化
var eidtor = new mo.ImageEditor({
trigger: $('.up_img'),
container: $('#container'),
background:"none",
width:625,//自己改
height: 785, //自己改
stageX: $('#container')[0].offsetLeft,
})
3.图片用 canvas.toDataURL生成然后ajax上传，
canvas_img = canvas.toDataURL("image/jpeg");
这是前端部分的核心代码，当然每个项目需求不一样，其他的可能需要自己动手写~！
接下来就是PHP部分，需要可以的去查一下Imagick插件的说明。这是说一下常用的一些基本功能！
$bg = new Imagick();//实例化
$bg->readImage("background.png");//读取背景图片
$head_img = new Imagick(); //实例化
$head_img->readImage('headimg.png');//读取头像
$head_img->thumbnailImage(94,94); //生成缩略图尺寸
$head_img->roundCorners(47, 47); //圆角 相当于css 里面的border-radius
$bg->compositeImage($head_img,imagick::COMPOSITE_OVER,30,46);//两张图融合
$new_file_mb=$user_dir.time().rand(10000,99999).".jpg";
$bg->writeImage($new_file_mb);
那如果想打印字在图片模板上面的话，就用下面的代码
$draw = new ImagickDraw();
$draw->setFillColor(new ImagickPixel('#E60113'));
$draw->setFontSize(60);
$draw->setFontWeight(600);
$draw->setFont('DAB.ttf');//必须下个字体、
$draw->settextencoding('utf-8');
$draw->annotation(575,85, "你想要打印的文字");
$bg->drawImage($draw);
基本核心思路的就是这些。有问题的话，可以私我~ 不过我建议按照这个方法，去先查一下相关的文档，然后加上自己的代码逻辑，大部分的这样H5都是可以实现的！
网友评论