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