**
需求：截图跨域的iframe**
问题：跨域 解决办法：使用js 调用谷歌插件截图—FireShot 缺点：只适用于谷歌
根据FireShot完成配置 -----官方文档及演示地址 -----插件下载地址
如果是普通html就直接下载demo，引入js脚本就好
我这边是放到vue3中，所以，稍微修改了一下代码
//FireShot.jsexport default function FireShot() {let cFSEdit = 0let cFSSave = 1let cFSClipboard = 2let cFSEMail = 3let cFSExternal = 4let cFSUpload = 5let cFSPrint = 7let cBASE64Encode = 8let cFSUpgrade = 100// Open troubleshooting pagefunction openTroubleshootingPage() {window.open("/api-required.php", '_blank');}// Displays error messagefunction errorOnlyChromiumFirefox() {alert("Sorry, this plugin works only in Firefox or any Chromium browser.");}// Checks whether the current browser is Firefoxfunction isFirefox() {return navigator.userAgent.indexOf("Firefox") != -1;}// Checks whether the current browser is Chrome or Chromium-basedfunction isChromium() {return /chrome/.test(navigator.userAgent.toLowerCase());}function init() {document.addEventListener('FireShotCaptureCompleteEvent', function (evt) {var cbId = evt.detail.cbId;if (cbId in handlers)handlers[cbId](evt.detail.data);}, false);}let callbackId = 0let handlers = [];let FireShotAPI = {AutoInstall: true,isAvailable: function () {if ((!isFirefox() && !isChromium())) return false;var element = document.createElement("FireShotDataElement");element.setAttribute("FSAvailable", false);element.setAttribute("FSUpgraded", false);document.documentElement.appendChild(element);var evt = document.createEvent("Events");evt.initEvent("checkFSAvailabilityEvt", true, false);element.dispatchEvent(evt);return element.getAttribute("FSAvailable") == "true";},// Check whether the addon is available and display the message if requiredcheckAvailability: function () {// The plugin works only in Chrome, Firefox or any Chromium-based browser. We check it here.if (!isFirefox() && !isChromium()) {errorOnlyChromiumFirefox();return false;}if (!this.isAvailable()) {if (confirm("The library could not connect to the FireShot extension.\r\nWould you like to open the troubleshooting page?"))openTroubleshootingPage();return false;}return true;},// Capture web page and perform desired actioncapturePage: function (EntirePage, Action, CapturedDivElementId, Data, Callback) {if (this.AutoInstall) {// The plugin works only in Chrome, Firefox or any Chromium-based browser. We check it here.if (!isFirefox() && !isChromium()) {errorOnlyChromiumFirefox();return;}// The browser is OK. Now we check the availability of the extension.if (!this.isAvailable()) {openTroubleshootingPage();return;}}var element = document.createElement("FireShotDataElement");element.setAttribute("Entire", EntirePage);element.setAttribute("Action", Action);element.setAttribute("Data", Data || "");if (Callback) {var cbId = callbackId++;element.setAttribute("CBID", cbId.toString());handlers[cbId] = function (data) {delete handlers[cbId];Callback(data);};}!CapturedDivElementId || element.setAttribute("CapturedDivElementId", CapturedDivElementId);document.documentElement.appendChild(element);var evt = document.createEvent("Events");evt.initEvent("capturePageEvt", true, false);console.log(evt);element.dispatchEvent(evt);},// Capture web page (Entire = true for capturing the web page entirely) and *edit*editPage: function (Entire, CapturedDivElementId, Callback) {this.capturePage(Entire, cFSEdit, CapturedDivElementId, undefined, Callback);},// Capture web page and *save to disk*savePage: function (Entire, CapturedDivElementId, Filename, Callback) {console.log(Entire, CapturedDivElementId, Filename, Callback);this.capturePage(Entire, cFSSave, CapturedDivElementId, Filename, Callback);},// Capture web page and *copy to clipboard*copyPage: function (Entire, CapturedDivElementId, Callback) {this.capturePage(Entire, cFSClipboard, CapturedDivElementId, undefined, Callback);},// Capture web page and *EMail*emailPage: function (Entire, CapturedDivElementId, Callback) {this.capturePage(Entire, cFSEMail, CapturedDivElementId, undefined, Callback);},// Capture web page and *open it in a third-party editor*exportPage: function (Entire, CapturedDivElementId, Callback) {this.capturePage(Entire, cFSExternal, CapturedDivElementId, undefined, Callback);},// Capture web page and *upload to free image hosting*uploadPage: function (Entire, CapturedDivElementId, Data, Callback) {this.capturePage(Entire, cFSUpload, CapturedDivElementId, Data, Callback);},// Capture web page and *print*printPage: function (Entire, CapturedDivElementId, Callback) {this.capturePage(Entire, cFSPrint, CapturedDivElementId, undefined, Callback);},// Capture web page and *return the BASE64Encoded version*// The callback takes one parameter as a base64 content:// function callback(base64Data) {console.log(base64Data)}base64EncodePage: function (Entire, CapturedDivElementId, Callback) {this.capturePage(Entire, cBASE64Encode, CapturedDivElementId, undefined, Callback);},// Forces FireShot to upgrade to the advanced features, such as Edit/Print/Upload, etcupgradePlugin: function () {this.capturePage(false, cFSUpgrade);}}init();return {FireShotAPI,init}}
index.vue页面
<script setup>import FireShot from './FireShot'const {FireShotAPI, init } = FireShot();// 初始化截屏插件init()FireShotAPI.AutoInstall = true;function screenshotToBase64(mode) {FireShotAPI.base64EncodePage(mode, undefined, function (data) {// console.log(data); 截屏获得的base64//根据想要的图片进行裁剪就好啦});}function checkAvailability() {setTimeout(function () {FireShotAPI.checkAvailability();}, 1000);}document.addEventListener("DOMContentLoaded", checkAvailability);// 触发截屏onMounted(() => {screenshotToBase64(true)})</script >
