h5 ajax php 图片上传,图片上传生成海报H5技术详解

我想很多经常做H5同学都会遇到过让用户上传照片的这种需求，那我这里给大家分享一些我常用的一些方法~废话不多时候，下面可以写一些干货，如果有更好的方法欢迎留言讨论！

首先，需要准备一些需要用到的东西。

第一个，腾讯tgideas团队发布过个image-editor移动端的插件，这个还是比较好用的，我也经常用这个来做移动端图片上传的一些功能，当然也有其他的一些插件，我也用过一些，但是在这里不作过多讨论，后面我会专门整理出来！我先把这个插件链接发出来，有需要的人可以去下载一下！戳这里！

第二个，就是安装一个PHP拓展 Imagick

基本准备工作已经做完，然后上代码！

1，引用js，HTML部分 只需要一个div和一个input就可以了。css 部分就省略了，主要说逻辑！

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都是可以实现的！