H5利用canvas实现海报功能
最近接到一个需求，微信中用户上传图片生成海报。这个需求比较常规，实现思路也比较简单，通过利用用户的input输入，对所上传的图片进行处理，最后通过第三方库html2canvas合成对应的图片即可。思路虽然简单，但是在实现的过程中会遇到各种各样的小问题，现在就将遇到的问题进行一次总结。
1、iphone以及部分android机型通过摄像头拍摄的照片被旋转了90度
原因：由于目前的手机拍照基本都在2M以上，而ios中只要超过2M图片就会自动旋转。拍照后直接取出来的UIimage（用UIImagePickerControllerOriginalImage取出），它本身的imageOrientation属性是3，即UIImageOrientationRight。如果这个图片直接使用则没事，但是如果对它进行裁剪、缩放等操作后，它的这个imageOrientation属性会变成0。此时这张图片用在别的地方就会发生旋转。imageOrientation是只读的，不能直接修改其值。
解决方法: 当拍照后，获取input中的图片数据，利用exif.js（Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。）获取到Orientation属性，此属性有四个值
1 表示旋转0度，也就是没有旋转。
6 表示顺时针旋转90度
8 表示逆时针旋转90度
3 旋转180度
我们要做的就是在拍照后，从input中获取到图片，然后得到它的Orientation值，根据Orientation值再对图片进行进一步处理，处理代码如下：
import EXIF from 'exif-js'; var file = { upload: function(e) { var file = e.target.files[0]; var type = file.type.split('/')[0]; if (type != 'image') { alert('请上传图片'); return; } var size = Math.floor(file.size / 1024 / 1024); if (size > 3) { alert('图片大小不得超过3M'); return; }; var reader = new FileReader(); reader.readAsDataURL(file); var orientation = null; //获取照片方向角属性，用户旋转控制 EXIF.getData(file, function() { EXIF.getAllTags(this); orientation = EXIF.getTag(this, 'Orientation'); }); reader.onloadstart = function() {}; reader.onloadend = function(e) { var dataURL = reader.result; var imaged = new Image(); imaged.src = dataURL; imaged.onload = function() { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); //普通环境下设置canvas的宽高 var w = 0, h = 0; if (this.width < 750) { w = this.width; h = this.height; canvas.width = w; canvas.height = h; } else { w = 750; canvas.width = w; var scale = this.width / this.height; w = w > this.width ? this.width : w; h = w / scale; canvas.height = h; } // if (navigator.userAgent.match(/iphone/i) || navigator.userAgent.match(/samsung/i)) { if (orientation != "") { switch (orientation) { case 3: ctx.rotate(180 * Math.PI / 180); ctx.drawImage(this, -w, -h, w, h); break; case 6: //这里由于将图片纠正了回来，所以也要重新设置canvas的高已达到高度自适应 canvas.width = 750; var scale = this.height / this.width; canvas.height = canvas.width / scale; h = 750 > this.height ? this.height : 750; w = h / scale; ctx.rotate(90 * Math.PI / 180); ctx.drawImage(this, 0, -h, w, h); break; case 8: ctx.rotate(270 * Math.PI / 180); ctx.drawImage(this, -h, 0, h, w); break; case 2: ctx.translate(w, 0); ctx.scale(-1, 1); ctx.drawImage(this, 0, 0, w, h); break; case 4: ctx.translate(w, 0); ctx.scale(-1, 1); ctx.rotate(180 * Math.PI / 180); ctx.drawImage(this, -w, -h, w, h); break; case 5: ctx.translate(w, 0); ctx.scale(-1, 1); ctx.rotate(90 * Math.PI / 180); ctx.drawImage(this, 0, -w, h, w); break; case 7: ctx.translate(w, 0); ctx.scale(-1, 1); ctx.rotate(270 * Math.PI / 180); ctx.drawImage(this, -h, 0, h, w); break; default: ctx.drawImage(this, 0, 0, w, h); } } else { ctx.drawImage(this, 0, 0, w, h); } //接下来对图片进行操作 }; }; }, event: function() { $(".uploadfile").change(function(e) { file.upload(e); }); }, init: function() { this.event(); } }; module.exports = file;
2、获取微信用户头像生成海报无法显示
原因： 由于微信用户的头像是微信的域名，canvas由于安全机制的原因，限制了使用跨域的图片，所以无法显示用户头像的图片。
解决方法：
（1）后端在获取用户头像的时候，将头像图片保存到服务器，生成该域名下新的图片链接
（2）使用nginx作为代理，将对应请求转发到微信头像图片的服务器。这里展示第二种方法的实现
前端将图片地址修改为对应的代理服务器域名地址
data.avatar.replace('thirdwx.qlogo.cn/', 'proxy.newmedium.xyz/wximg/')
nginx 代理配置
server { listen 80; server_name xxxxxx; add_header Access-Control-Allow-Origin *; location /wximg/ { proxy_pass http://thirdwx.qlogo.cn/; } }
由于项目静态文件域名上了cdn，所以我们只能采用不同的域名作为代理域名，这里又涉及到跨域问题，还需要在服务器和前端处理一部，设置header 为Access-Control-Allow-Origin *，前端设置为允许跨域
html2canvas(document.querySelector(".poster"), {
backgroundColor: '#ffffff',
useCORS: true
})
三个步骤，一步都不能少。
3、页面有声音播放时调用html2canvas生成海报后，iphone手机会有重复声音
测试发现html2canvas在使用的时候如果页面有音频播放，在ios系统中，音频会被复制一份，并且保持播放的状态。
刚开始一直找不到原因，最后没有办法，从源码中找html2canvas的实现原理找到了问题所在。 html2canvas在将dom转化为canvas的时候，会把页面复制到一个iframe，然后在计算出对应元素标签所在的位置进行处理。所以在复制页面的时候，将音频播放标签aduio也复制到了iframe，随后canvas完成后会删除iframe标签，但是复制到了iframe的音频已经开始播放进程，无法跟随iframe内容的清除而销毁。
最后在html2canvas 的官方文档中找到了解决方法。Html2canvas暴露接口ignoreElements，我们只要将aduio标签置为忽略就行了。
html2canvas(document.querySelector(".poster"), {
useCORS: true,
ignoreElements: function(el) {
if (el.tagName == 'AUDIO') {
return true;
}
})；
4、海报上传数据太大
将canvas转化为base64数据的时候，有时候用户选择文件图片有点大，导致上传性能差。最后查阅资料，可以通过toDataURL方法指定canvas 转化为base64 图片的质量来解决这个问题。
canvas.toDataURL("images/jpeg",0) ，第一个参数就是把图片编码为jpeg格式，第二个参数（0-1）就是指定图片质量，数值越大质量越高
