VueScan扫描彩色负片方法

Vue实现⽹页在线拍照和上传项⽬背景：⽤ vue-cli + element-ui 开发的项⽬⽅法⼀（不⽀持360兼容模式、IE）：使⽤ mediaDevices.getUserMedia()代码如下：<template><div class="take-photo"><!-- 拍照 --><video id="videoCamera" :width="videoWidth" :height="videoHeight" autoPlay></video><el-button size="small" type="primary" @click="takePhotoHandle">拍照</el-button><!-- 预览 --><canvas id="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas><el-button size="small" type="primary" :loading="loading" @click="uploadHandle">上传</el-button></div></template><script>export default {name: 'takePhoto',data () {return {loading: false, // 上传照⽚的loadingimgSrc: "", // 照⽚地址photoVideo: null, // 拍照框photoContext: null, // canvas绘图环境photoCancas: null, // 预览框videoWidth: 306, // 拍照框宽度videoHeight: 378, // 拍照框⾼度}},mounted () {// 打开摄像头this.openCamera()},beforeDestroy() {if (this.photoVideo && this.photoVideo.srcObject) {// 停⽌视频流this.photoVideo.srcObject.getTracks()[0].stop();}},methods: {// 拍照处理takePhotoHandle () {// canvas画图this.photoContext.drawImage(this.photoVideo, 0, 0, this.videoWidth, this.videoHeight)// 获取图⽚base64链接this.imgSrc = this.photoCancas.toDataURL('image/png')},// 打开摄像头async openCamera() {this.photoVideo = document.getElementById('videoCamera')this.photoCancas = document.getElementById('canvasCamera')this.photoContext = this.photoCancas.getContext('2d')try {const constraints = {audio: false,video: {width: this.videoWidth,height: this.videoHeight}}const stream = await navigator.mediaDevices.getUserMedia(constraints)this.photoVideo.srcObject = streamthis.photoVideo.play()} catch (error) {this.$message({title: '警告',message: '请确认摄像头能正常⼯作，必须使⽤⾕歌浏览器或者360浏览器的极速模式，否则拍照不能正常使⽤',type: 'warning',duration: 8000});}},// 上传照⽚async uploadHandle () {this.loading = truetry {const firstIndex = this.imgSrc.indexOf('base64,')const url = this.imgSrc.substr(firstIndex + 7)const params = {photo: url}// 发送接⼝await xxx(params)this.loading = false} catch (error) {this.loading = false}}}}</script><style lang="scss" scoped></style>⽅法⼆（兼容360兼容模式、IE）：使⽤ webcamjs实现步骤：为了兼容IE，我下载的是下图版本：2、将 webcam.min.js 和 webcam.swf ⽂件，放到根⽬录——>public⽬录中。

vue调取电脑摄像头实现拍照功能本⽂实例为⼤家分享了vue调取电脑摄像头实现拍照功能的具体代码，供⼤家参考，具体内容如下实现效果图：拍照前&拍照后（我电脑摄像头挡住的，所以图⽚是灰⾊）1.点击拍照上传功能调取电脑摄像头权限2.选择允许使⽤摄像头之后，页⾯摄像头区域开始显⽰画⾯3.点击拍照按钮，右侧显⽰拍摄的图⽚。

点击保存即可完整代码：我这⾥写的是⼀个组件，所以触发调取摄像头事件是从⽗组件传过来的。

也可以直接写⼀个页⾯上。

<template><div class="camera-box" style="width: 900px;"><el-row :gutter="20"><el-col :span="12"><div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 10px;">摄像头</div><!-- 这⾥就是摄像头显⽰的画⾯ --><video id="video" width="400" height="300"></video><div class="iCenter" ><el-button type='primary' size='small' icon="el-icon-camera" @click="takePhone" style="margin-top: 10px;">拍照</el-button></div></el-col><el-col :span="12"><div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 10px;">拍摄效果</div><!-- 这⾥是点击拍照显⽰的图⽚画⾯ --><canvas id='canvas' width='400' height='300' style="display: block;"></canvas><el-button :loading="loadingbut" icon="el-icon-check" type='primary' size='small' @click="takePhoneUpfile" style="margin-top: 10px;">保存</el-button> </el-col></el-row></div></template><script>import {putFileAttach} from "@/api/customer/animalinfo";export default {props:{tackPhoto:{//⽗组件传过来的状态type:Boolean,default:false}},data() {return {loadingbut:false,preViewVisible: false,blobFile: null,canvas: null,video: null,mediaStreamTrack: '',}},watch:{tackPhoto:{immediate: true,handler (newVal) {//监听接收到拍摄状态后，开始调取摄像头权限。

四、Uniscan TWAIN 窗口 ....................................................................................20 简介............................................................................................................... 20 设定按钮....................................................................................................... 21 预览范围....................................................................................................... 23 增强工具列................................................................................................... 25 扫描小秘诀................................................................................................... 26
本手册虽经仔细检查及校对，仍可能发生文字错误与技术描述疏漏的情 况，恳请使用者及同行不吝赐教指正，以利于本手册的修订，力求手册内容 的正确性。
本手册中所包含的内容如有变更，恕不另行通知。
目录
一、 扫描仪的安装与设定 ..................................................................................1 扫描仪使用安全注意事项 ........................................................................... 1 拆开扫描仪包装........................................................................................... 2 安装与设定扫描仪....................................................................................... 2 步骤一、扫描仪自动保护锁 ..................................................................2 步骤二、安装软件 ..................................................................................3 步骤三、连接您的扫描仪和计算机....................................................... 4 测试扫描仪................................................................................................... 4

Vue操作数组的几种常用方法（mapfilterforEachfind和findIn在Vue中，我们经常需要对数组进行操作，包括遍历、过滤、查找等。

下面是Vue中常用的几种数组操作方法的详细介绍：1. map方法：map方法会对数组中的每个元素进行处理，并返回一个新的数组。

它的语法是：arr.map(callback)，其中callback是一个函数，它会接收三个参数：当前元素的值、当前元素的索引和原数组本身。

我们可以在callback中对当前元素进行处理，并返回处理后的值。

例如：```//将数组中的每个元素都加1const arr = [1, 2, 3, 4];const newArr = arr.map((value) =>return value + 1;});console.log(newArr); // [2, 3, 4, 5]```2. filter方法：filter方法会根据指定的条件对数组进行过滤，并返回一个新的数组。

它的语法是：arr.filter(callback)，其中callback是一个函数，它会接收三个参数：当前元素的值、当前元素的索引和原数组本身。

我们可以在callback中对当前元素进行判断，并返回true或false，true表示该元素保留，false表示该元素被过滤掉。

例如：```//过滤出数组中的偶数const arr = [1, 2, 3, 4];const newArr = arr.filter((value) =>return value % 2 === 0;});console.log(newArr); // [2, 4]```3. forEach方法：forEach方法会对数组中的每个元素进行遍历，并执行指定的操作。

它的语法是：arr.forEach(callback)，其中callback 是一个函数，它会接收三个参数：当前元素的值、当前元素的索引和原数组本身。

打印qrcode vue使用方法QR code, also known as quick response code, is a two-dimensional barcode that is becoming increasingly popular in today's digital world. It is a matrix or two-dimensional bar code which can be read quickly and can store a relatively large amount of data compared to a traditional barcode. QR codes are machine-readable codes, meaning they can be easily scanned by a smartphone camera and interpreted by an app.QR码，也称为快速响应码，在当今数字世界日益流行。

它是一种矩阵或二维条形码，可以快速读取，与传统条形码相比可以存储比较大的数据量。

QR码是机器可读码，意味着它可以很容易地被智能手机相机扫描并由应用程序解释。

With the increasing use of QR codes in various industries and everyday life, it has become important for developers and designers to know how to incorporate QR codes into their applications and designs. , a progressive JavaScript framework, has made it relatively easy to integrate QR code generation and scanning into Vue applications.随着QR码在各行各业和日常生活中的使用日益增加，开发人员和设计人员了解如何将QR码整合到他们的应用程序和设计中变得很重要。

扫描设定
ScanExpress 扫描界面预览
1 2 3 45 67 8 9
11
10
1. 点击工具栏上的“扫描设定” 键，然后屏幕上会跳出一个
设定对话框。 2. 选择想要的扫描模式、图像分辨
率、文件格式、路径和自动裁剪 设定然后点击“确认”。 注意: 选择“自动裁剪”，可自 动裁剪扫描图像中不需要的扫描 仪背景。
3
认识本产品
包装附件
B
扫描仪
保护袋
扫描仪简介
前框
USB 连接线
安装驱动光盘
使用手册
使用手册
校正纸
后框
1
2
3
4
1. 进纸口 2. LED 电源显示灯/扫描键
3. USB 接口 4. 出纸口
4
软件安装
注意: 进行扫描仪连接之前，请先完成驱 动软件的安装。安装驱动软件过程 中，请勿将USB连接线连接到扫描 仪或电脑。
校正和清洁扫描仪...............................13 产品规格........................................................................14 疑难解决........................................................................15
7
扫描处理图像
注意: 为了获得好的图像质量和识别效 果，请在首次扫描前校正和清 洁扫描仪。请时常执行此校对步 骤，以确保扫描运作正常。 1. 将要扫描的文件正面朝上插入扫 描仪进纸口，请确保文件放入正 确位置。轻轻地将文件推入，直 到文件在进纸口內被夾住。 注意:如需扫描的文件尺寸小于 A4，请将文件对齐进纸口右边插 入。

说说它们的特点（Photoshop，Capture NX就不说了，功能强大，但觉得很复杂的说）Photocap这个软件其实非常不错，功能强大，也易用。

打个比方吧，它就是一个初级版的Photoshop！抠图/换背景的能力也非常强大且易用！而且可以保存为工程模式，保存后，下次打开可接着修改。

对照片加物件（如日期、水印、图片……），更是方便的不得了，数量随便加，位置随便移。

另外，值得一提的是，竟然可以局部调整曝光！ACDSee用来浏览照片不错。

最喜欢它的“阴影/加亮”功能，非常有用。

类似于NIKON的D-lighting 功能，在提升照片暗部亮度的同时，亮部又不会过曝。

也可以做出类似于HRD的效果。

Turbo Photo功能比较全，易用，感觉没什么有特色的地方。

另外，抠图/换背景的能力差。

光影魔术手功能丰富，易用，最有特色的就是反转片功能了，非常爽！但同Turbo Photo一样，抠图/换背景的能力差。

Photomatix功能单一，就是对多重曝光的图片进行叠加，制作HDR特效。

效果独特。

Autostitch我最喜欢的小巧软件之一，不到1MB，而且免安装。

能对参与拼接的照片曝光自动调节，拼接出的全景照片效果很好。

Teorex Inpaint轻松去除照片瑕疵，不留痕迹。

运用选择工具选取你希望去除的对象，然后选择伪装，Teorex.Inpaint就会自动计算去除对象周围背景的颜色和分布，利用周围的背景自动填充你去除的对象，从而使你的图片看上去非常完美，不留痕迹。

轻松换背景正如其名，抠图/换背景非常轻松Silkpix最好的处理数码相机raw的软件数码影像软件合集PhotoShop类1、简体中文版PS CS2+注册机2、Camera_Raw_3_63、PhotoShop滤镜ConvertToBWPro——非常牛的转黑白的滤镜，功能及其强大)内有安装说明和注册号Kodak四款插件（有注册号）knockout2.0汉化版Digital FilmTools 55mm v6.0 破解版Noise Measurements for Photoshopnik Color Efex Pro 2.0 完整版Ultra Sharpen 7.0 Pro for Adobe Photoshop (插件-超级锐化)SkinTune(人像肤色滤镜)安装和使用Opanda PhotoFilter 熊猫摄影滤镜VanDerLee 公司全系列滤镜Kpt6.00KPT 7.0Andromeda LensDoc Filter v1.31 for PS 含注册白描或素描滤镜Xenofex 2.0RedPawMedia Fog v0.9b for photoshopPictoColor iCorrect EditLab Pro 5.0 汉化注册版EYE CANDY 3.1Photoshop CS2 Plugins Collection v2 (Photoshop CS2最新外掛濾鏡集)（657MB）200个Photoshop的超COOL滤镜4、PhotoShop动作PAA数码照片后期处理PS动作集Photoshop 动作集662套数码照片后期处理动作合集RAW转换软件1、Adobe Lightroom Beta 42、Nikon_CaptureNikon_Capture_Nikon_Capture NX1.01（简体中文版+注册码）3、SilkypixSilkypix E3.029汉化破解版Silkypix _4、Canon DPP2.25、Pixmantec RawShooter Premium 20066、RawShooter essentials 2006汉化版7、BibbleBibble 4.8a8、Capture OneCapture One Pro3.73中文版+注册机Capture One Pro3.74中文版Capture One Pro3.75中文版Capture One Pro v3.7.6可以注册后逐步升级9、sharpRaw破解版10、RAW Deal11、SIGMA Photo Pro Version 2.1 Update For Windows12、索尼PMB_update_110113、富士fujifilm_huhsv231f浏览软件1、ACDSee 简体中文精装修正版9.0 build 552、Nikon View6.2.53、iSee个人图片专家v3.0154、图像浏览软件PMView Pro 3.035、Picasa2-current恢复软件1、Lexar ImageRescue 2.02、Sandisk Rescuepro v3.03、Digital Image Recovery4、Final data企业版+破解5、Bad Copy Pro6、Recover4all7、江民数据修复王8、Easyrecovery9、Serch and Recoever10、数据恢复大师11、CD Check12、Photo rescuepro_setup破解版全景软件1、全景图制作大师(Realviz Stitcher) v4.0.2 Final 正式版2、PanoramaMaker33、AutopanoPro_1.0.04、MGI Photovista Panorama v3.0 Final 正式版-全景照片制作大师5、autostitch6、PhotoStitch7、同浩图像合成大师3.68、ACDsee的全景照片制作插件Stitcher EZ9、3DVista Stitcher v2.0 Final 正式版-全景图像缝合软件抠图软件1、专业级去背景软件MaskPro2、自动抠图软件AdvantEdge v1.6.1 特别版3、抠图专家V1.04、快速抠图1.025、轻松换背景(Recomposit) 1.66、蒙那丽莎扣图软件降噪软件1、Neat ImagePro V5.2+破解2、BlackFrame夜景噪点杀手绿色版3、PictureCode NoiseNinja Standalone v2.1.0 Final 正式版4、STOIK Smart Resizer v1.0 Final 正式版5、Noiseware Pro 2.51锐化软件1、nik Sharper2.02、专业图像锐化工具FocalBlade 1.04[英文版]3、Cleanvue110b4、Focus Magic3.01+注册机调色温软件1、AGD Color Temperatur2、MediaChance PureImage v1.2色彩软件1、Nik Color Efex Pro 2.0 Complete Edition2、色彩调整软件PictoColor iCorrect EditLab Pro3、ColorCastFX v1.0 汉化版证件照软件1、富士公司的证照制作富士Photoking高速下载2、证照之星V1.03、中台港韩□□□□□□□□□□□□合集插值放大软件1、shortcut PhotoZoom Prof（图像放大）2、S-Spline2.2中文注册版3、解马赛克软件(GMASK) v1.70 绿色汉化版4、克隆放大V2.15、OptiPix v3.0+破解6、STOIK Smart Resizer v1.0 Final 正式版EXIF查看软件1、Exif Viewer v1.12、EXIF信息显示PIE V3.03、Opanda PowerExif4、ExifShow存储卡、读卡器速度测试软件1、ATTO Disk Benchmarks 32 汉化版- 磁盘速度测试软件2、Speed速度测试软件其他软件1、Turbo Photo 5.2 简体中文版2、奇幻变脸秀(Abrosoft FantaMorph) 3.5 简体中文版3、男女相片合成软件MORPH31E4、Vicman Red Eye Remover 1.85、Photo-Brush 3.517、相片边框软件Photoworks V1.5汉化版8、无敌图像印章V3.06 破解版9、Professor Franklin Instant Photo Effects v2.0 Final 正式版10、Dead Pixel Test (CCD坏点和噪点测试) 中文版1.011、digishop数码印像2.0012、JPEGEnh13、DigitalEnhance14、CanCount测试1D系列快门次数15、SKY1016、光影魔术手v0.22软件使用说明书1、专业锐化滤镜nik Sharpener Pro 2.0 使用指南2、Photoshop滤镜教程3、佳能DPP用法帮助手册4、SILKYPIX Developer Studio用法简介5、尼康Capture4.4使用说明6、knockout抠图实例指南7、AutoEye 2.0 简体中文帮助手册（上&下）8、光影魔术手的使用说明书9、常用滤镜使用介绍及教程10、数码美容魔法书11、Photoshop CS9.0实例精选12、Adobe公司全套图像处理软件教程合集(PDF)[zhg 编辑于2006-12-07 14:28][zhg 编辑于2006-12-08 16:51][zhg 编辑于2006-12-08 17:01]这个影像专集侧重点如下:首先是PhotoShop,这是每一个发烧友都应该掌握的利器.里面的PhotoShop CS2是真正的官方简体中文版本,连帮助文档也是中文的,有注册机,可以网上升级.另外给大家提供了最新的RAW3.6插件.除此之外还有1G左右的滤镜,原本是打算写一本专门滤镜的书,所以搜集的.虽然有很多资深发烧友对滤镜可能很轻视,但是用好了还是可以节省你许多时间和精力的.有些滤镜也是非常精彩的.坦白地说,里面的许多滤镜我也没有完全试用.另外,里面还有几百个PhotoShop动作,这个东西大家也不要轻视,都是一些朋友的心血.比如我就特别喜欢里面的磨皮动作,特别省事,效果也不错.除了PhotoShop,这个专集里的另外一个重点就是RAW转换软件.这里几乎包含了所有目前可以见到的RAW转换软件.而且都可以使用,有注册码或者破解.这个部分应该是发烧友最需要的,也是重点之一.除了PhotoShop和RAW转换软件,里面还有一个重点是恢复软件,笔者刚刚作完一个恢复软件的测试,这是挑选出来的不错的软件.当然最好的数码照片恢复软件是Sandisk Rescuepro v3.0和Lexar ImageRescue 2.0,它们恢复RAW格式照片的能力非常强,在恢复JPEG格式照片方面其他软件都差不多.推荐大家使用Sandisk Rescuepro v3.0和Lexar ImageRescue 2.0(都可以使用)全景软件、抠图软件、降噪软件虽然也给大家提供了不少种，不过我个人觉得你根据自己的情况，每类从中选择一两种用好、用精就可以。

专业的相片扫描软件VueScan v9.4.26中文版用户指南2014.5.15整理老式扫描仪在win8系统下通常无法使用扫描功能，如EPSON Perfection1260扫描仪就是如此。

当在win8下安装通用扫描驱动软件VueScan v9.4.26后就可以使用。

专业的相片扫描软件VueScan v9.4.26是现在世界上最著名的第三方扫描软件，持续更新好多年了，老牌经典软件，而且官方完全支持全中文，界面虽嫌简陋，并发现，同一台扫描仪，用Vuescan扫描出来的效果要比用原厂驱动扫描出来的效果要好很多，控制也非常精细，于是Vuescan流行起来。

内容一、开始使用VueScan二、常见任务三、快速设置四、提示和技巧五、附录A：先进的工具和技术六、附录B：按钮，菜单和选项参考一、开始使用VueScanVueScan是的，旨在帮助您得到最出你的扫描仪和制作从扫描的照片惊人的业绩有强大的扫描工具。

它是挤满了有用和强大的功能负荷，目前支持超过2300扫描仪35扫描仪制造商。

下面的教程旨在帮助您熟悉的软件，其用户界面，并帮助您扫描您的第一个照片和幻灯片。

你会发现有用的提示和技巧，在这里就如何开展共同的任务，例如批量扫描和扫描至PDF文件。

㈠结识VueScan如果您以前使用过一台扫描仪，你可能已经遇到过的东西，看起来有点类似于VueScan。

但它仍然是值得花一点时间来适应这里的一切是前跳水英寸最重要的领域是预览面板。

这是它被扫描后，扫描的文件出现。

您可以使用这个区域来扫描他们在全分辨率之前，准备好你的图像设置使用在左手面板中的控件调整。

这就是所谓的选项面板。

它具有沿之上运行的选项卡。

这些是用来改变的设定被调整，飞行在动作按钮是在窗口的底部。

使用这些扫描，预览和进行其他必要的任务该菜单窗口的顶部可以被用来访问更高级的功能。

这些更详细地描述在附录B中㈡基本工作流程你可以通过简单地按下做VueScan大多数事情扫描按钮。

Vue2.0实现调⽤摄像头进⾏拍照功能exif.js实现图⽚上传功能本⽂实例为⼤家分享了Vue2.0实现调⽤摄像头进⾏拍照功能的具体代码，以及图⽚上传功能引⽤exif.js，供⼤家参考，具体内容如下可以在github 上链接vue组件代码<template><div><div style="padding:20px;"><div class="show"><div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div></div><div style="margin-top:20px;"><input type="file" id="upload" accept="image/jpg" @change="upload"><label for="upload"></label></div></div></div></template><script>import {Exif} from './exif.js'export default {data () {return {headerImage:'',picValue:''}},mounted () {},methods: {upload (e) {let files = e.target.files || e.dataTransfer.files;if (!files.length) return;this.picValue = files[0];this.imgPreview(this.picValue);console.log(this.picValue)},imgPreview (file) {let self = this;let Orientation;//去获取拍照时的信息，解决拍出来的照⽚旋转问题Exif.getData(file, function(){Orientation = Exif.getTag(this, 'Orientation');});// 看⽀持不⽀持FileReaderif (!file || !window.FileReader) return;if (/^image/.test(file.type)) {// 创建⼀个readerlet reader = new FileReader();// 将图⽚2将转成 base64 格式reader.readAsDataURL(file);// 读取成功后的回调reader.onloadend = function () {let result = this.result;let img = new Image();img.src = result;//判断图⽚是否⼤于100K,是就直接上传，反之压缩图⽚if (this.result.length <= (100 * 1024)) {self.headerImage = this.result;self.postImg();}else {img.onload = function () {let data = press(img,Orientation);self.headerImage = data;self.postImg();}}}}},postImg () {//这⾥写接⼝},rotateImg (img, direction,canvas) {//最⼩与最⼤旋转⽅向，图⽚旋转4次后回到原⽅向const min_step = 0;const max_step = 3;if (img == null)return;//img的⾼度和宽度不能在img元素隐藏后获取，否则会出错let height = img.height;let width = img.width;let step = 2;if (step == null) {step = min_step;}if (direction == 'right') {step++;//旋转到原位置，即超过最⼤值step > max_step && (step = min_step);} else {step--;step < min_step && (step = max_step);}//旋转⾓度以弧度值为参数let degree = step * 90 * Math.PI / 180;let ctx = canvas.getContext('2d');switch (step) {case 0:canvas.width = width;canvas.height = height;ctx.drawImage(img, 0, 0);break;case 1:canvas.width = height;canvas.height = width;ctx.rotate(degree);ctx.drawImage(img, 0, -height);break;case 2:canvas.width = width;canvas.height = height;ctx.rotate(degree);ctx.drawImage(img, -width, -height);break;case 3:canvas.width = height;canvas.height = width;ctx.rotate(degree);ctx.drawImage(img, -width, 0);break;}},compress(img,Orientation) {let canvas = document.createElement("canvas");let ctx = canvas.getContext('2d');//⽡⽚canvaslet tCanvas = document.createElement("canvas");let tctx = tCanvas.getContext("2d");let initSize = img.src.length;let width = img.width;let height = img.height;//如果图⽚⼤于四百万像素，计算压缩⽐并将⼤⼩压⾄400万以下 let ratio;if ((ratio = width * height / 4000000) > 1) {console.log("⼤于400万像素")ratio = Math.sqrt(ratio);width /= ratio;height /= ratio;} else {ratio = 1;}canvas.width = width;canvas.height = height;// 铺底⾊ctx.fillStyle = "#fff";ctx.fillRect(0, 0, canvas.width, canvas.height);//如果图⽚像素⼤于100万则使⽤⽡⽚绘制let count;if ((count = width * height / 1000000) > 1) {console.log("超过100W像素");count = ~~(Math.sqrt(count) + 1); //计算要分成多少块⽡⽚// 计算每块⽡⽚的宽和⾼let nw = ~~(width / count);let nh = ~~(height / count);tCanvas.width = nw;tCanvas.height = nh;for (let i = 0; i < count; i++) {for (let j = 0; j < count; j++) {tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);}}} else {ctx.drawImage(img, 0, 0, width, height);}//修复ios上传图⽚的时候被旋转的问题if(Orientation != "" && Orientation != 1){switch(Orientation){case 6://需要顺时针（向左）90度旋转this.rotateImg(img,'left',canvas);break;case 8://需要逆时针（向右）90度旋转this.rotateImg(img,'right',canvas);break;case 3://需要180度旋转this.rotateImg(img,'right',canvas);//转两次this.rotateImg(img,'right',canvas);break;}}//进⾏最⼩压缩let ndata = canvas.toDataURL('image/jpeg', 0.1);console.log('压缩前：' + initSize);console.log('压缩后：' + ndata.length);console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;return ndata;},}}</script><style>*{margin: 0;padding: 0;}.show {width: 100px;height: 100px;overflow: hidden;position: relative;border-radius: 50%;border: 1px solid #d5d5d5;}.picture {width: 100%;height: 100%;overflow: hidden;background-position: center center;background-repeat: no-repeat;background-size: cover;}</style>引⽤的exif.js代码(function() {var debug = false;var root = this;var EXIF = function(obj) {if (obj instanceof EXIF) return obj;if (!(this instanceof EXIF)) return new EXIF(obj);this.EXIFwrapped = obj;};if (typeof exports !== 'undefined') {if (typeof module !== 'undefined' && module.exports) {exports = module.exports = EXIF;}exports.EXIF = EXIF;} else {root.EXIF = EXIF;}var ExifTags = EXIF.Tags = {// version tags0x9000 : "ExifVersion", // EXIF version0xA000 : "FlashpixVersion", // Flashpix format version// colorspace tags0xA001 : "ColorSpace", // Color space information tag// image configuration0xA002 : "PixelXDimension", // Valid width of meaningful image0xA003 : "PixelYDimension", // Valid height of meaningful image0x9101 : "ComponentsConfiguration", // Information about channels0x9102 : "CompressedBitsPerPixel", // Compressed bits per pixel// user information0x927C : "MakerNote", // Any desired information written by the manufacturer0x9286 : "UserComment", // Comments by user// related file0xA004 : "RelatedSoundFile", // Name of related sound file// date and time0x9003 : "DateTimeOriginal", // Date and time when the original image was generated0x9004 : "DateTimeDigitized", // Date and time when the image was stored digitally0x9290 : "SubsecTime", // Fractions of seconds for DateTime0x9291 : "SubsecTimeOriginal", // Fractions of seconds for DateTimeOriginal0x9292 : "SubsecTimeDigitized", // Fractions of seconds for DateTimeDigitized// picture-taking conditions0x829A : "ExposureTime", // Exposure time (in seconds)0x829D : "FNumber", // F number0x8822 : "ExposureProgram", // Exposure program0x8824 : "SpectralSensitivity", // Spectral sensitivity0x8827 : "ISOSpeedRatings", // ISO speed rating0x8828 : "OECF", // Optoelectric conversion factor0x9201 : "ShutterSpeedValue", // Shutter speed0x9202 : "ApertureValue", // Lens aperture0x9203 : "BrightnessValue", // Value of brightness0x9204 : "ExposureBias", // Exposure bias0x9205 : "MaxApertureValue", // Smallest F number of lens0x9206 : "SubjectDistance", // Distance to subject in meters0x9207 : "MeteringMode", // Metering mode0x9208 : "LightSource", // Kind of light source0x9209 : "Flash", // Flash status0x9214 : "SubjectArea", // Location and area of main subject0x920A : "FocalLength", // Focal length of the lens in mm0xA20B : "FlashEnergy", // Strobe energy in BCPS0xA20C : "SpatialFrequencyResponse", //0xA20E : "FocalPlaneXResolution", // Number of pixels in width direction per FocalPlaneResolutionUnit0xA20F : "FocalPlaneYResolution", // Number of pixels in height direction per FocalPlaneResolutionUnit0xA210 : "FocalPlaneResolutionUnit", // Unit for measuring FocalPlaneXResolution and FocalPlaneYResolution 0xA214 : "SubjectLocation", // Location of subject in image0xA215 : "ExposureIndex", // Exposure index selected on camera0xA217 : "SensingMethod", // Image sensor type0xA300 : "FileSource", // Image source (3 == DSC)0xA301 : "SceneType", // Scene type (1 == directly photographed)0xA302 : "CFAPattern", // Color filter array geometric pattern0xA401 : "CustomRendered", // Special processing0xA402 : "ExposureMode", // Exposure mode0xA403 : "WhiteBalance", // 1 = auto white balance, 2 = manual0xA404 : "DigitalZoomRation", // Digital zoom ratio0xA405 : "FocalLengthIn35mmFilm", // Equivalent foacl length assuming 35mm film camera (in mm) 0xA406 : "SceneCaptureType", // Type of scene0xA407 : "GainControl", // Degree of overall image gain adjustment0xA408 : "Contrast", // Direction of contrast processing applied by camera0xA409 : "Saturation", // Direction of saturation processing applied by camera0xA40A : "Sharpness", // Direction of sharpness processing applied by camera0xA40B : "DeviceSettingDescription", //0xA40C : "SubjectDistanceRange", // Distance to subject// other tags0xA005 : "InteroperabilityIFDPointer",0xA420 : "ImageUniqueID" // Identifier assigned uniquely to each image};var TiffTags = EXIF.TiffTags = {0x0100 : "ImageWidth",0x0101 : "ImageHeight",0x8769 : "ExifIFDPointer",0x8825 : "GPSInfoIFDPointer",0xA005 : "InteroperabilityIFDPointer",0x0102 : "BitsPerSample",0x0103 : "Compression",0x0106 : "PhotometricInterpretation",0x0112 : "Orientation",0x0115 : "SamplesPerPixel",0x011C : "PlanarConfiguration",0x0212 : "YCbCrSubSampling",0x0213 : "YCbCrPositioning",0x011A : "XResolution",0x011B : "YResolution",0x0128 : "ResolutionUnit",0x0111 : "StripOffsets",0x0116 : "RowsPerStrip",0x0117 : "StripByteCounts",0x0201 : "JPEGInterchangeFormat",0x0202 : "JPEGInterchangeFormatLength",0x012D : "TransferFunction",0x013E : "WhitePoint",0x013F : "PrimaryChromaticities",0x0211 : "YCbCrCoefficients",0x0214 : "ReferenceBlackWhite",0x0132 : "DateTime",0x010E : "ImageDescription",0x010F : "Make",0x0110 : "Model",0x0131 : "Software",0x013B : "Artist",0x8298 : "Copyright"};var GPSTags = EXIF.GPSTags = {0x0000 : "GPSVersionID",0x0001 : "GPSLatitudeRef",0x0002 : "GPSLatitude",0x0003 : "GPSLongitudeRef",0x0004 : "GPSLongitude",0x0005 : "GPSAltitudeRef",0x0006 : "GPSAltitude",0x0007 : "GPSTimeStamp",0x0008 : "GPSSatellites",0x0009 : "GPSStatus",0x000A : "GPSMeasureMode",0x000B : "GPSDOP",0x000C : "GPSSpeedRef",0x000D : "GPSSpeed",0x000E : "GPSTrackRef",0x000F : "GPSTrack",0x0010 : "GPSImgDirectionRef",0x0011 : "GPSImgDirection",0x0012 : "GPSMapDatum",0x0013 : "GPSDestLatitudeRef",0x0014 : "GPSDestLatitude",0x0015 : "GPSDestLongitudeRef",0x0016 : "GPSDestLongitude",0x0017 : "GPSDestBearingRef",0x0018 : "GPSDestBearing",0x0019 : "GPSDestDistanceRef",0x001A : "GPSDestDistance",0x001B : "GPSProcessingMethod",0x001C : "GPSAreaInformation",0x001D : "GPSDateStamp",0x001E : "GPSDifferential"};var StringValues = EXIF.StringValues = {ExposureProgram : {0 : "Not defined",1 : "Manual",2 : "Normal program",3 : "Aperture priority",4 : "Shutter priority",5 : "Creative program",6 : "Action program",7 : "Portrait mode",8 : "Landscape mode"},MeteringMode : {0 : "Unknown",1 : "Average",2 : "CenterWeightedAverage",3 : "Spot",4 : "MultiSpot",5 : "Pattern",6 : "Partial",255 : "Other"},LightSource : {0 : "Unknown",1 : "Daylight",2 : "Fluorescent",3 : "Tungsten (incandescent light)",4 : "Flash",9 : "Fine weather",10 : "Cloudy weather",11 : "Shade",12 : "Daylight fluorescent (D 5700 - 7100K)",13 : "Day white fluorescent (N 4600 - 5400K)",14 : "Cool white fluorescent (W 3900 - 4500K)",15 : "White fluorescent (WW 3200 - 3700K)",17 : "Standard light A",18 : "Standard light B",19 : "Standard light C",20 : "D55",21 : "D65",22 : "D75",23 : "D50",24 : "ISO studio tungsten",255 : "Other"},Flash : {0x0000 : "Flash did not fire",0x0001 : "Flash fired",0x0005 : "Strobe return light not detected",0x0007 : "Strobe return light detected",0x0009 : "Flash fired, compulsory flash mode",0x000D : "Flash fired, compulsory flash mode, return light not detected", 0x000F : "Flash fired, compulsory flash mode, return light detected",0x0010 : "Flash did not fire, compulsory flash mode",0x0018 : "Flash did not fire, auto mode",0x0019 : "Flash fired, auto mode",0x001D : "Flash fired, auto mode, return light not detected",0x001F : "Flash fired, auto mode, return light detected",0x0020 : "No flash function",0x0041 : "Flash fired, red-eye reduction mode",0x0045 : "Flash fired, red-eye reduction mode, return light not detected",0x0047 : "Flash fired, red-eye reduction mode, return light detected",0x0049 : "Flash fired, compulsory flash mode, red-eye reduction mode",0x004D : "Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected", 0x004F : "Flash fired, compulsory flash mode, red-eye reduction mode, return light detected",0x0059 : "Flash fired, auto mode, red-eye reduction mode",0x005D : "Flash fired, auto mode, return light not detected, red-eye reduction mode",0x005F : "Flash fired, auto mode, return light detected, red-eye reduction mode"},SensingMethod : {1 : "Not defined",2 : "One-chip color area sensor",3 : "Two-chip color area sensor",4 : "Three-chip color area sensor",5 : "Color sequential area sensor",7 : "Trilinear sensor",8 : "Color sequential linear sensor"},SceneCaptureType : {0 : "Standard",1 : "Landscape",2 : "Portrait",3 : "Night scene"},SceneType : {1 : "Directly photographed"},CustomRendered : {0 : "Normal process",1 : "Custom process"},WhiteBalance : {0 : "Auto white balance",1 : "Manual white balance"},GainControl : {0 : "None",1 : "Low gain up",2 : "High gain up",3 : "Low gain down",4 : "High gain down"},Contrast : {0 : "Normal",1 : "Soft",2 : "Hard"},Saturation : {0 : "Normal",1 : "Low saturation",2 : "High saturation"},Sharpness : {0 : "Normal",1 : "Soft",2 : "Hard"},SubjectDistanceRange : {0 : "Unknown",1 : "Macro",2 : "Close view",3 : "Distant view"},FileSource : {3 : "DSC"},Components : {0 : "",1 : "Y",2 : "Cb",3 : "Cr",4 : "R",5 : "G",6 : "B"}};function addEvent(element, event, handler) {if (element.addEventListener) {element.addEventListener(event, handler, false);} else if (element.attachEvent) {element.attachEvent("on" + event, handler);}}function imageHasData(img) {return !!(img.exifdata);}function base64ToArrayBuffer(base64, contentType) {contentType = contentType || base64.match(/^data\:([^\;]+)\;base64,/mi)[1] || ''; // e.g. 'data:image/jpeg;base64,...' => 'image/jpeg' base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');var binary = atob(base64);var len = binary.length;var buffer = new ArrayBuffer(len);var view = new Uint8Array(buffer);for (var i = 0; i < len; i++) {view[i] = binary.charCodeAt(i);}return buffer;}function objectURLToBlob(url, callback) {var http = new XMLHttpRequest();http.open("GET", url, true);http.responseType = "blob";http.onload = function(e) {if (this.status == 200 || this.status === 0) {callback(this.response);}};http.send();}function getImageData(img, callback) {function handleBinaryFile(binFile) {var data = findEXIFinJPEG(binFile);var iptcdata = findIPTCinJPEG(binFile);img.exifdata = data || {};img.iptcdata = iptcdata || {};if (callback) {callback.call(img);}}if (img.src) {if (/^data\:/i.test(img.src)) { // Data URIvar arrayBuffer = base64ToArrayBuffer(img.src);handleBinaryFile(arrayBuffer);} else if (/^blob\:/i.test(img.src)) { // Object URLvar fileReader = new FileReader();fileReader.onload = function(e) {handleBinaryFile(e.target.result);};objectURLToBlob(img.src, function (blob) {fileReader.readAsArrayBuffer(blob);});} else {var http = new XMLHttpRequest();http.onload = function() {if (this.status == 200 || this.status === 0) {handleBinaryFile(http.response);} else {throw "Could not load image";}http = null;};http.open("GET", img.src, true);http.responseType = "arraybuffer";http.send(null);}} else if (window.FileReader && (img instanceof window.Blob || img instanceof window.File)) {var fileReader = new FileReader();fileReader.onload = function(e) {if (debug) console.log("Got file of length " + e.target.result.byteLength);handleBinaryFile(e.target.result);};fileReader.readAsArrayBuffer(img);}}function findEXIFinJPEG(file) {var dataView = new DataView(file);if (debug) console.log("Got file of length " + file.byteLength);if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {if (debug) console.log("Not a valid JPEG");return false; // not a valid jpeg}var offset = 2,length = file.byteLength,marker;while (offset < length) {if (dataView.getUint8(offset) != 0xFF) {if (debug) console.log("Not a valid marker at offset " + offset + ", found: " + dataView.getUint8(offset)); return false; // not a valid marker, something is wrong}marker = dataView.getUint8(offset + 1);if (debug) console.log(marker);// we could implement handling for other markers here,// but we're only looking for 0xFFE1 for EXIF dataif (marker == 225) {if (debug) console.log("Found 0xFFE1 marker");return readEXIFData(dataView, offset + 4, dataView.getUint16(offset + 2) - 2);// offset += 2 + file.getShortAt(offset+2, true);} else {offset += 2 + dataView.getUint16(offset+2);}}}function findIPTCinJPEG(file) {var dataView = new DataView(file);if (debug) console.log("Got file of length " + file.byteLength);if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {if (debug) console.log("Not a valid JPEG");return false; // not a valid jpeg}var offset = 2,length = file.byteLength;var isFieldSegmentStart = function(dataView, offset){return (dataView.getUint8(offset) === 0x38 &&dataView.getUint8(offset+1) === 0x42 &&dataView.getUint8(offset+2) === 0x49 &&dataView.getUint8(offset+3) === 0x4D &&dataView.getUint8(offset+4) === 0x04 &&dataView.getUint8(offset+5) === 0x04);};while (offset < length) {if ( isFieldSegmentStart(dataView, offset )){// Get the length of the name header (which is padded to an even number of bytes)var nameHeaderLength = dataView.getUint8(offset+7);if(nameHeaderLength % 2 !== 0) nameHeaderLength += 1;// Check for pre photoshop 6 formatif(nameHeaderLength === 0) {// Always 4nameHeaderLength = 4;}var startOffset = offset + 8 + nameHeaderLength;var sectionLength = dataView.getUint16(offset + 6 + nameHeaderLength);return readIPTCData(file, startOffset, sectionLength);break;}// Not the marker, continue searchingoffset++;}}var IptcFieldMap = {0x78 : 'caption',0x6E : 'credit',0x19 : 'keywords',0x37 : 'dateCreated',0x50 : 'byline',0x55 : 'bylineTitle',0x7A : 'captionWriter',0x69 : 'headline',0x74 : 'copyright',0x0F : 'category'};function readIPTCData(file, startOffset, sectionLength){var dataView = new DataView(file);var data = {};var fieldValue, fieldName, dataSize, segmentType, segmentSize;var segmentStartPos = startOffset;while(segmentStartPos < startOffset+sectionLength) {if(dataView.getUint8(segmentStartPos) === 0x1C && dataView.getUint8(segmentStartPos+1) === 0x02){ segmentType = dataView.getUint8(segmentStartPos+2);if(segmentType in IptcFieldMap) {dataSize = dataView.getInt16(segmentStartPos+3);segmentSize = dataSize + 5;fieldName = IptcFieldMap[segmentType];fieldValue = getStringFromDB(dataView, segmentStartPos+5, dataSize);// Check if we already stored a value with this nameif(data.hasOwnProperty(fieldName)) {// Value already stored with this name, create multivalue fieldif(data[fieldName] instanceof Array) {data[fieldName].push(fieldValue);}else {data[fieldName] = [data[fieldName], fieldValue];}}else {data[fieldName] = fieldValue;}}}segmentStartPos++;}return data;}function readTags(file, tiffStart, dirStart, strings, bigEnd) {var entries = file.getUint16(dirStart, !bigEnd),tags = {},entryOffset, tag,i;for (i=0;i<entries;i++) {entryOffset = dirStart + i*12 + 2;tag = strings[file.getUint16(entryOffset, !bigEnd)];if (!tag && debug) console.log("Unknown tag: " + file.getUint16(entryOffset, !bigEnd)); tags[tag] = readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd);}return tags;}function readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd) {var type = file.getUint16(entryOffset+2, !bigEnd),numValues = file.getUint32(entryOffset+4, !bigEnd),valueOffset = file.getUint32(entryOffset+8, !bigEnd) + tiffStart,offset,vals, val, n,numerator, denominator;switch (type) {case 1: // byte, 8-bit unsigned intcase 7: // undefined, 8-bit byte, value depending on fieldif (numValues == 1) {return file.getUint8(entryOffset + 8, !bigEnd);} else {offset = numValues > 4 ? valueOffset : (entryOffset + 8);vals = [];for (n=0;n<numValues;n++) {vals[n] = file.getUint8(offset + n);}return vals;}case 2: // ascii, 8-bit byteoffset = numValues > 4 ? valueOffset : (entryOffset + 8);return getStringFromDB(file, offset, numValues-1);case 3: // short, 16 bit intif (numValues == 1) {return file.getUint16(entryOffset + 8, !bigEnd);} else {offset = numValues > 2 ? valueOffset : (entryOffset + 8);vals = [];for (n=0;n<numValues;n++) {vals[n] = file.getUint16(offset + 2*n, !bigEnd);}return vals;}case 4: // long, 32 bit intif (numValues == 1) {return file.getUint32(entryOffset + 8, !bigEnd);} else {vals = [];for (n=0;n<numValues;n++) {vals[n] = file.getUint32(valueOffset + 4*n, !bigEnd);}return vals;}case 5: // rational = two long values, first is numerator, second is denominatorif (numValues == 1) {numerator = file.getUint32(valueOffset, !bigEnd);denominator = file.getUint32(valueOffset+4, !bigEnd);val = new Number(numerator / denominator);val.numerator = numerator;val.denominator = denominator;return val;} else {vals = [];for (n=0;n<numValues;n++) {numerator = file.getUint32(valueOffset + 8*n, !bigEnd);denominator = file.getUint32(valueOffset+4 + 8*n, !bigEnd);vals[n] = new Number(numerator / denominator);vals[n].numerator = numerator;vals[n].denominator = denominator;}return vals;}case 9: // slong, 32 bit signed intif (numValues == 1) {return file.getInt32(entryOffset + 8, !bigEnd);} else {vals = [];for (n=0;n<numValues;n++) {vals[n] = file.getInt32(valueOffset + 4*n, !bigEnd);}return vals;}case 10: // signed rational, two slongs, first is numerator, second is denominatorif (numValues == 1) {return file.getInt32(valueOffset, !bigEnd) / file.getInt32(valueOffset+4, !bigEnd);} else {vals = [];for (n=0;n<numValues;n++) {vals[n] = file.getInt32(valueOffset + 8*n, !bigEnd) / file.getInt32(valueOffset+4 + 8*n, !bigEnd);}return vals;}}}function getStringFromDB(buffer, start, length) {var outstr = "";for (n = start; n < start+length; n++) {outstr += String.fromCharCode(buffer.getUint8(n));}return outstr;}function readEXIFData(file, start) {if (getStringFromDB(file, start, 4) != "Exif") {if (debug) console.log("Not valid EXIF data! " + getStringFromDB(file, start, 4));return false;}var bigEnd,tags, tag,exifData, gpsData,tiffOffset = start + 6;// test for TIFF validity and endiannessif (file.getUint16(tiffOffset) == 0x4949) {bigEnd = false;} else if (file.getUint16(tiffOffset) == 0x4D4D) {bigEnd = true;} else {if (debug) console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)");return false;}if (file.getUint16(tiffOffset+2, !bigEnd) != 0x002A) {if (debug) console.log("Not valid TIFF data! (no 0x002A)");return false;}var firstIFDOffset = file.getUint32(tiffOffset+4, !bigEnd);if (firstIFDOffset < 0x00000008) {if (debug) console.log("Not valid TIFF data! (First offset less than 8)", file.getUint32(tiffOffset+4, !bigEnd)); return false;}tags = readTags(file, tiffOffset, tiffOffset + firstIFDOffset, TiffTags, bigEnd);。

负片扫描校色教程正式开始我们的教程之前，有几个前提需要明确一下。

第一是这个教程是建立在使用底片扫描仪的基础上的，无论你是用美能达、尼康、中晶等等，只要你是底片扫描仪，本教程就适用。

一般的透扫、滚桶、仿滚桶、电分等非底扫类的扫描仪并不保证适用。

第二、这个教程是建立在使用VUESCAN扫描软件的基础上的。

VUESCAN是一个能为用户提供多种手动设置的扫描软件，使用上比较灵活，所以小弟在这里强烈推荐。

那原厂软件、SILVERFAST等软件是不是不能用呢？可以的，只要您喜欢就行了，但这种软件在负片扫描上，最终的数码文件都被软件本身大量加入“味精”，所以在后期更难调整。

第三是负片扫描与正片不一样，世间上没有可以用于负片的ICC文件，所以求ICC文件的朋友可以死心了。

OK，废话不多说，正式开始。

关于负片的前期扫描技巧就请看看M编的这个教程，通过教程中的几个步骤我们基本上就能得到一张像模像样的片子了。

如何再现负片的真实色彩--负片扫描和PS的技巧如果有兴趣的话，还可以看看M编的另一篇关于扫描反转片的教程，咱这里就不另外讨论了。

如何得到一张“通透”的图片--使用扫描仪和PS的几个技巧从M编那个关于扫描负片的贴子来看，我们可以看到，负片的扫描主要包括两大步骤：通过扫描得到数码文件和在PHOTOSHOP里对数码文件进行校色还原。

在扫描得到数码文件这个步骤上，小弟是完全按照M编的做法，唯独是在PS方面则并一样。

当我们接照M编的步骤扫描完一张负片的时候，我们大致上能得到下面这张片子。

动手前我们先对片子观察一下，发现负片的色罩基本上已去清，色彩上也比较靠谱了。

但仔细看一下，片子的色彩还不够正，看着有点怪怪的味道，你说她偏品红，那也不完全是。

片子的整体反差也比较弱，灰灰的。

很多朋友在做到这一步的时候，往往是靠自己的眼睛来判断并进行调整，比如一眼看过去这片子偏品红，那好办，最好就是在PS的色彩平衡里减品加青啦。

然而我要告诉大家的是，我们的眼睛其实并不可靠，到底加多少减多少才是正确的呢？这可就没有谱了。

一扫描1、建立ZooScan扫描文件打开“ Image J”, 点击“ Z ”，建立扫描文件（Create a new project），选择相应的分辨率及对应的扫描框，2400dpi（大框）或者4800dpi（小框）；2、扫描背景2次每天扫描要提前打开ZooScan预热，每天第一次扫描要扫描背景2次：（1）往扫描槽中加入少许水，将扫描框放入槽中，水要没过框的台阶，保证槽中没有气泡及其他杂质，盖上盖子；（2）打开“ Image J”, 点击“ Z ”，选择已建立的文件夹，点击“Scan and process blank (background image)”，打开“VueScan”，点击Preview—30s—Scan—30s—Scan，保存完背景关闭“VueScan”；3、扫描样品（1）处理样品，采集样品的网孔径小于500um时，将样品同时通过1mm和100um（小于采集样品网的孔径），得到的样品再分别进行分样，最终样品分别记为d1与d2，分别记录分样次数；（2）往扫描槽中加入少许水，将扫描框放入槽中，将样品倒入框内，使用木制的棍子将粘连在一起的物体分开，浮在水表的物体要按入水底（否则去除），确保没有气泡，盖上盖子；（3）点击“SCAN sample with Zooscan (for archive, no process)”，填写样品信息，打开“VueScan”，点击Preview—30s—Scan，保存完图片关闭“VueScan”；二处理图片1、打开“ Image J”,，点击“ Z ”，选择“Convert and process image in batch mode”；三建立Learning set并处理，ImageJ(Zooprocess)+ Plankton Identifier1、进入“Pid_process”—“Pid_results”，将要用于建立Learning set的“.pid”文件复制到“Unsorted_vignettes_pid”；2、打开“ Image J”，点击“ Z ”，选择“Extract vignettes for plankton identifier”，完成之后每个小图片及相应的.pid都保存在“Unsorted_vignettes_pid”；3、“Pid process”—“sorted vignettes”，建立名为“Learningset_date ”的文件夹，将所有用于建立Learningset的pid文件复制其中；4、关闭“ Image J”，打开“Plankton Identifier”，点击“Learning”，选择“sortedvignettes”—“Learningset_date ”，窗口左边选择“Unsorted_vignettes”，右边建立浮游动物类群文件夹，将图片分类；5、完成所有的图片分类之后，点击“create learning file”，命名为Learningset_date，保存在“Learningset_date ”文件中；四校正图片，若已有Learningset则不用进行步骤三1、“Plankton Identifier”—“Data Analysis”，左边选择Learning set，左下角选择“Pid_results”文件中待处理的.pid，选择将用于分类物体的变量；2、选择SPVLearning4(Random forest)方法，点击“save detailed results for eachsample”，保存到“Pid process”—“Prediction”，命名为“Analysis_yyyymmdd”；3、校正图片前处理，将“Prediction”中的“Analysis.txt”文件复制到“Pid_results”；4、打开“ Image J”，点击“ Z ”，选择“Extract vignettes in folders according toprediction”；5、校正图片，将分类错误的图片移到对应的类群中；6、打开“ Image J”，点击“ Z ”，选择“Load identifications from sorted vignettes”，生成的.txt文件保存在“Pid_results”—“Pid_Validated”.。

vuebackground-image的使用方法==================一、引言----在Vue.js中，背景图片的使用是非常常见的。

通过合理地使用背景图片，我们可以在网页上创建出丰富多彩的视觉效果，增强用户体验。

本文将详细介绍如何在Vue.js中使用背景图片。

二、背景图片的添加---------在Vue中，添加背景图片的方式有多种。

最常见的两种方式是通过HTML标签的style属性或者通过在Vue组件中设置样式。

###1.直接在HTML标签中添加style属性你可以直接在HTML标签中使用style属性来添加背景图片。

这种方式比较简单，但需要将图片的URL写死，可能会造成可维护性不佳的问题。

```html<template><div:style="{backgroundImage:'url(your-image-url)'}"></div></template>```###2.在Vue组件中设置样式另一种方式是在Vue组件中设置样式。

这种方式更灵活，可以通过props或者data来传递图片路径，也可以通过computed或者watch 来动态改变背景图片。

```vue<template><div:style="backgroundStyle"></div></template><script>exportdefault{data(){return{imageUrl:'your-image-url',//图片路径}},computed:{backgroundStyle(){return`background-image:url(${this.imageUrl})`}}}</script>```三、使用动态背景图片----------使用动态背景图片是指根据不同的条件动态改变背景图片。

vue中用iframe预览pdf一、Vue与iFrame的集成Vue.js 是一款流行的前端框架，它提供了构建用户界面的强大工具。

iFrame 是 HTML 中用于嵌入另一个网页的元素，常用于在主页面中嵌入第三方内容。

在 Vue.js 中集成 iFrame，可以通过以下步骤实现：1. 在 Vue 组件中，使用<iframe>标签。

2. 通过v-bind指令（或简写为:）将 iFrame 的src属性绑定到 Vue 实例的数据或计算属性上。

3. 在 Vue 实例中，通过设置数据或计算属性的值，控制 iFrame 加载的 URL。

二、预览PDF的基本概念PDF（Portable Document Format）是一种常见的文档格式，它是由 Adobe Systems 开发的。

预览 PDF 通常指的是在用户界面中打开并显示 PDF 文件。

这通常涉及到渲染 PDF 文件的内容，包括文本、图像和矢量图形等。

在 Web 中预览 PDF，通常需要使用专门的库或插件。

三、实现PDF预览的步骤要在 Vue 中用 iFrame 预览 PDF，需要遵循以下步骤：1. 选择一个适合的 PDF 预览库。

一些流行的选项包括 PDF.js（由 Mozilla 开发）和 vue-pdf（基于 pdf.js 的 Vue 组件）。

这些库提供了在浏览器中渲染 PDF 的功能。

2. 将选择的库集成到 Vue 项目中。

这通常涉及到安装库的依赖包，并在需要预览 PDF 的组件中引入库的代码。

3. 在 Vue 组件中，创建一个 iFrame 元素。

通过ref属性为 iFrame 指定一个引用名称，以便在 Vue 实例中访问它。

4. 在 Vue 实例中，创建一个方法来加载 PDF 文件。

这个方法可以接受一个 URL 作为参数，用于指定要预览的 PDF的位置。

5. 在加载 PDF 的方法中，使用选择的 PDF 预览库来加载和渲染 PDF 文件。

日系小清新拍摄技巧及作品赏析日系“小清新”照片最近的流行，似乎有延续不衰的趋势，越来越多的人开始使用胶片相机“找感觉”或是用数码相机做后期处理。

这种带有小情节、小情绪和生活气息、温情柔和的“小清新”照片，其中的浅景深效果、每一个小细节及时时过暴的光线，都透着摄影的魅力。

“小清新”风格起源于日本，以朴素淡雅的色彩、略有过曝的光线处理及刻意的虚焦效果等深受一部分拥趸的喜爱。

日本小清新风格摄影师以川内伦子、小林纪晴、嶋本麻利沙等为代表，本文就为大家一一介绍这些日本知名摄影师及他们的作品，并在最后介绍一些拍摄小清新照片的技巧。

如何拍摄日系清新大片希望这次精选能和初衷相符，在炎炎的夏日为大家送去些许清爽、些许平静。

最后为大家献上一份日系摄影攻略，希望大家也能找到属于自己的清爽。

1.使用胶片机底片机的颜色层次还有宽容度相当好，使用底片机是拍出清淡日系风格照片的一个重点。

当然数码照片也是可以透过后期处理得到类似的结果，但是仔细看还是会发现数码在处理高光部分的时候很容易曝掉，清淡照片当然是不可以高光曝掉的咯。

2.使用手动对焦随着数码单反的普及，自动对焦镜头也多了起来，使用AF镜头的结果就是一切对焦都非常精准，对眼睛半按快门就对焦到了眼睛，缩小1-2级光圈就整个脸都清楚了，其实照片不一定非要对焦对得如此精准，适当的失焦或者些微的脱焦反而令人觉得非常隽永迷人，而MF镜头就是关键。

3.挑选多云的天气多云的天气光线呈现漫射光，照片的明暗反差不会太大，刚好落在底片宽容度里面，而且颜色对比以及饱和度会比较低。

4.使用负片负片宽容度高，调性比较高，而正片（反转片）调性较低，因此负片最适合淡雅风格的拍摄需求。

5.建议柯达200负片柯达的色调偏黄，富士的偏绿，当然色调也跟实际拍摄场景的色温关系很大，不过根据最近两次拍摄的经验，10元人民币一卷的柯达200 Color Plus最好用。

6.使用Vuescan扫描拍摄完的负片，使用Vuescan选择对应的Kodak200片基扫描，最容易一次达到自己想要的色调。

主题：Vue颜色自动变浅又变深写法内容：1. Vue是一款流行的前端框架，提供了丰富的功能和组件，其中包括颜色自动变浅又变深的功能。

这种功能可以在前端开发中带来很大的便利性，让开发者能够更加灵活地处理颜色的变化。

2. 在Vue中，实现颜色自动变浅又变深可以借助于一些常用的插件和方法，比如使用v-bind样式绑定和计算属性等。

接下来将详细介绍这些方法的具体用法和实现原理。

3. 使用v-bind样式绑定是一种简单的实现颜色自动变浅又变深的方法。

通过给元素的style属性绑定一个对象，可以动态地改变元素的颜色。

可以使用v-bind语法将一个变量和颜色属性进行绑定，然后在对应的计算属性中根据需要进行修改，从而实现颜色的自动变浅又变深。

4. 另一种方法是通过计算属性来实现颜色的自动变浅又变深。

通过定义一个计算属性，根据需要返回不同颜色的值，可以实现动态变化的效果。

在计算属性中可以灵活地使用一些颜色处理的方法，比如颜色加深、减深等，从而实现自动变浅又变深的效果。

5. 在实际的开发中，选择合适的方法来实现颜色自动变浅又变深取决于具体的业务需求。

有些情况下，v-bind样式绑定更加简单直接，而有些情况下计算属性更加灵活，开发者需要根据具体情况进行选择。

6. Vue提供了丰富的功能和灵活的方法来处理颜色的自动变浅又变深，开发者可以根据自己的需要选择合适的方法来实现这一效果。

掌握这些方法不仅能提高开发效率，还可以让前端页面的颜色更加丰富多彩。

结论：在Vue中实现颜色的自动变浅又变深是一项常见的需求，通过合理地选择v-bind样式绑定和计算属性等方法，可以十分便利地实现这一效果。

希望本文对开发者在应对前端开发中遇到的颜色处理问题时有所帮助。

第7. 另外，Vue框架中也提供了一些第三方插件来处理颜色变化，比如vue-color和vuetify等。

这些插件提供了丰富的颜色处理功能，可以让开发者更加便捷地实现颜色自动变浅又变深的效果。

vue实现浏览器调⽤摄像头进⾏扫⼀扫功能需求：vue项⽬要求要在浏览器中调⽤摄像头进⾏扫⼀扫，并识别出⼆维码的字符串插件：QRCodeReader插件下载npm install --save vue-qrcode-reader注意：需要在https协议下才可以调⽤相机，实现扫码。

可以通过配置vue.config.js中的devServer:{https:true}场景：点击扫⼀扫的图标，触发扫⼀扫功能，⾃动识别出数据之后，enter回车键触发接⼝请求在需要⽤到这个组件的⽗页⾯template(vue, elementui, pug格式)el-input(placeholder="⼿机号/订单号" v-model="result" class="preview-input" @keyup.enter.native="getOrderinfo()")i(slot="suffix" class="el-icon-full-screen" @click="clickCode()")img(slot="prefix" src="@/assets/img/search.svg" class="input-img" @click="getOrderinfo()")div(class="notes")BarScan(v-bind:scancode="scancode" v-if="scancode" @ok="getResult" )引⼊⼦组件import BarScan from '../../components/common/scan.vue';使⽤到的datadata: () => ({scancode:false,//控制是否使⽤扫⼀扫功能result: '',//扫码结果信息}),组件注册components: { BarScan },该页⾯触发到的⽅法methods: {this.scancode=true;},//返回扫描结果并关闭摄像头getResult(result){this.result=result;if(result!==""){this.scancode=false;}},//识别完⽂本之后，enter触发接⼝请求getOrderinfo()}},扫⼀扫组件页⾯scan.vue<template><div class="scan" v-if="scancode"><qrcode-stream @decode="onDecode" @init="onInit" style="height: 100vh;"> <div><div class="qr-scanner"><div class="box"><div class="line"></div><div class="angle"></div></div></div></div></qrcode-stream></div></template><script>// 下载插件// cnpm install --save vue-qrcode-reader// 引⼊import { QrcodeStream } from 'vue-qrcode-reader'export default {// 注册components: { QrcodeStream },props: {scancode: {type: Boolean,default: false,}},data() {return {result: '', // 扫码结果信息error: '' // 错误信息}},},methods: {clickCode() {this.scancode=true;},//回调扫描结果onDecode (result) {if(result!==""){this.scancode=false;this.$emit("ok",result)}},// 检查是否调⽤摄像头async onInit (promise) {try {await promise} catch (error) {if ( === 'NotAllowedError') {this.error = "ERROR: 您需要授予相机访问权限"} else if ( === 'NotFoundError') {this.error = "ERROR: 这个设备上没有摄像头"} else if ( === 'NotSupportedError') {this.error = "ERROR: 所需的安全上下⽂(HTTPS、本地主机)" } else if ( === 'NotReadableError') {this.error = "ERROR: 相机被占⽤"} else if ( === 'OverconstrainedError') {this.error = "ERROR: 安装摄像头不合适"} else if ( === 'StreamApiNotSupportedError') {this.error = "ERROR: 此浏览器不⽀持流API"}}},}}</script><style scoped>.error {font-weight: bold;color: red;}</style><style scoped>@import '../../assets/css/scancode.scss';</style>引⼊的cssscancode.scss.scan{border-color: #585858;position: fixed;top: 0;left: 0;}.qrcode-stream-camera{width: 100%;height: 100%;display: block;-o-object-fit: cover;object-fit: cover;position: absolute;top: 0%;left: 0%;}.qr-scanner {background-image:linear-gradient(0deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent);background-size: 3rem 3rem;background-position: -1rem -1rem;width: 100%;/* height: 100%; */height: 100vh;position: relative;background-color: #1110;/* background-color: #111; */}.qr-scanner .box {width: 213px;height: 213px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);overflow: hidden;border: 0.1rem solid rgba(0, 255, 51, 0.2);/* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */.qr-scanner .line {height: calc(100% - 2px);width: 100%;background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%); border-bottom: 3px solid #00ff33;transform: translateY(-100%);animation: radar-beam 2s infinite alternate;animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);animation-delay: 1.4s;}.qr-scanner .box:after,.qr-scanner .box:before,.qr-scanner .angle:after,.qr-scanner .angle:before {content: '';display: block;position: absolute;width: 3vw;height: 3vw;border: 0.2rem solid transparent;}.qr-scanner .box:after,.qr-scanner .box:before {top: 0;border-top-color: #00ff33;}.qr-scanner .angle:after,.qr-scanner .angle:before {bottom: 0;border-bottom-color: #00ff33;}.qr-scanner .box:before,.qr-scanner .angle:before {left: 0;border-left-color: #00ff33;}.qr-scanner .box:after,.qr-scanner .angle:after {right: 0;border-right-color: #00ff33;}@keyframes radar-beam {0% {transform: translateY(-100%);}100% {transform: translateY(0);}}。

vue3-color 用法Vue3-color 是一个基于Vue 3 的颜色管理组件库，它提供了丰富的颜色相关功能，如颜色拾取、颜色转换、颜色调整等。

以下是Vue3-color 的基本用法：1. 安装：使用npm 或yarn 安装vue3-color：```bashnpm install vue3-color```或```bashyarn add vue3-color```2. 引入组件：在Vue 项目中，引入所需的颜色管理组件：```javascriptimport { ColorPickerComponent } from 'vue3-color'export default {components: {ColorPickerComponent}}```3. 注册组件：在Vue 模板中注册引入的组件，例如：```html<template><div><color-picker></color-picker></div></template>4. 组件用法：-颜色拾取：```html<color-picker v-model="color" /><button @click="handleSaveColor">保存颜色</button>```在Vue 实例中，定义颜色变量并绑定到组件的v-model：```javascriptdata() {return {color: '#123456'}}```-颜色转换：```html<color-picker :color="color" @input="handleColorChange" />```在Vue 实例中，定义颜色变量并绑定到组件，同时监听输入事件处理颜色变化：```javascriptdata() {return {color: '#123456'}},methods: {handleColorChange(newColor) {console.log('颜色发生变化：', newColor)}}```-颜色调整：```html<color-picker :color="color" @input="handleColorAdjust" />```在Vue 实例中，定义颜色变量并绑定到组件，同时监听输入事件处理颜色调整：```javascriptdata() {return {color: '#123456'}},methods: {handleColorAdjust(newColor) {console.log('颜色调整：', newColor)}}```以上是Vue3-color 的一些基本用法，更多关于vue3-color 的详细用法和示例，请参考官方文档。