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={

'width':imgRadio>1?'100%':'auto',

'height':imgRadio<1?'100%':'auto'

}

that.setState({isUploaded: true, sourceImg: sourceImg, hasFile: true,previewImgStyle:imgStyle})

};

//处理iOS照片旋转

(async function (context) {

sourceImg.src = orientation && orientation != "1"

? await that.rotateImage(context.result, orientation)

: context.result;

})(this);

};

}

//处理ios照片翻转

rotateImage = (img, dir) => {

return new Promise((resolve, reject) => {

var image = new Image();

var that = this;

image.onload = function () {

var degree = 0,

drawWidth=this.naturalWidth,

drawHeight=this.naturalHeight,

width,

height;

var canvas = document.createElement('canvas');

canvas.width = width = drawWidth;

canvas.height = height = drawHeight;

var context = canvas.getContext('2d');

//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式

switch (dir) {

//iphone横屏拍摄，此时home键在左侧

case 3:

degree = 180;

drawWidth = -width;

drawHeight = -height;

break;

//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)

case 6:

canvas.width = height;

canvas.height = width;

degree = 90;

drawWidth = width;

drawHeight = -height;

break;

//iphone竖屏拍摄，此时home键在上方

case 8:

canvas.width = height;

canvas.height = width;

degree = 270;

drawWidth = -width;

drawHeight = height;

break;

}

//使用canvas旋转校正

context.rotate(degree * Math.PI / 180);

context.drawImage(this, 0, 0, drawWidth, drawHeight);

//返回校正图片

resolve(canvas.toDataURL("image/jpeg", 1));

}

image.src = img;

});

}

复制代码

html

复制代码

效果：

4.裁剪图片

到此完成了图片的上传和预览，接下来处理海报合成，背景图是640*1136大小的，但是上传的图片可以是五花八门的，有可能是方的，也有可能是非常长的- -，需要保证图片不变形并显示中心部分，因此需要比较照片的宽高比与背景的宽高比，并拉伸压缩至宽度或高度与背景图片相同，然后裁剪中间部分。

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

canvas.width = 640;

canvas.height = 1136;

//处理等比拉伸压缩用户图片并居中裁剪

var imgRatio = canvas.width / canvas.height; //目标图片的宽高比

var userimgRatio = that.state.sourceImg.width / that.state.sourceImg.height; //原始图片的宽高比

var r = (userimgRatio > imgRatio)

? (canvas.height / that.state.sourceImg.height)

: (canvas.width / that.state.sourceImg.width);

var drawObj = {

sx: userimgRatio > imgRatio

? (that.state.sourceImg.width - canvas.width / r) / 2

: 0,

sy: userimgRatio > imgRatio

? 0

: (that.state.sourceImg.height - canvas.height / r) / 2,

sWidth: canvas.width / r,

sHeight: canvas.height / r,

dx: 0,

dy: 0,

dWidth: canvas.width,

dHeight: canvas.height

};

//图片居中裁剪

ctx.drawImage(that.state.sourceImg, drawObj.sx, drawObj.sy, drawObj.sWidth, drawObj.sHeight, drawObj.dx, drawObj.dy, drawObj.dWidth, drawObj.dHeight);

复制代码

canvas的drawImage方法总共有9个参数

如图示，上传了一张尺寸小且为正方形的图片，先根据背景图片计算宽高比，在用户图片中裁剪出一个宽高比与背景图片宽高比一样的最大范围，并且裁剪图片中心部分，获得开始裁剪的点，左上角这个点x坐标为(that.state.sourceImg.width - canvas.width / r) / 2，y坐标为0，对应sx和sy参数，被剪切图像的宽高是中间部分的宽高(四个黄点所围)，即参数中的swidth为canvas.width / r，sheight为canvas.height / r，最终图片放置位置为铺满canvas，即x=0,y=0，最终图片大小即为canvas的大小，会拉伸图片铺满canvas，最终实现了“获取用户图片中心部分并铺满背景的效果”

5.绘制图片

最后将背景图与上传的图片绘制在一起，并生成base64格式，可以长按保存。

var newimg = new Image();

newimg.src = "/src/images/bg.png";

newimg.onload = function () {

ctx.drawImage(newimg, 0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#fff";

ctx.font = 36 + "px sans-serif";

ctx.fillText(that.state.slogan1, 50, 1000);

ctx.fillText(that.state.slogan2, 50, 1070);

that.setState({

resultImgUrl: canvas.toDataURL("image/jpeg", .5),

isGenerated: true

})

};

复制代码