html2canvas+Canvas2Image分享海报功能踩坑

概述首先需要 import html2canvas from ‘html2canvas‘; import {Canvas2Image} from ‘../../assets/js/plug/canvas2image.js‘;   getBase64Image(data) { let that = this; var canvas = document

首先需要

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

总结

以上是内存溢出为你收集整理的html2canvas+Canvas2Image分享海报功能踩坑全部内容，希望文章能够帮你解决html2canvas+Canvas2Image分享海报功能踩坑所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。