介紹一款web端的截圖工具
牛牛截圖，web端的一款截圖工具，下面是代碼及實例。javascript
依賴jquery-1.7.min.jshtml
/*******************************************************************************
牛牛截圖的JS部分的核心流程封裝在此文件中，絕大部分狀況下，您不須要修改此文件中的JS內容，它已經包含了在全部瀏覽器上應用
牛牛截圖所須要的全部代碼，您只須要去修改capturewrapper.js，將相應的函數修改爲與您的UI匹配的便可
*******************************************************************************/
/*******************************************************************************/
//設置截圖的參數
var emPensize = 1; //設置畫筆大小
var emDrawType = 2; //設置是騰訊風格仍是360風格 0： 騰訊風格 1： 360風格
var emTrackColor = 3; //自動識別的邊框的顏色
var emEditBorderColor = 4; //文本輸入的邊框顏色
var emTransparent = 5; //工具欄的透明度
var emWindowAware = 6; //設置是否禁用隨着DPI放大
var emSetSaveName = 8; //設置保存時的開始文字 免費版本無效
var emSetMagnifierBkColor = 9; //設置放大鏡的背景色，不設置則透明
var emSetMagnifierLogoText = 10; //設置放大鏡上的LOGO字符，可提示快捷鍵，如： 牛牛截圖(CTRL + SHIFT + A) 免費版本無效
var emSetWatermarkPictureType = 20; //設置水印的類型
var emSetWatermarkPicturePath = 21; //設置水印的路徑
var emSetWatermarkTextType = 22; //設置水印文字的類型
var emSetWatermarkTextValue = 23; //設置水印文字的字符串
var emSetMosaicType = 24; //指定馬賽克的類型，1爲矩形，2爲畫線
var emSetTooltipText = 25; //用於設置工具欄圖標的TOOLTIP文字
var emSetMoreInfo = 26; //設置額外的信息，用於特殊需求
/*******************************************************************************/
var emClosed = 1;
var emConnected = 2;
var emConnecting = 3;
var emCaptureSuccess = 0;
var emCaptureFailed = 1;
var emCaptureUnknown = 2;
var emCmdReady = -1;
var emCmdCapture = 0;
var emCmdSaveFile = 1;
function isMacintosh() {
return navigator.platform.indexOf('Mac') > -1;
}
function rgb2value(r, g, b)
{
return r | g << 8 | b << 16;
}
var captureObjSelf = null;
function onpluginLoaded()
{
captureObjSelf.pluginLoaded();
}
function NiuniuCaptureObject()
{
var self = this;
captureObjSelf = this;
this.PenSize = 2;
this.DrawType = 0;
this.TrackColor = rgb2value(255, 0, 0);
this.EditBorderColor = rgb2value(255, 0, 0);
this.Transparent = 240;
this.WindowAware = 1;
this.MosaicType = 1;
this.SaveName = "保存";
this.MagnifierLogoText = "截圖";
this.WatermarkPictureType = "2|100|100|400|400|20";
this.WatermarkPicturePath = "";
this.WatermarkTextType = "2|100|100|100|40|20|0|150|30|80,55,55,55";
this.WatermarkTextValue = "";
this.NiuniuAuthKey = "";
this.ToolTipText = ""; //tipRectangle|tipCircle|tipArrow|tipBrush|tipGlitter|tipMosaic|tipText|tipUndo|tipSave|tipCancel|tipFinish|txtFinish
this.MoreInfo = "1,100|300|600";
this.useCustomizedProtoco = true; //是否使用瀏覽器自定義協議加websocket
this.IsWaitCustomizedCallBack = false;
this.autoConnectAfterPageLoad = true;
this.IsFirstConnect = true;
this.IsEverConnected = false;
this.reconnectTryTime = 0;
this.TimeIntervalID = -1;
this.ReceivedEchoBack = false;
this.Version = "1.0.0.0";
this.hostPort = "30101,30102";
this.hostPortIndex = 0;
this.CaptureName = "NiuniuCapture";
this.NiuniuSocket = null;
this.connectState = emClosed;
this.SocketTimeStamp = new Date().getTime();
this.TimeOutID = -1;
this.FinishedCallback = null;
this.PluginLoadedCallback = null;
this.VersionCallback = null;
this.OnConnectFailed = function(isReconnect)
{
self.WriteLog(isReconnect ? "reconnect failed, the capture control process is exit." : "connect failed at the first time.");
}
this.LoadPlugin = function()
{
var obj = $('#capturecontainer');
if(obj.length < 1)
{
$("body").append('<div id="capturecontainer" style="height:0px;width:0px;"></div>');
obj = $('#capturecontainer');
}
obj.html('');
obj.html('<object id="niuniuCapture" type="application/x-niuniuwebcapture" width="0" height="0"><param name="onload" value="onpluginLoaded" /></object>');
var iframeObj = $('startCaptureFrame');
if(iframeObj.length < 1)
{
$("body").append('<iframe id="startCaptureFrame" style="display:none;"></iframe>');
}
}
this.niuniuCapture = function ()
{
return document.getElementById('niuniuCapture');
}
this.addEvent = function(obj, name, func)
{
if (obj.attachEvent) {
obj.attachEvent("on"+name, func);
} else {
obj.addEventListener(name, func, false);
}
}
this.pluginValid = function()
{
try
{
if(self.niuniuCapture().valid)
{
return true;
}
}
catch(e)
{
}
return false;
}
this.OnCaptureFinished = function(x, y, width, height, content,localpath)
{
self.OnCaptureFinishedEx(1, x, y, width, height, "", content,localpath);
}
this.OnCaptureFinishedEx = function(type, x, y, width, height, info, content,localpath)
{
//交給上層去處理截圖完成後的事項
if(self.FinishedCallback != null)
{
self.FinishedCallback(type, x, y, width, height, info, content,localpath);
}
else
{
alert("截圖完成的事件未綁定，將不能對圖片進行處理，請指定FinishedCallback回調函數");
}
}
this.pluginLoaded = function()
{
self.GetVersion();
if(!self.pluginValid())
{
if(self.PluginLoadedCallback != null)
{
self.PluginLoadedCallback(false);
}
return false;
}
//此函數必需調用，傳遞正確的參數，且必需先於其餘函數調用
self.niuniuCapture().InitCapture(self.NiuniuAuthKey);
self.niuniuCapture().InitParam(emPensize, self.PenSize);
self.niuniuCapture().InitParam(emDrawType, self.DrawType);
self.niuniuCapture().InitParam(emTrackColor, self.TrackColor);
self.niuniuCapture().InitParam(emEditBorderColor, self.EditBorderColor);
self.niuniuCapture().InitParam(emTransparent, self.Transparent);
self.niuniuCapture().InitParam(emSetSaveName, self.SaveName);
self.niuniuCapture().InitParam(emSetMagnifierLogoText, self.MagnifierLogoText);
self.niuniuCapture().InitParam(emSetMosaicType, self.MosaicType);
//設置工具欄上的按鈕TOOLTIP
self.niuniuCapture().InitParam(emSetTooltipText, self.ToolTipText);
self.niuniuCapture().InitParam(emSetMoreInfo, self.MoreInfo);
//niuniuCapture().InitParam(23, "測試文字.");
//此BASE64字符串表示牛牛默認的水印圖片，能夠替換
// niuniuCapture().InitParam(21, "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");
//注：以上設置LOGO及保存名的接口，免費版本無效
//添加控件的事件監聽
self.addEvent(self.niuniuCapture(), 'CaptureFinishedEx', self.OnCaptureFinishedEx);
//如下這個事件主要是用於兼容舊的瀏覽器控件的事件通知
self.addEvent(self.niuniuCapture(), 'CaptureFinished', self.OnCaptureFinished);
if(self.PluginLoadedCallback != null)
{
self.PluginLoadedCallback(true);
}
}
this.SetWatermarkPicture = function(watermarPicData)
{
self.WatermarkPicturePath = watermarPicData;
//設置測試的水印圖片的Base64字符串，此操做應該是在頁面加載中處理比較合適
if(!self.pluginValid())
return;
self.niuniuCapture().InitParam(emSetWatermarkPicturePath, self.WatermarkPicturePath);
self.niuniuCapture().InitParam(emSetWatermarkPictureType, self.WatermarkPictureType);
}
this.SetWatermarkText = function(watermarkText)
{
self.WatermarkTextValue = watermarkText;
//設置測試的水印文字，此操做應該是在頁面加載中處理比較合適
if(!self.pluginValid())
return;
//nShowType|nMinWidth|nMinHeight|nVerticalInterval|nOffset|nFontSize|nIsBold|nTextWidth|nTextHeight|colorText
self.niuniuCapture().InitParam(emSetWatermarkTextValue, self.WatermarkTextValue);
self.niuniuCapture().InitParam(emSetWatermarkTextType, self.WatermarkTextType);
}
this.SavePicture = function(savename)
{
if(self.pluginValid())
{
self.niuniuCapture().SavePicture(savename);
}
}
this.GetCursorPosition = function()
{
if(self.pluginValid())
{
var val = self.niuniuCapture().GetCursorPosition();
return val;
}
return "";
}
this.NewCaptureParamObject = function(defaultpath, hideCurrWindow, autoCaptureFlag, x, y, width, height)
{
var obj = new Object();
obj.CmdType = 1;
obj.IsGBK = 0; //是不是GBK編碼，這樣會涉及到編碼轉換
obj.AuthKey = self.NiuniuAuthKey; //
obj.Pensize = self.PenSize; //設置畫筆大小
obj.DrawType = self.DrawType; //設置是騰訊風格仍是360風格
obj.TrackColor= self.TrackColor; //自動識別的邊框的顏色
obj.EditBorderColor= self.EditBorderColor; //文本輸入的邊框顏色
obj.Transparent = self.Transparent; //工具欄的透明度
obj.SetSaveName = self.SaveName; //設置保存時的開始文字
obj.SetMagnifierLogoText = self.MagnifierLogoText; //設置放大鏡上的LOGO字符
obj.SetWatermarkPictureTypeEx = self.WatermarkPictureType; //設置水印的類型
obj.SetWatermarkPicturePath = self.WatermarkPicturePath; //設置水印的路徑
obj.SetWatermarkTextTypeEx=self.WatermarkTextType; //設置水印文字的類型
obj.SetWatermarkTextValue= self.WatermarkTextValue; //設置水印文字
obj.MosaicType = self.MosaicType; //設置馬賽克的類型
obj.SetToolbarText = self.ToolTipText;
obj.MoreInfo = this.MoreInfo;
//如下是截圖時傳遞的參數
obj.DefaultPath = defaultpath;
obj.HideCurrentWindow = hideCurrWindow;
obj.AutoCaptureFlag = autoCaptureFlag;
obj.x = x;
obj.y = y;
obj.Width = width;
obj.Height = height;
return obj;
}
this.DoCapture = function(name, hide, AutoCapture, x, y, width, height)
{
if(self.IsNeedCustomizedProtocol())
{
return self.DoCaptureForCustomize(name, hide, AutoCapture, parseInt(x), parseInt(y), parseInt(width), parseInt(height));
}
if(!self.pluginValid())
{
return emCaptureFailed;
}
self.niuniuCapture().Capture(name, hide, AutoCapture, x, y, width, height);
return emCaptureSuccess;
}
this.InitNiuniuCapture = function()
{
self.LoadPlugin();
setTimeout("captureObjSelf.InitWebSocketAndBindCallback();", 200);
}
this.InitWebSocketAndBindCallback = function()
{
if(!self.autoConnectAfterPageLoad || !self.IsNeedCustomizedProtocol())
{
return;
}
self.connectHost();
}
this.getNextPort = function()
{
//init port params flag
//進行拆分處理 self.hostPort;
var portArray = self.hostPort.split(",");
if(portArray.length < 1)
{
alert("服務端口爲空");
return 30101;
}
if(self.hostPortIndex < 0)
{
self.hostPortIndex = 0;
}
if(self.hostPortIndex > portArray.length - 1)
{
self.hostPortIndex = portArray.length - 1;
}
var nPort = parseInt(portArray[self.hostPortIndex]);
self.hostPortIndex++;
if(self.hostPortIndex > portArray.length - 1)
{
self.hostPortIndex = 0;
}
return nPort;
}
this.connectHost = function()
{
if(self.NiuniuSocket != null)
{
self.WriteLog("connectHost NiuniuSocket is not null, return.");
return;
}
clearTimeout(self.TimeOutID);
self.connectState = emConnecting;
try{
var wshosts = ['127.0.0.1', 'localhost'];
for (var i in wshosts) {
try{
var host = "ws://127.0.0.1:" + self.getNextPort() + "/" + self.CaptureName;
self.NiuniuSocket = new WebSocket(host);
break;
}
catch(ee){
var ggg= 0;
}
}
//OutputLog('Socket Status: '+socket.readyState);
self.NiuniuSocket.onopen = function(evt){
self.NiuniuSocket.send('0' + self.SocketTimeStamp);
self.WriteLog("NiuniuSocket.onopen.");
clearTimeout(self.TimeOutID);
}
self.NiuniuSocket.onmessage = function(msg){
var str = "";
str = msg.data;
var id = str.substr(0, 1);
var arg1 = str.substr(1);
clearTimeout(self.TimeOutID);
if(id == "0"){
self.hostPortIndex--;
//表示鏈接成功，此時應該提示能夠截圖了
self.connectState = emConnected;
self.pluginLoaded();
self.IsEverConnected = true;
self.IsFirstConnect = false;
if(self.IsWaitCustomizedCallBack)
{
setTimeout("captureObjSelf.SendReadyRecvData();", 3);
}
self.WriteLog("connect sucess.");
self.ReceivedEchoBack = true;
clearInterval(self.TimeIntervalID);
self.TimeIntervalID = setInterval("captureObjSelf.LoopEchoMessage()", 3000);
}
if(id == "1"){
//解析消息
var _aoResult = eval("(" + arg1 + ")");
self.ReceivedEchoBack = true;
if(_aoResult.command == "echo")
{
self.WriteLog("received echo");
return;
}
self.WriteLog("received capturedata.");
if(_aoResult.command == "version")
{
self.WriteLog(_aoResult.Ver);
self.VersionCallback(_aoResult.Ver);
}
else{
self.OnCaptureFinishedEx(_aoResult.Type, _aoResult.x, _aoResult.y, _aoResult.Width, _aoResult.Height, _aoResult.Info, _aoResult.Content, _aoResult.LocalPath);
}
}
}
self.NiuniuSocket.onclose = function(evt){
self.OnWebSocketError("self.NiuniuSocket.onclose." + evt.data);
}
self.NiuniuSocket.onerror = function (evt) {
//self.OnWebSocketError("self.NiuniuSocket.onerror." + evt.data);
};
} catch(e){
self.OnWebSocketError("connect exception." + e.message);
}
}
this.WriteLog = function(txt)
{
//寫日誌
try{
console.log(txt);
}
catch(e)
{
}
}
this.OnWebSocketError = function(type)
{
//若是不處於鏈接成功狀態，說明不是斷開鏈接，而是鏈接失敗
var isConnectedFailed = false;
if(self.connectState != emConnected)
{
isConnectedFailed = true;
}
self.WriteLog(type);
self.ReceivedEchoBack = false;
self.connectState = emClosed;
if(self.NiuniuSocket != null)
{
self.NiuniuSocket.close();
}
self.NiuniuSocket = null;
clearTimeout(self.TimeOutID);
clearInterval(self.TimeIntervalID);
if(isConnectedFailed)
{
if(self.IsFirstConnect)
{
self.IsFirstConnect = false;
if(self.OnConnectFailed != null)
{
self.OnConnectFailed(false);
}
return;
}
if(self.IsEverConnected)
{
self.reconnectTryTime++;
//通知鏈接鏈接斷開
if(self.reconnectTryTime > 3)
{
self.IsEverConnected = false;
self.reconnectTryTime = 0;
if(self.OnConnectFailed != null)
{
self.OnConnectFailed(true);
}
return;
}
}
}
self.TimeOutID = setTimeout("captureObjSelf.connectHost();", 800);
}
this.LoopEchoMessage = function()
{
if(!self.ReceivedEchoBack)
{
self.OnWebSocketError("this.LoopEchoMessage, !self.ReceivedEchoBack");
self.ReceivedEchoBack = false;
clearInterval(self.TimeIntervalID);
self.TimeIntervalID = setInterval("captureObjSelf.LoopEchoMessage()", 3000);
return;
}
self.ReceivedEchoBack = false;
clearTimeout(self.TimeOutID);
if(self.connectState != emConnected)
{
clearInterval(self.TimeIntervalID);
return;
}
var obj = new Object();
obj.command = "echo";
self.NiuniuSocket.send("1" + encodeURIComponent( $.toJSON(obj)) );
}
this.SendReadyRecvData = function()
{
self.WriteLog("SendReadyRecvData.");
var obj = self.NewCaptureParamObject("", 0, 0, 0, 0, 0, 0);
obj.CmdType = -1;
self.NiuniuSocket.send("1" + encodeURIComponent( $.toJSON(obj)) );
}
this.DoCaptureForCustomize = function(name, hide, AutoCapture, x, y, width, height)
{
var obj = self.NewCaptureParamObject(name, hide, AutoCapture, x, y, width, height);
try
{
//啓動客戶端，或者經過websocket去發送數據
if(self.connectState == emConnected)
{
var json = $.toJSON(obj);
self.NiuniuSocket.send('1' + encodeURIComponent(json) );
}
else
{
//首次啓動時，不支持水印，不然會過長
obj.SetWatermarkPicturePath = "";
//obj.SetWatermarkTextValue = "";
var json = $.toJSON(obj);
self.WriteLog(json.length);
var newUrl = self.CaptureName + "://" + encodeURIComponent(json);
self.WriteLog(newUrl.length);
//啓動客戶端
$('#startCaptureFrame').attr('src', newUrl);
self.IsWaitCustomizedCallBack = true;
self.connectHost();
return emCaptureUnknown;
}
return emCaptureSuccess;
}
catch(e)
{
alert(e.message);
}
return emCaptureUnknown;
}
this.IsNeedCustomizedProtocol = function()
{
if(isMacintosh())
{
return true;
}
if(!self.useCustomizedProtoco)
{
return false;
}
if(self.pluginValid())
{
return false;
}
try
{
var agent = window.navigator.userAgent.toLowerCase();
var isQQBrowser = agent.indexOf("qqbrowser") != -1;
//if(isQQBrowser)
//{
// return false;
//}
var isUBrowser = agent.indexOf("ubrowser") != -1;
if(isUBrowser)
{
return false;
}
var isChrome = agent.indexOf("chrome") != -1;
if(isChrome)
{
if(chrome&&chrome.runtime)
{
return true;
}
}
//若是是firefox 且在50版本以上，則須要
var brow=$.browser;
if(brow.mozilla)
{
return true;
}
var isEdge = agent.indexOf("edge") != -1;
if(isEdge)
{
return true;
}
return false;
}
catch(e)
{
}
return false;
}
this.GetVersion = function()
{
if(self.IsNeedCustomizedProtocol())
{
if(self.connectState != emConnected)
{
return;
}
var obj = new Object();
obj.command = "version";
self.NiuniuSocket.send("1" + encodeURIComponent( $.toJSON(obj)) );
return;
}
if(!self.pluginValid())
{
return;
}
var verSion = self.niuniuCapture().GetVersion();
self.VersionCallback(verSion);
self.WriteLog(verSion);
}
}
capturewrapper.jsjava
var savedPictureContent = '';
var extendName = '';
var captureObj = null;
var downloadUrl = 'http://www.ggniu.cn/download/CaptureInstall.exe';
/*
用於初始化牛牛截圖控件，此函數須要在頁面加載完成後當即調用
在此函數中，您能夠設置相關的截圖的UI控制，如，畫筆大小、邊框顏色等等 【這部分信息在niuniucapture.js中也有默認值，直接修改默認值也可 】
*/
function Init()
{
if(isMacintosh())
{
downloadUrl = 'http://www.ggniu.cn/download/CaptureInstall.dmg';
}
captureObj = new NiuniuCaptureObject();
captureObj.NiuniuAuthKey = "niuniu";
//此處能夠設置相關參數
captureObj.TrackColor = rgb2value(255, 0, 0);
captureObj.EditBorderColor = rgb2value(0, 0, 255);
//設置工具欄的TOOLTIP
//captureObj.ToolTipText = "tipRectangle|tipCircle|tipArrow|tipBrush|tipGlitter|tipMosaic|tipText|tipUndo|tipSave|tipCancel|tipFinish|Finish";
//設置控件加載完成以及截圖完成的回調函數
captureObj.FinishedCallback = OnCaptureFinishedCallback;
captureObj.PluginLoadedCallback = PluginLoadedCallback;
captureObj.VersionCallback = VersionCallback;
//初始化控件
captureObj.InitNiuniuCapture();
}
//用於返回控件的版本號
function VersionCallback(ver)
{
//captureObj.Version;
//能夠在此根據最新的版本號與控件返回的版本號對比，決定是否要提示升級
//alert(ver);
}
/*
當控件成功加載後回調的的函數，您能夠在此控制相應的UI顯示
*/
function PluginLoadedCallback(success)
{
if(success)
{
$('#info').html('');
$('#imgshow').hide();
$('#imgshow').attr('src', "./image/loading.gif?v=1");
$('#btnReload').hide();
$('#btnCapture').show();
}
}
//根據是不是Chrome新版原本控制下載不一樣的控件安裝包
function ShowDownLoad()
{
$('#info').html('若是超過5秒無響應，請點此<a target="_blank" href="' + downloadUrl + '" + date.getMinutes() + date.getSeconds()">安裝</a>');
}
/*
當提示安裝控件後，須要從新加載控件來使用截圖；
也有部分是須要刷新瀏覽器的
*/
function ReloadPlugin()
{
captureObj.LoadPlugin();
$('#btnReload').hide();
$('#btnCapture').show();
if(captureObj.pluginValid())
{
$('#downloadNotice').hide();
$('#info').html("截圖控件已經安裝完畢，您能夠進行截圖了。");
}
else
{
var browserInfo = "查看控件是否被瀏覽器阻止，或經過瀏覽器設置中的加載項查看NiuniuCapture是否加載並正常運行";
$('#info').html('截圖控件未能識別到，請按以下步驟檢查:<br/>1. 肯定您已經下載控件安裝包並正常安裝 <br/>2. ' + browserInfo
+ '<br/>3. 刷新頁面或從新啓動瀏覽器試下<br/>4. 若是仍舊不能截圖，出大招吧：'
+ '<a target="_blank" style="color:#ff0000;" class="btn" href="http://shang.qq.com/wpa/qunwpa?idkey=a9dab7a14df03d19a2833e6b5f17a33639027d06213cf61bdb7554b04492b6e5">一鍵加羣求助</a>');
}
}
/*
截圖入口函數，用於控制UI標籤的顯示
*/
function StartCapture()
{
$('#imgshow').hide();
$('#imgshow').attr('src', "./image/loading.gif?v=1");
var captureRet = Capture();
//從返回值來解析顯示
if(captureRet == emCaptureFailed)
{
ShowDownLoad();
}
else if(captureRet == emCaptureUnknown){
$('#info').html('正在截圖中, 若是超過5秒無響應，請點此<a target="_blank" href="' + downloadUrl + '" + date.getMinutes() + date.getSeconds()">安裝</a>');
}
}
/*
此函數是根據在測試頁面上的不一樣選項來進行截圖，在實際應用中，您只須要根據您實際須要的截圖模式，傳入相應的參數便可
*/
function Capture()
{
var defaultName = "1.jpg"; //此處爲了防止上傳的數據過大，建議使用JPG格式
var hideFlag = $("#hideCurrent").attr("checked")=="checked" ? 1 : 0;
var autoFlag = $("#captureselectSize").attr("checked")=="checked" ? 1 : 0;
var captureRet = true;
if(autoFlag == 0)
{
return captureObj.DoCapture("1.jpg", hideFlag, 0, 0, 0, 0, 0);
}
else
{
autoFlag = $('#getimagefromclipboard').is(':checked') ? 4 : 1;
if(autoFlag == 4)
{
return captureObj.DoCapture("", 0, 4, 0, 0, 0, 0);
}
autoFlag = $('#showprewindow').is(':checked') ? 3 : 1;
if(autoFlag == 3)
{
//此時若是x, y, width, height全爲0，則表示預截圖窗口點擊「開始截圖」時，手工先把區域
//x, y, width, height全爲1，則表示預截圖窗口點擊「開始截圖」時，自動截取整個桌面
//其餘狀況，則自動截取 x, y, width, height 指定的區域
return captureObj.DoCapture("1.jpg", hideFlag, 3, 0, 0, 0, 0);
}
autoFlag = $('#fullscreen').is(':checked') ? 2 : 1;
if(autoFlag == 2)
{
return captureObj.DoCapture("1.jpg", hideFlag, 2, 0, 0, 0, 0);
}
else
{
return captureObj.DoCapture("1.jpg", hideFlag, 1, $('#xpos').val(), $('#ypos').val(), $('#width').val(), $('#height').val());
}
}
}
/*
此處是截圖後的回調函數，用於將截圖的詳細信息反饋回來，你須要調整此函數，完成圖像數據的傳輸與顯示
*/
function OnCaptureFinishedCallback(type, x, y, width, height, info, content,localpath)
{
if(type < 0)
{
//須要從新安裝控件
ShowDownLoad();
return;
}
$('#show').hide();
switch(type)
{
case 1:
{
$('#info').html('截圖完成： x:' + x + ',y:' + y + ',widht:' + width + ',height:' + height);
UploadCaptureData(content, localpath);
break;
}
case 2:
{
$('#info').html('您取消了截圖');
break;
}
case 3:
{
$('#info').html('您保存了截圖到本地： x:' + x + ',y:' + y + ',widht:' + width + ',height:' + height);
UploadCaptureData(content, localpath);
break;
}
case 4:
{
if(info =='0')
{
$('#info').html('從剪貼板獲取到了截圖： ' + localpath);
UploadCaptureData(content, localpath);
}
else
{
$('#info').html('從剪貼板獲取圖片失敗。');
}
break;
}
}
}
//控制上傳
function UploadCaptureData(content, localpath)
{
savedPictureContent = content;
//獲取圖片的擴展名
var pos = localpath.lastIndexOf('.');
extendName = localpath.substr(pos + 1);
$('#show').html('截圖已經完成，請點擊');
$('#show').show();
var autoUpload = $("#autoupload").attr("checked")=="checked" ? 1 : 0;
if(autoUpload)
{
UploadData();
}
else
{
$('#btnUpload').show();
}
}
/*
實際上傳圖像數據的函數，此處主要是將BASE64的圖像數據，經過AJAX的方式POST到服務器保存成文件，而且顯示在頁面上
*/
function UploadData()
{
$('#show').html('截圖完成，正在上傳，請稍後...');
$('#btnUpload').hide();
//上傳的數據除了圖片外，還能夠包含本身須要傳遞的參數
var data = "userid=test111&extendname=" + extendName + "&picdata=" + encodeURIComponent(savedPictureContent);
$.ajax({
type: "POST",
url: "./upload.ashx",
dataType: "json",
data: data,
success: function (obj) {
if(obj.code==0)
{
$('#show').html('上傳成功，圖片地址：' + obj.info);
$('#imgshow').show();
$('#imgshow').attr('src', obj.info);
}
else
{
$('#show').html('上傳失敗 :' + obj.info);
}
},
error : function(){$('#show').html('因爲網絡緣由，上傳失敗。'); }
});
}
function TestSetWatermarkPicture()
{
captureObj.SetWatermarkPicture("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");
}
jquery.josn.jsjquery
(function($){var escapeable=/["\\\x00-\x1f\x7f-\x9f]/g,meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'};$.toJSON=typeof JSON==='object'&&JSON.stringify?JSON.stringify:function(o){if(o===null){return'null';}
var type=typeof o;if(type==='undefined'){return undefined;}
if(type==='number'||type==='boolean'){return''+o;}
if(type==='string'){return $.quoteString(o);}
if(type==='object'){if(typeof o.toJSON==='function'){return $.toJSON(o.toJSON());}
if(o.constructor===Date){var month=o.getUTCMonth()+1,day=o.getUTCDate(),year=o.getUTCFullYear(),hours=o.getUTCHours(),minutes=o.getUTCMinutes(),seconds=o.getUTCSeconds(),milli=o.getUTCMilliseconds();if(month<10){month='0'+month;}
if(day<10){day='0'+day;}
if(hours<10){hours='0'+hours;}
if(minutes<10){minutes='0'+minutes;}
if(seconds<10){seconds='0'+seconds;}
if(milli<100){milli='0'+milli;}
if(milli<10){milli='0'+milli;}
return'"'+year+'-'+month+'-'+day+'T'+
hours+':'+minutes+':'+seconds+'.'+milli+'Z"';}
if(o.constructor===Array){var ret=[];for(var i=0;i<o.length;i++){ret.push($.toJSON(o[i])||'null');}
return'['+ret.join(',')+']';}
var name,val,pairs=[];for(var k in o){type=typeof k;if(type==='number'){name='"'+k+'"';}else if(type==='string'){name=$.quoteString(k);}else{continue;}
type=typeof o[k];if(type==='function'||type==='undefined'){continue;}
val=$.toJSON(o[k]);pairs.push(name+':'+val);}
return'{'+pairs.join(',')+'}';}};$.evalJSON=typeof JSON==='object'&&JSON.parse?JSON.parse:function(src){return eval('('+src+')');};$.secureEvalJSON=typeof JSON==='object'&&JSON.parse?JSON.parse:function(src){var filtered=src.replace(/\\["\\\/bfnrtu]/g,'@').replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,']').replace(/(?:^|:|,)(?:\s*\[)+/g,'');if(/^[\],:{}\s]*$/.test(filtered)){return eval('('+src+')');}else{throw new SyntaxError('Error parsing JSON, source is not valid.');}};$.quoteString=function(string){if(string.match(escapeable)){return'"'+string.replace(escapeable,function(a){var c=meta[a];if(typeof c==='string'){return c;}
c=a.charCodeAt();return'\\u00'+Math.floor(c/16).toString(16)+(c%16).toString(16);})+'"';}
return'"'+string+'"';};})(jQuery);
在頁面執行下就ok了，web
<script> Init() </script>
相關文章
- 1. GIF截圖工具介紹與下載
- 2. Web的截圖工具
- 3. 一款實用的前端截圖工具
- 4. 介紹一款好用又易學的爬蟲工具：web scraper
- 5. 介紹一款進程管理工具
- 6. 10款Web前端工具
- 7. 介紹幾款有用的工具
- 8. Portainer安裝介紹，一款Docker圖形化管理工具
- 9. 介紹一款可懸浮的截圖軟件
- 10. 分享一款window自帶的，很好用的截圖工具
- 更多相關文章...
- • jQuery Mobile 工具欄 - jQuery Mobile 教程
- • MySQL客戶端和服務器端工具集 - MySQL教程
- • PHP開發工具
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. GIF截圖工具介紹與下載
- 2. Web的截圖工具
- 3. 一款實用的前端截圖工具
- 4. 介紹一款好用又易學的爬蟲工具：web scraper
- 5. 介紹一款進程管理工具
- 6. 10款Web前端工具
- 7. 介紹幾款有用的工具
- 8. Portainer安裝介紹，一款Docker圖形化管理工具
- 9. 介紹一款可懸浮的截圖軟件
- 10. 分享一款window自帶的，很好用的截圖工具