H5利用canvas实现海报功能

Posted 2021-01-09 caizhenbo

最近接到一个需求，微信中用户上传图片生成海报。这个需求比较常规，实现思路也比较简单，通过利用用户的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）就是指定图片质量，数值越大质量越高