整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
介
零空间占用图像应用程序的概念已经出现了一段时间，越来越多的人在日常任务中开始依赖移动设备和平板电脑，这个概念又重新流行了起来。平台和操作系统的多样性是一个挑战。相同的应用程序会运行在任意的桌面、平板电脑或移动设备上，在HTML5中采用Canvas元素是这个问题的完美解决方案，同时增加了你的潜在客户群，减少了开发和支持的工作。
LEADTOOLS现在包括一个可用于文档和医学图像的JavaScript SDK。LEAD科技为程序员提供拥有最新图像技术的程序友好的开发工具包已经20多年。专注于最新移动设备和平板电脑的开发者现在可以将强大的图像技术如OCR、条码、图像显示和处理、DICOM、PACS等添加至移动app。
在下面的例子中，我们将为您展示如何将HTML5 / JavaScript查看器控件添加到一个web页面，如何加载一个图像并设置一些交互模式。此外，我们将使用图像格式RESTful web服务的JSON加载一个非web格式如PDF。
HTML5库的主要HTML5对象是Canvas。与LEADTOOLS JavaScript库结合，图像画布能够以所有标准的UI功能显示一个图像，包括平移、缩放、放大镜、中心等。所有的交互模式都可以在台式机、平板电脑和手机上正常无缝工作，且支持鼠标和多点触控手势输入（如缩放）。
为了在一个HTML文档中添加查看器控件，你需要的只是一个包装器div和在页面加载时运行的几行JavaScript代码，剩下的LEADTOOLS会帮你完成！
你可以在标准
标签中加载一个JPEG、PNG 或GIF，在div中封装，然后你就能拥有一个具有滚动条的基本“图像查看器”。这就是交互模式起作用的地方，为查看器提供了丰富的UI功能如放大镜以及在触摸屏（或鼠标上的Ctrl + Click）上平移、缩放的能力。在HTML中添加按钮后，你必须修改事件处理器上的运行方法。
var buttonPanZoom=document.getElementById('buttonPanZoom');
buttonPanZoom.addEventListener('click', function (e) {
// 将交互模式设置为PanZoom
var interactiveModePanZoom=new
Leadtools.Controls.ImageViewerPanZoomInteractiveMode;
_viewer.set_defaultInteractiveMode(interactiveModePanZoom);
}, false);
var buttonMagnify=document.getElementById('buttonMagnify');
buttonMagnify.addEventListener('click', function (e) {
// 将交互模式设置为MagnifyingGlass
var interactiveModeMagGlass=new Leadtools.Controls.ImageViewerMagnifyGlassInteractiveMode;
interactiveModeMagGlass.set_borderThickness(5);
_viewer.set_defaultInteractiveMode(interactiveModeMagGlass);
}, false);REST不是新技术，它是HTTP 1.0 和1.1的一部分，但是许多web应用程序已经远离了它。然而，当使用零空间占用时，客户端应用程序使用HTML5和JavaScript，由于它能与 JavaScript对象注释（JSON）进行简单交互，因此REST是一个更好的选择。
LEADTOOLS为图像格式（如下所示）、OCR、条码和图像处理提供了RESTful web服务。图像格式web服务可以接收任意图像，将它转化为web可显示的格式，然后将它返回给查看器。这意味着一个人可以加载和显示LEADTOOLS支持的150多种格式中的任意一种。
你可以调用REST服务并手动解析JSON，获取图像信息如宽度、高度等。这也并不总是必要的，但是，查看器可以简单的将它传递给服务URL，完成所有这些工作。
loadPDF: function SiteLibrary_DefaultPage$loadPDF(viewer) {
// 这是我们想要加载的图像
var imageUrl="http://demo.leadtools.com/images/pdf/leadtools.pdf"; // 将它添加到REST服务加载方法中 var restLoad="http://localhost/LEADTOOLSRESTServicesHost/Raster.svc/Load?uri=" + imageUrl; // 在查看器中设置它 _viewer.set_imageUrl(restLoad); },LEADTOOLS为开发者提供了全世界一流的稳定图像库，易于使用的高级编程接口让业务关键型应用程序的快速开发变为可能。
HTML5和RESTful Web服务只是LEADTOOLS提供的若干技术中的一个。若想了解我们产品的更多信息，欢迎访问我们的主页，下载功能完整的试用版SDK，在试用期间欢迎您使用我们的免费技术支持。
购买最新正版授权！"咨询在线客服"
慧都年终盛典火爆开启，一年仅一次的最强促销，破冰钜惠不容错过！！
本站文章除注明转载外，均为本站原创或翻译
Chrome浏览器目前应该是绝大多数程序员最喜欢的浏览器了吧，至少我是这样的O(∩_∩)O。简洁的设计，强大的插件，完美的兼容都让我爱不释手。
Chrome还提供了一个控制台工具，在开发测试时提供了极大的便利，今天我们来看看那些非常方便的Chrome使用技巧吧。
Chrome
如果我们想看某个文件的源码，我们会进入到Source控制面板下，然后在里面慢慢找。
但是如果Source下面的文件特别多话，找到自己想要的文件是一个繁杂的过程，例如下图这么多文件，只能慢慢打开各个文件夹去找。
例图
Chrome提供了快速定位文件的快捷键cmd+P（windows上是Ctrl+P）。可以通过关键字匹配到文件名，并一键进入文件中。
快捷定位文件
当你想要在页面上直接查找某个元素时，可以直接去Elements控制面板下，按cmd+F快捷键（windows下是Ctrl+F），这样的查找同样适用于Source下的js或者css文件。
cmd+F快捷键
如果你想要查找的是特定字符串出现的所有源文件，可以使用cmd+option+F快捷键（windows下是Ctrl+Shift+F）。
下面的例子是搜索所有出现“container”的地方，js和html文件中只要匹配到都会出现在结果中。
全源文件搜索
在IDE中，例如webstorm，IntellijIDEA，快速跳到指定行的快捷键是cmd+L，弹出一个输入框输入行号后，可以直接定位到指定行。
在Chrome的Source面板下同样有这个功能，快捷键是cmd+P或者cmd+shift+p，会弹出一个输入框，然后输入框第一位输入英文冒号(:)，然后输入数字即可跳转到指定的行。
效果如下图所示。
快速跳到指定行
有的时候我们希望可以对一个文件的多个地方同时进行编辑，这需要按住command键（windows下是Ctrl键），然后点击鼠标，就可以同时多点定位，最后再输入的时候，这些地方就可以同时进行编辑。
多点编辑
在现在app开发成本比较高的情况下，有很多都采用web app的模式，可以直接在web浏览器中进行移动端的适配。
Chrome提供了强大的适配模式，主流的iphone，ipad，Galaxy等屏幕都可以直接进行模拟。
这种随时进行切换的设备模式，给前端开发人员提供了极大的便利。因此我们可以在只写一套代码的时候去同时适配web端和多个不同的移动端。
设备模式
有很多的网站在线上环境中会压缩JS和CSS文件代码，通过Source面板源文件下的{}图标可以格式化代码。
下图是格式化JS代码的方法，同样用于格式化CSS代码。
格式化代码
在页面上进行颜色设置时，Elements面板下提供了颜色预览的选择器，随着鼠标的移动，鼠标指针会变成一个放大镜，方便精确选择颜色。
颜色选择器
在页面中有一系列的hover，focus等效果，默认状态下，这些定义的CSS样式是不会直接显示在Chrome控制台下的，但是点击对应的按钮就可以查看到，并且方便进行编辑。
不同状态下样式
当我们需要对一个文件中的多个相同的字符同时进行编辑时，可以使用cmd+D快捷键(windows下是Ctrl+D)，按一次就可以匹配一次字符，然后可以同时进行编辑。
多点编辑
今天这篇文章将的Chrome控制台使用技巧，大家都可以尝试下噢，相信绝对是可以提高大家工作效率的~
着jQuery插件在网站建设过程中的使用率不断的增加，所以有必要跟进时代步伐开发出一些新的插件/代码片段，以此来巩固并提高前端用户体验，将用户体验提升到一个新的高度。
接下来所推荐的这些插件中有滑块、地图、图片旋转块等等，可以说是最好的、完全免费的jQuery插件。
1. Flat jQuery Price Slider 实例|下载
这个jQuery价格滑块可以在一定范围内选择需要的价钱，不管你是做开发项目的还是设计项目，它都会起很大的作用。记住，这个插件完全免费。
2. Gmaps jQuery Map Plugin 实例|下载
GMaps.js是一个JavaScript插件，通过它可以很容易地在你的应用程序中使用谷歌地图，并包含了多个选项，如地图、方向、信息框等等。它的脚本是由很少的代码和简洁文档构成的。因为安装操作很简单，所以要想让代码实现功能就得自己动手。
3. FormChimp——MailChimp Ajax plugin for jQuery 实例|下载
FormChimp是jQuery里的一个可定义的MailChimp Ajax插件，为用户提供一个简便的注册方式，这样的话用户在你的MailChimp列表里注册就不是一件麻烦的事了。
4. OWL Carousel 实例|下载
此jQuery插件具有的触摸功能可以让用户创建出好看的响应式旋转滑块。
5. jQuery Spellchecker 实例|下载
这个轻量级的jQuery插件能检查文本文档里的单词拼写的正确性，主要是用在一个表单字段里或者是在DOM目录里。
6. Chart js 下载
Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型：折线图、条形图、雷达图、饼图、柱状图和极地区域区。而且，这是一个独立的包，不依赖第三方JavaScript 库，小于 5KB。颜色，字体，边框和它们的尺寸都可以定制，图表可以动画的形式加载，非常炫。
7. Email-autocomplete 实例|下载
这个插件会建议你或者是直接在邮件地址栏里自动填写完域名。
8. Draggabilly 实例|下载
你可以用这个插件做一些可拖动的jQuery代码片段。
9. Interact.js 实例|下载
这是一个为电脑和移动设备上的浏览器而制作的可拖放、重置大小、调整手势的插件。
10. Sortable 实例|下载
它是一个极简单的JavaScript类库，主要是为现代浏览器和触摸设备而制定的。
11. rowGrid.js 实例|下载
大小只有800bytes gzipped的轻量级jQuery插件用处是把图片或其它项目排版在连续的行内。
12. Scattered Polaroid gallery 实例|下载
这个插件可以在容器里随机排版这些相片，当你选中了一个项目的时候它就会移动到屏幕中间，其它项目自动闪到旁边。
13. Viewport Image Resize 实例|下载
操作上比较简单，没有任何麻烦，重新设置图像大小和对图片进行修剪，这些都是基于pseudo视图而做的。
14. jQueryUI Limitslider 实例|下载
这一滑块插件允许在一条选择线上做出多个滑块，这些滑块可以用来代表位置、尺寸、举例等等，同时还可以在滑块上做标签或者是悬浮标题。
15. Freewall 实例|下载
Freewall是一个跨浏览器、响应式的jQuery插件，可以创建出多种多样适用在电脑、移动设备和平板电脑上的网格布局。
16. jQuery fontIconPicker 实例|下载
这个只有1.58kb gzipped大小的插件，可以让用户创建一个带有搜索功能的简单的图标选择器放在管理列表里。
17. Bootstrap-dialog 实例|下载
这个插件会让用户使用Bootstrap的模型更加熟练。
18. jquery.tabelizer 实例|下载
Tabelizer 1.0.3——用在表格上的多层次分组指标器。
19. Facebook Badge Jquery Plugin 实例|下载
FaceBadge可以在用户网站上添加了一个Facebook页面标记，用起来更省事。
20. Croppic 项目网页
这是一个用来裁剪图片的jQuery插件，效果超出你想象。
21. JQuery Plugin for Google Drive API 实例|下载
这个插件主要是为了让在不同设备上的Google Drive能够同步协作，传输文件等等，包括是Android设备。
22. Pick-a-Color 实例|下载
这项插件的设计之初就是希望所有人都能使用它，它的界面主要是基于Twitter Bootstrap的风格而设计，所以看起来比较亲切。
23. Simple Vertical Menu 下载代码
看上去很简单，但是很时髦的一个插件，使用了一些CSS3和jQuery技术，拥有自定义字体和令人影响深刻的标记图案。
24. jQuery Message Form 下载代码
这只是一个很小的字符计数器的实验版本。
25. Magnifying Glass Plugin with jQuery and CSS3 项目主页
这是一个放大镜插件，会放大显示鼠标所经过的区域。
*请认真填写需求信息，我们会在24小时内与您取得联系。
