h5生成海报图采坑记录

采用技术：html2canvas（版本html2canvas 0.5.0-beta3）, canvas2Image

遇到的问题：

1、生成的图片不清晰，比较模糊；

2、跨域图片 从canvas转成图片的时候报错；

3、还有别的问题。。。等想起来在补充

解决方案：

问题1、针对图片模糊不清晰的问题：画canvas的时候定义放大倍数

问题2、思路是将跨域的图片转换成base64格式，以base64格式的方式渲染，但是在转成base64格式的时候依然要解决跨域问题。。。。

转成base64格式的时候跨域的解决方案是：

第一步，服务器设置请求头：

Access-Control-Allow-Origin：*

第二步，前端在跨域的图片上设置：

img.crossOrigin = 'Anonymous'

图片转成base64格式的完整代码如下：

//跨域图片转成base64格式
handleImg2Base64 =(src)=>{
    let _this=this
    var img = new Image();
    img.crossOrigin = "Anonymous"; //重要,解决图片跨域的问题
    img.src =src;
    img.onload = function () {
        var canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
       let dataURL = canvas.toDataURL('image/jpeg');
        _this.setState({
            avatar:dataURL  //这个转换成base64格式的路径直接赋给了接受的参数
        })
    }
}

以下是生成海报的完整代码：

        handleHtml2Image =()=>{
            //存放生成海报的位置
            let dom = document.getElementById("canvasDomw");
            //需要截图的包裹的（原生的）DOM 对象
            var shareContent = document.getElementById("imageWrapper"); 
            var width = shareContent.offsetWidth; //获取dom 宽度
            var height = shareContent.offsetHeight; //获取dom 高度
            var canvas = document.createElement("canvas"); //创建一个canvas节点
            var scale = 2; //定义任意放大倍数 支持小数
            canvas.width = width * scale; //定义canvas 宽度 * 缩放
            canvas.height = height * scale; //定义canvas高度 *缩放
            canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
            var opts = {
                allowTaint: true, //允许加载跨域的图片
                tainttest: true, //检测每张图片都已经加载完成
                scale: scale, // 添加的scale 参数
                canvas: canvas, //自定义 canvas
                logging: true, //日志开关
                width: width, //dom 原始宽度
                height: height, //dom 原始高度
                useCORS: true, //允许跨域
                scrollY: 0,
                scrollX: 0,
                backgroundColor: "#fff", //避免图片有白色边框
            };
            html2canvas(shareContent, opts).then(function (canvas) {
                //调用Canvas2Image里面的方法
                var img = Canvas2Image.convertToImage(
                    canvas,
                    canvas.width * 2,
                    canvas.height * 2
                );
                //因为canvas放大了两倍（750px），生成的图片想要小一点的话就相对性的缩小倍数
                img.style.width = width / 1.4 + "px"; 
                img.style.height = height / 1.4 + "px";
                dom.appendChild(img);//图片生成完了塞到对应dom就行
            });

}

总结：

总体思路是

1、将跨域图片以base64格式进行渲染；

2、准备一个需要转换成图片的dom ，就是将想要转换的结构全部放这个框里面；

3、准备一个转换成功后要存放的dom;

4、点击生成图片按钮调用handleHtml2Image()方法就行了

注释：iOS系统手机自带长按保存图片的功能，但是！！！安卓的没有！！！安卓的没有！！！安卓的没有！！！重要的事情说三遍！需要自己添加长按保存图片的功能；

昂，是我想的太美好了。。。