代码拉取完成，页面将自动刷新
1.9.7
代码放到富文本里边了
</style>
<button onclick="jitT()">截图</button>
<canvas id="loadingbar" ></canvas>
<iframe height="1000px" width="500px" style="z-index:10000" src="./1111.pdf"></iframe>
var uploadlist = []
var imageFilelist =[]
function jitT(){
const screenShotHandler = new screenShotPlugin({
enableWebRtc: false, //是否显示选项框
level:99, //层级级别
completeCallback: this.callback,
closeCallback: this.closeFn,
});
}
/**
* 根据图片生成画布
*/
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
/**
* 生成图片
* 截图确认按钮回调函数
*/
function callback(base64data) {
var image = new Image();
image.src = base64data;
image.onload = () => {
var canvas = convertImageToCanvas(image);
var url = canvas.toDataURL("image/jpeg");
// 在页面展示的数组，次数组是要把截图成功后的图片在页面上展示出来的数组，可以根据自己项目的需求进行添加
uploadlist.push({image:url})
for(var i=0;i<uploadlist.length;i++){
if(uploadlist.length>=6){
uploadhide=false;
}
}
console.log(url)
var bytes = window.atob(url.split(",")[1]); //通过atob将base64进行编码
//处理异常，将ASCII码小于0的转换为大于0,进行二进制转换
var buffer = new ArrayBuffer(bytes.length);
var uint = new Uint8Array(buffer); //生成一个8位数的数组
for (var i = 0; i < bytes.length; i++) {
uint[i] = bytes.charCodeAt(i); //根据长度返回相对应的Unicode 编码
}
//Blob对象
var imageFile= new Blob([buffer], { type: "image/jpeg" }); //type为图片的格式
// 给后台返回的数组，我的项目需求是要截图多张上传给后端的，如果只上传一张直接就上传imageFile上一句就行，这个数组可以跟根据自己的需求进行编写
imageFilelist.push(imageFile);
console.log(imageFile)
};
}
html2canvas模式不支持截取iframe的，webrtc模式是没问题的。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
webrtc模式这个会多一个分享的步骤，额..还有什么能解决的吗，或者还有啥子插件吗大佬
这个分享步骤是浏览器的行为，禁用不了，目前没有什么更好的插件了。
<canvas ref="canvasBox"></canvas>
url2Base64(url) {
return new Promise((resolve, reject) => {
let img = new Image();
let canvas = this.$refs.canvasBox;
let w = this.$refs.canvasView.offsetWidth;
let h = this.$refs.canvasView.offsetHeight;
img.crossOrigin = "*";
let type = "image/jpeg";
img.onload = function () {
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.drawImage(img, 0, 0, w, h);
const base64 = canvas.toDataURL(type);
// console.log(222, base64);
resolve(base64);
};
img.onerror = function () {
reject(new Error("message"));
};
img.src = url;
});
},
登录 后才可以发表评论
