H5 canvas生成图片并上传文件转成PDF下载
最近遇到一个业务需求，在小程序端定制预览功能，并在预览的图片中使用指定的外部字体。将预览的图片上传OSS，后端生成PDF，在管理系统中下载。
但是…………，经过实践发现，小程序尽管做了分包处理，依旧不能在本地存放字体包，把字体放OSS上返回，但是出现跨域，尽管配置了允许跨域，依旧不行。而且！！！小程序的canvas API没法设置字体，没有h5中canvas中的context.font = '字体名称'方法。最终决定曲线救国，放弃小程序端的预览生成canvas功能，将canvas引入字体，生成图片等操作放在管理系统中，采用原生canvas来实现。
技术要点
- canvas文字排版
- canvas设置指定背景颜色
- canvas引入外部字体
- canvas绘制文字图片
- 将canvas生成的base64图片转成file上传（这里根据后端协商，此处后端要求）
- 将图片生成PDF，并点击批量下载
实现步骤
canvas文字排版
在一般HTML容器中，如果要实现文字的排版很容易。比如：
实现文本超出自动换行，默认文本超出容器宽度就会自动换行，也可以使用word-wrap:break-word实现强制换行。
实现文字竖排,有几种方式：
- 给文本容器设置
writing-mode样式：(存在兼容性问题)
writing-mode:vertical-rl;//垂直方向自右而左的书写方式。即 top-bottom-right-left或者writing-mode:vertical-lr;//垂直方向内内容从上到下，水平方向从左到右具体效果如图：
但是这个对于浏览器也存在一定兼容性问题，使用的时候需要注意。
- 使用
宽度控制换行：（不存在兼容性，推荐方式）
设置每行的宽度为一个字大小，利用文本超出默认换行的特性，或者设置超出强制换行,实现文本竖排。
- 利用
br标签实现或者每个文字存放一个标签实现换行：（很死板的写法，比较low，不推荐）
给每个文字后添加br标签，或者每个文字放一个标签，这样写灵活性不高，非常不推荐！
在canvas中实现文字排版
- 实现文字横排
canvas中，如果文本超出canvas大小，并不会自动换行，会直接在超出的后面继续绘制成一排。canvas中也没有直接可以设置换行的api，那该怎么实现换行呢？
可以通过js控制，通过计算当前绘制文字的x坐标，如果x坐标大于canvas的宽度，将x坐标赋值为0（绘制的起始点x坐标），y坐标累加一个文字的高度，从而实现文本换行。
- 实现文字竖排
竖排的逻辑和横排是一样的。文字竖排只是y坐标累加，趟超过canvas的高度时，将y坐标赋值为0（绘制的起始点y坐标），x坐标累加一个文字的高度，从而实现竖排且文本换行。
部分代码片段
/** * canvas绘制文字 * @param {CanvasRenderingContext2D对象} context * @param {绘制内容} text * @param {起始点x坐标制} x * @param {起始点y坐标制} y */ drawTextVertical(context, text, x, y) { let startX = x, startY = y; //记录开始的位置，用于文字换行赋值 let spaceCount = 0; let arrText = text.trim().split(''); let formatText = text.replace(/\//g, '').split(''); // 去掉单斜杠 let align = context.textAlign; let baseline = context.textBaseline; context.textAlign = 'center'; context.textBaseline = 'middle'; context.font = 'Pacifico' // 开始逐字绘制 arrText.forEach(function (letter, index) { // 确定下一个字符的纵坐标位置 // 是否需要旋转判断 let code = letter.charCodeAt(0); // 计算文字间距 let letterWidth = 22 * 2.3; if (code <= 256) { context.translate(x, y); // 英文字符，旋转90° context.rotate(90 * Math.PI / 180); context.translate(-x, -y); } if (code !== 47) context.fillText(letter, x, y); // 旋转坐标系还原成初始态 context.setTransform(1, 0, 0, 1, 0, 0); // 单斜杠换行或者长度超过8 此处要过滤在第9字是换行的符号的情况 if ((code === 47 && !spaceCount) || (!spaceCount && index && index % 7 === 0)) { // 单斜杠/ 代表换行 charCode=47 spaceCount += 1; y = startY; x = index ? (startX + letterWidth) : x; startX = x; } else if (code !== 47) { // 如果是空格 减少字间距 if (code !== 32) { y = y + letterWidth; } else { y = y + letterWidth / 2 } } }); // 水平垂直对齐方式还原 context.textAlign = align; context.textBaseline = baseline; }canvas设置背景颜色
canvas生成图片的时候可以指定图片格式(jpg,jpeg,png等),但是只能生成位图（放大会失真）。如果想提高canvas生成图片的质量，可以引入 hidpi-canvas-polyfill 插件，具体使用可以参考这篇文章 解决canvas生成图片模糊 。canvas生成图片的背景默认是透明的，如果想单独设置背景颜色，可以使用ctx.fillStyle进行填充，但是设置文字颜色，则文字颜色会覆盖背景颜色，因为设置文字颜色也是使用ctx.fillStyle。那么，这种情况可以使用一下办法解决：
1.使用canvas.getImageData复制画布上的像素数据
2.循环遍历复制的每个像素点，然后给每个像素设置rgb值
3.将设置好的流数据通过putImageData放回画布上。
let imageData = ctx.getImageData(0, 0, width, height); for (let i = 0; i < imageData.data.length; i += 4) { // 当该像素是透明的,则设置成白色 if (imageData.data[i + 3] == 0) { imageData.data[i] = 255; imageData.data[i + 1] = 255; imageData.data[i + 2] = 255; imageData.data[i + 3] = 255; } } ctx.putImageData(imageData, 0, 0);但是要注意背景和文字的绘制顺序，必须先绘制背景，再绘制文字，如果顺序颠倒，则文字会出现很明显的锯齿状，有点模糊,这就和定位中z-index原理类似。
canvas引入外部字体
1.首先引入字体库，为了节省本地空间，可以从服务端引入,但是需要注意跨域问题，
也可以将字体库放本地，直接相对路径引入。
// 从服务端引入@font-face { font-family: "FZCUJINLJW"; src: url('https://www.xxxx.com/FZCUJINLJW.TTF') ;}// 本地引入@font-face { font-family: "FZCUJINLJW"; src: url('../../assets/FZCUJINLJW.TTF') ;}2.通过CanvasRenderingContext2D对象设置字体，字号等
ctx.font = '24px FZCUJINLJW';ctx.fillStyle = '#db9a00';//填充颜色 canvas绘制文字图片
let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');//拿到一个CanvasRenderingContext2D对象ctx.beginPath();// 开始绘制文字ctx.font = `${FONT_SIZE}px FZCUJINLJW`;ctx.fillStyle = '#db9a00';//填充颜色 ctx.fillText('绘制的内容', /*绘制的x坐标*/, /*绘制的y坐标*/);let imgBase64 = canvas.toDataURL('image/png', 1);ctx.closePath();ctx.save();// 保存当前画布内容//如果需要在画布上循环绘制多次，需要手动清除画布上已经保存的内容，如果不清除，则画布内容会叠加。ctx.clearRect(0, 0, canvasObj.width, canvasObj.height);canvas生成图片并上传服务端
通过ctx.toDataURL可以获取到画布内容的base64编码
let imgBase64 = canvas.toDataURL('image/png', 1);如果服务端支持使用base64上传，则不用处理，此处因为后端需要file文件类型，所以需要将base64转成file对象，代码如下:
let file = dataURLtoFile(imgBase64, 'jpg'); // 将base转为file对象function dataURLtoFile(urlData, fileName) { var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte var mime = urlData.split(',')[0].match(/:(.*?);/)[1]; //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new File([ab], fileName, { type: mime });}转成file对象后，通过FormData格式上传
let formdata = new FormData();formdata.append('multipartList', file);ajax.post(url,data:formdata).then()此处需要注意，当canvas生成的图片比较小时（比如5kb以下），有可能导致文件上传失败，我之前踩过此坑。
将图片生成PDF，并点击批量下载
此处是和后端商量，将canvas生成的图片上传服务端，并返回图片的OSS地址，再将此地址作为参数传给后端，获取到PDF的下载链接，前端通过window.open(url)的方式实现文件下载。
let uploadUrl = window.interfercesPrefix + '/admin/goods/tbgoods/uploadImages';let downLoadUrl = '/app/goods/tbgoods/downLoadPdf';// 上传图片 ajaxUploderImg({ url: uploadUrl, data: formdata }).then(res => { // 将图片作为参数获取PDF下载地址 this.props.dispatch(downLoadPdf({ url: downLoadUrl, imgUrl: res.data })); }).catch(err => { if (err) { notification['error']({ message: err.message, description: '图片绘制出错，请重试！', }); } else { notification['error']({ message: '下载出错，请返回' }); } })