1.生成图片有白边/黑边
设置 backgroundColor:#ffffff
2.本地生成图片没有白边/黑边,打包后生成图片有白边/黑边
查看打印容器/父级是否有定位,宽度过大/过小等,去掉定位或限宽
3.生成图片模糊
设置 scale参数
4.文字错位
设置字体
5.外链图片不显示
设置 useCors:true,同时将打印区的图片转为base64
6.safari 下设置图片名称有长度限制
7.获取不到容器,使用querySelector
例子:
const savePic = async () => { .... await qmsInventoryTablePreview(index) await getBase64Image() await html2canvas((document.body.querySelector('div#canvas-print') as HTMLDivElement).querySelector('.content'), { useCORS: true, scale: 3, backgroundColor: '#ffffff', }).then((canvas: any) => { let time = ((new Date()).toLocaleString()).slice(0, -3).replace(/\//g, '-') filename = filename ? filename : time + '_' + (document.getElementById('canvas-name') as HTMLElement).innerText setTimeout(() => { Canvas2Image.saveAsImage(canvas, canvas.width, canvas.height, 'jpg', filename); }, 100) }) } }
const getBase64Image = () => { return new Promise((res, _) => { let imgList = (document.body.querySelector('div#canvas-print') as HTMLDivElement).querySelectorAll('img') if (imgList.length == 0) return var img = document.createElement('img'); img.src = imgList[0].src; img.setAttribute("crossorigin", "anonymous") img.onload = function () { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var dataURL = canvas.toDataURL("image/png"); (document.body.querySelector('div#canvas-print') as HTMLDivElement).querySelectorAll('img')[0].setAttribute('src', dataURL); res(true) } }) }
const savePdf = async () => { if (!inventoryDetail.value) return; let pages = A4Mode.value ? inventoryDetail.value!.length / 20 : 1 for (let index = 1; index < pages + 1; index++) { ...... await getBase64Image() await html2canvas((document.body.querySelector('div#canvas-print') as HTMLDivElement).querySelector('.content'), { backgroundColor: '#ffffff', useCORS: true, scale: 3, scrollX: 0, scrollY: 0 }).then((canvas: any) => { const PDF = new JsPDF('p', 'mm', 'a4') const ctx = canvas.getContext('2d') const a4w = 190; const a4h = 277; const imgHeight = Math.floor((a4h * canvas.width) / a4w) let renderedHeight = 0; while (renderedHeight < canvas.height) { const page = document.createElement('canvas'); page.width = canvas.width page.height = Math.min(imgHeight, canvas.height - renderedHeight) page.getContext('2d')?.putImageData(ctx.getImageData(0, renderedHeight, canvas.height, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0) PDF.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, (a4w * page.height) / canvas.width)) renderedHeight += imgHeight; console.log(canvas.height) if (renderedHeight < canvas.height) { PDF.addPage() } } let time = ((new Date()).toLocaleString()).slice(0, -3).replace(/\//g, '-') let filename = time + '_' + (document.getElementById('canvas-name') as HTMLElement).innerText PDF.save(`${filename}.pdf`) }) } }
标签:canvas,const,img,记录,height,html2canvas,width,使用,document From: https://www.cnblogs.com/Merrys/p/17504528.html