vue 调色器和js-web-screen-shot截图插件

最近在做 Cesium 需要的功能模块，然后写了个demo,发现demo里的模块功能泛用性很高所以写个文章记录一下先。PS:很少有人提到，这个调用了网络摄像头拍照如果在localhost下没有问题的，但是如果你是布置到内网那么是不行的。这是因为webrtc需要使用https支持。最典型的错误为

Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')

除此以外如果你使用该组件截图时发生了空白的情况，那么原因有下

1.图片跨越或WebGL（我无解）也许截图之前先渲染一下场景和相机就不会空白

2.好像作者在编写时没有考虑过http图片的处理（enableWebRtc改为true）

3.地图属性不允许（new Cesium.Viewer属性加上）

contextOptions: {webgl: {alpha: true,depth: true,stencil: true,antialias: true,premultipliedAlpha: true,//通过canvas.toDataURL()实现截图需要将该项设置为truepreserveDrawingBuffer: true,failIfMajorPerformanceCaveat: true,},allowTextureFilterAnisotropic: true,},

# 准备工作

## 截图

yarn add js-web-screen-shot
# or
npm install js-web-screen-shot --save//然后在代码里引入
import ScreenShort from "js-web-screen-shot";//npm官网地址
https://www.npmjs.com/package/js-web-screen-shot

## 调色器

//引入elementUI 具体官网 太长且大部分人应该都不用就不说了
https://element.eleme.cn/#/zh-CN/component/quickstart//具体位置
https://element.eleme.cn/#/zh-CN/component/color-picker

# 代码块

<template><div class="container"><!-- //<input type="color" v-model="color" @change="colorVariation" /> --><!-- 调色器 --><el-color-pickerv-model="color"size="mini":show-alpha="true"@change="colorVariation"></el-color-picker><!-- 截图按钮 --><button class="Cut" @click="printscreen"></button><canvas id="loadingbar"></canvas></div>
</template><script>
//import JSColor from '../../static/unti/Device/jscolor'
import ScreenShort from 'js-web-screen-shot'
export default {data() {return {color: null,uploadlist: [],}},mounted() {},methods: {//截图//开始截图printscreen() {// eslint-disable-next-line no-unused-varsvar timer = setTimeout(() => {// eslint-disable-next-line no-unused-varsconst screenShotHandler = new ScreenShort({enableWebRtc: false, //是否显示选项框level: 99, //层级级别completeCallback: this.callback,closeCallback: this.closeFn,},0)})},/*** 根据图片生成画布*/convertImageToCanvas(image) {var canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightcanvas.getContext('2d').drawImage(image, 0, 0)return canvas},/*** 生成图片* 截图确认按钮回调函数*/callback(base64data) {let _this = thisvar image = new Image()image.src = base64dataimage.onload = () => {var canvas = _this.convertImageToCanvas(image)var url = canvas.toDataURL('image/jpeg')// 在页面展示的数组，次数组是要把截图成功后的图片在页面上展示出来的数组，可以根据自己项目的需求进行添加_this.downloadFile(url)_this.uploadlist.push({ image: url })for (var i = 0; i < _this.uploadlist.length; i++) {if (_this.uploadlist.length >= 6) {_this.uploadhide = false}}console.log(_this.uploadlist, 'push')this.$message({type: 'success',message: '截图成功',})}},//下载截图downloadFile(capture) {const saveInfo = {//导出文件格式自己定义，我这里用的是时间作为文件名download: '截图' + new Date() + `.png`,href: capture,}const element = document.createElement('a')element.style.display = 'none'for (const key in saveInfo) {element.setAttribute(key, saveInfo[key])}document.body.appendChild(element)element.click()setTimeout(() => {document.body.removeChild(element)}, 300)},///调色器colorVariation() {// eslint-disable-next-line no-unused-varslet _this = thisif (this.color.search('rgba') != -1) {console.log(_this.hexify(_this.color))} else {console.log(this.color)}},//rgb格式转16进制hexify(color) {var values = color.replace(/rgba?\(/, '').replace(/\)/, '').replace(/[\s+]/g, '').split(',')var a = parseFloat(values[3] || 1),r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)return ('#' +('0' + r.toString(16)).slice(-2) +('0' + g.toString(16)).slice(-2) +('0' + b.toString(16)).slice(-2))},},
}
</script>
<style scoped>
.Cut {width: 20px;height: 20px;/* 按钮底图 */background: rgb(255, 255, 255) url('../../static/image/CutTheScreenshot.png')round;cursor: pointer;
}
.container {height: 100%;width: 100%;display: flex;
}
</style>

vue 调色器和js-web-screen-shot截图插件相关推荐

php如何开发调色器,HTML5+Js制作的一款简易调色器
今天用HTML5结合Javascript制作了一款调色器,主要功能是通过移动滑块可以看到颜色的变化,并且rgb值也会随着变化,另外也可以通过输入rgb值来预览颜色.使用的技术其实很简单,滑动条使用ht ...
解答网友提问 | 使用VS2022快速生成React/Angular/Vue.js + Web API前后端集成项目
前言上次发表了<一键生成Vue.js + Web API前后端集成项目>后,有多位网友来问,有不有其他的前后端集成模板: 实际上,VS2022没有提供前后端集成项目模板. 但是,使用VS ...
前端面试题全面整理-带解析涵盖CSS、JS、浏览器、Vue、React、移动web、前端性能、算法、Node...
来源 | https://www.html.cn/interview/13950.html 本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一 ...
css、js、浏览器、vue、react、移动web、前端性能、算法、node前端面试题
前端面试题全面整理-带解析涵盖(css.js.浏览器.vue.react.移动web.前端性能.算法.node) 前言上期整理了一些vue面试题,本期整理总结这些前端面试题,涵盖面很广,并且面的都 ...
一键生成Vue.js + Web API前后端集成项目
前言默认情况下,Visual Studio提供了"基于Vue.js Web 应用程序"项目模板,可以生成Vue.js前端项目. 你需要另外创建Web API项目,调试时需要同时启 ...
html 在线播放器,HTML5 Web播放器-Video.js
原标题:HTML5 Web播放器-Video.js Video.js是一款优秀的HTML5 Web视频播放器.它同时支持 HTM5 和 Flash 视频,支持在桌面和移动设备上的视频播放,截至目前,大 ...
node.js 程序_如何不使用外部程序包创建Node.js Web应用程序
node.js 程序 by Abhinav Pandey 通过Abhinav Pandey 如何不使用外部程序包创建Node.js Web应用程序 (How to create a Node.js w ...
面向前端与未来标准的Node.js Web 框架再进化
Web 开发一直是 Node.js 的主流方向,无论新人必学的 Express / Koa,或者是社区流行的企业级框架 Egg / Nest,各类 Web 框架层出不穷.本次分享来自阿里巴巴前端技术专 ...
Node.js Web 框架再进化 - 面向前端与未来标准
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群 Web 开发一直是 Node.js 的主流方向,无论新人必学的 Express / Koa, ...

vue 调色器和js-web-screen-shot截图插件

vue 调色器和js-web-screen-shot截图插件相关推荐

最新文章

热门文章