html2canvas+Canvas2Image分享海报功能踩坑

Posted 2022-09-05 lichuntian

首先需要

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同样需要时间，你回发现定时器后能成功返回生成的图片