提示：vue中使用contenteditable
文章目录
前言一、html2canvas二、html2canvas的使用为了让画的内容跟画布一样大小，所以画布内容的scale是(2*400)*(2*400)，这下就和画布大小800*800相同了 canvas会把画布按照自适应的尺寸，等比缩放放入相框 总结前言
截图功能发现没有截取完全，是因为设置了电脑的缩放与布局。
一、html2canvas
html2canvas实现页面内容截屏效果，并生成图片保存到本地
二、html2canvas的使用
1、 DOM元素内容生成图片并下载
// DOM元素内容生成图片并下载htmlToImage (dom,name,w,h) {// 手动创建一个 canvas 标签const canvas = document.createElement("canvas")//屏幕缩放比const screenScale = getScreenScale();//要截图的DOM元素let screenshotDom = dom;// 获取父级的宽高const width = parseInt(w||window.getComputedStyle(screenshotDom).width) * screenScale;const height = parseInt(h||window.getComputedStyle(screenshotDom).height) * screenScale;//画布缩放比例const baseScale = 2;//画布实际宽度canvas.width = width * baseScale; //画布实际高度canvas.height = height * baseScale;//生成画笔const ctx = canvas.getContext("2d");//画布内容根据画布实际高度进行缩放（内容高度需要和实际高度一致）ctx.scale( baseScale, baseScale); //根据画布在页面高度 * 缩放比例 = 画布实际高度//画布在页面上的宽度canvas.style.width = width + 'px';//画布在页面上的高度canvas.style.height = height + 'px';/*** 理解：* 把一张800*800的图片画到画布上 .* 画的内容也必须是800*800才能保证画布被全部占满* 然后再以400*400的尺寸，展示在页面中* 这两组数据用来调整canvas的清晰度* **/const config = {backgroundColor: null,canvas: canvas,useCORS: true}html2canvas(screenshotDom, config).then((can) => {let link = document.createElement('a');//图片转成base64格式link.href = can.toDataURL("image/png");link.download = name||'页面截图';link.click();})}
2.获取屏幕缩放比例（解决电脑设置缩放与布局）
//获取屏幕缩放比例getScreenScale(){var screenScale=1;var screen=window.screen;var ua=navigator.userAgent.toLowerCase();//设备像素比if(window.devicePixelRatio !== undefined){screenScale=window.devicePixelRatio;//IE11以下版本浏览器}else if(ua.indexOf('msie')>-1){if(screen.deviceXDPI && screen.logicalXDPI){screenScale=screen.deviceXDPI/screen.logicalXDPI; }//浏览器自身缩放}else if(window.outerWidth !== undefined && window.innerWidth !== undefined){screenScale=window.outerWidth/window.innerWidth;}if(screenScale){screenScale=Math.round(screenScale*100)/100; }return screenScale;}
个人理解：
相框：canvas.width
画布：canvas.style.width
画的内容：ctx.scale
设置一个400400的相框
画布大小为800800
画的内容也为800*800
为了让画的内容跟画布一样大小，所以画布内容的scale是(2400)(2400)，这下就和画布大小800800相同了
canvas会把画布按照自适应的尺寸，等比缩放放入相框
总结
踩坑路漫漫长@~@
