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同樣需要時間，你回發現定時器后能成功返回生成的圖片