我想很多经常做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都是可以实现的!
如果觉得《h5 ajax php 图片上传 图片上传生成海报H5技术详解》对你有帮助,请点赞、收藏,并留下你的观点哦!