HTML5海报生成器源码,原生js小项目 - canvas海报生成器

1.背景

之前做过一个营销类移动端h5项目-海报生成器，上传用户本地图片合成海报并支持下载，这次有时间了整理整理。

2.几个重点

上传本地图片并支持预览

处理ios照片翻转

使用canvas对图片等比拉伸缩放并居中裁剪

使用canvas绘制图片以及文本

输出base64并支持下载

3.上传图片

废话不多说，使用html的 标签可以支持文件上传，前端上传验证的话，设置accept="image/*"将文件类型限制为图像。

复制代码

获取当前上传的图片。

var file = event.target.files[0];

复制代码

要完成本地预览图片，需要使用FileReader对象读取所要处理的文件数据，使用readAsDataURL将文件以Data URL形式进行读入页面。同时为了处理ios下照片翻转角的问题，需要先对翻转的照片进行一个修正。使用exif-js这个库可以获取照片的信息，获得翻转角，然后使用canvas画布对图片进行翻转矫正。

//上传图片

uploadImg = event => {

var that = this;

var file = event.target.files[0];

if (!file) {

return;

}

var orientation = "";

//EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js

EXIF.getData(file, function () {

orientation = EXIF.getTag(this, 'Orientation');

});

var reader = new FileReader();

// 将文件以Data URL形式进行读入页面

reader.readAsDataURL(file);

reader.onload = function () {

var sourceImg = new Image();

sourceImg.onload = function () {

var imgRadio=sourceImg.width/sourceImg.height;

var imgStyle