768

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图片的方法跳过了跨域Question

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

来源:博客园

作者:me春天

链接:https://www.cnblogs.com/lichuntian/p/11425595.html

Recommend