1.首先引用jquery和html2canvas
方法略 不会的请百度
2.添加截图按钮
<button type="button" id="savePic" class="btn btn-primary btn-sm mixStream" v-on:click="savePic" >截图</button>
3.创建方法
savePic: function () { var getPixelRatio = function(context) { // 获取设备的PixelRatio var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; }; var shareContent = $("#finalDa")[0]; var width = shareContent.offsetWidth; var height = shareContent.offsetHeight; var canvas = document.createElement("canvas"); var context = canvas.getContext(‘2d‘); var scale = getPixelRatio(context); canvas.width = width * scale; canvas.height = height * scale; canvas.style.width = width + ‘px‘; canvas.style.height = height + ‘px‘; context.scale(scale, scale); var opts = { useCORSOnly: true, // allowTaint :true, scale: scale, canvas: canvas, width: width, height: height, dpi: window.devicePixelRatio }; html2canvas(shareContent, opts).then(function(canvas) { context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; var dataUrl = canvas.toDataURL(‘image/jpeg‘, 1.0); var newImg = document.createElement("img"); newImg.src = dataUrl; newImg.width = width; newImg.height = height; alert("截取成功,上拉查看图片"); $("body")[0].appendChild(newImg); }); },
PS:截取一般的网页没问题 但是无法截取video视频窗口 暂时未解决 要是大佬有解决办法望告知 感谢