html2canvas+Canvas2Image分享海报功能踩坑

首先需要

import html2canvas from 'html2canvas';

import {Canvas2Image} from '../../assets/js/plug/canvas2image.js';

 

getBase64Image(data) {
            let that = this;
            var canvas = document.createElement("canvas");
            canvas.width = $(data.dom).width();
            canvas.height = $(data.dom).height();
            var ctx = canvas.getContext("2d");
            ctx.drawImage(data.img, 0, 0, $(data.dom).width(), $(data.dom).height());
            let newImg = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
            if(data.type == 1){
                that[data.dataName] = newImg.src;
            }else if(data.type == 2){
                that[data.dataDom][data.num].isbase = 1;
                that[data.dataDom][data.num].img = newImg.src;
            }
        },
        toImg(data) {
            var that = this;
            var img = new Image();
            img.crossOrigin = '*';
            img.src = data.src + '?v=' + Math.random();
            img.onload = function () {
                if(data.type == 1){
                    that.getBase64Image({img:img, dom:data.dom, dataName:data.dataName,type: data.type});
                }else{
                    that.getBase64Image({img:img, dom:data.dom, dataDom:data.dataDom, num: data.num,type: data.type});
                }
                
            }
        },
        generateItem(){
            let that = this;
            let node = document.querySelector('.card');
            let w = node.offsetWidth;
            let h = node.offsetHeight;
            let canvas = document.createElement('canvas');
            let scale = 3;
            canvas.width = w * scale;
            canvas.height = h * scale;
            let opts = {
                scale: scale,
                canvas: canvas,
                width: w,
                height: h,
            };
            html2canvas(node, opts).then(function (canvas) {
                var context = canvas.getContext('2d');
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
                $(img).css({
                    'width': canvas.width / scale + 'px',
                    'height': canvas.height / scale + 'px',
                });
                that.posterImg = img.src;
                that.type = 2;
            });
        },

html2canvas把dom元素改处理成图片

Canvas2Image.convertToImage把canvas变成图片

需要注意：

1.html2canvas对于跨域的处理，跨域图片需要特殊处理的不然处理出来的会变成空的图片，笔者用的是把服务器返回的图片给改变成base64图片的方法跳过了跨域问题

当然html2canvas是可以使用用跨域的useCORS: true

，这个也需要后端服务器的配合的。

参考https://www.cnblogs.com/padding1015/p/8947098.html

2.使用canvas处理图片成base64需要一定的时间，如果是马上执行的代码插入canvas那么canvas回是个空白的，类似vue的mounted中直接调用都是白的需要定时器帮助如下：

setTimeout(function(){
            that.toImg({src:that.myPoster,dom:'.code-img',dataName:'myPoster',type: 1})
        },100)

另外不要获取当前dom里的元素生成页面再插入替换当前dom同样需要时间，你回发现定时器后能成功返回生成的图片