1. 程式人生 > >利用Jcrop完成截圖儲存功能

利用Jcrop完成截圖儲存功能

首先到官網(deepliquid.com/content/Jcrop.html)下載Jcrop外掛接下來就是吧你所下載的包解壓並放在你的專案裡.然後就是各種的配置了,根據你的專案需求,比選擇框預設大小之類的.另外在jQuery_jcrop.js問價的最下端有一段初始化的程式碼,根據需求更改初始化

$.Jcrop.defaults = {
    // Basic Settings
    allowSelect: false,           //是否可以選擇true/false
    allowMove: true,
    allowResize: false,      //是否可以改變選擇框大小,true/false
    trackDocument: true
    // Styling Options
    baseClass: 'jcrop',
    addClass: null,
    bgColor: 'black',
    bgOpacity: 0.6,
    bgFade: false,
    borderOpacity: 0.4,
    handleOpacity: 0.5,
    handleSize: null,
    setSelect: [0,0,200,200],       //選擇框的初始大小[x1,y1,x2,y2]
    aspectRatio: 0,
    keySupport: true,
    createHandles: ['n','s','e','w','nw','ne','se','sw'],
    createDragbars: ['n','s','e','w'],
    createBorders: ['n','s','e','w'],
    drawBorders: true,
    dragEdges: true,
    fixedSupport: true,
    touchSupport: null,
    shade: null,
    boxWidth: 0,
    boxHeight: 0,
    boundary: 2,
    fadeTime: 400,
    animationDelay: 20,
    swingSpeed: 3,
    minSelect: [0, 0],
    maxSize: [0, 0],
    minSize: [0, 0],
    // Callbacks / Event Handlers
    onChange: function () {},
    onSelect: function () {},
    onDblClick: function () {},
    onRelease: function () {}
  };

另外這些引數也會用到很多

var api = {
      setImage: setImage,
      animateTo: animateTo,
      setSelect: [40,40,240,240],
      setOptions: setOptionsNew,
      tellSelect: tellSelect,
      tellScaled: tellScaled,
      setClass: setClass,


      disable: disableCrop,
      enable: enableCrop,
      cancel: cancelCrop,
      release: Selection.release,
      destroy: destroy,


      focus: KeyManager.watchKeys,


      getBounds: function () {
        return [boundx * xscale, boundy * yscale];
      },
      getWidgetSize: function () {
        return [boundx, boundy];
      },
      getScaleFactor: function () {
        return [xscale, yscale];
      },
      getOptions: function() {
        // careful: internal values are returned
        return options;
      },


      ui: {
        holder: $div,
        selection: $sel
      }
    };

主要就是這些,另外在官網有它的英文API,

(http://www.jb51.net/article/39806.htm)坑啊,之前沒找到這個,基本都是自己試出來的,廢了好大勁,現在存下來,以後或許用得到.

還有擷取的圖片地址是寫死的,我是先把圖片傳到伺服器然後把地址傳回來再顯示\擷取,好像對伺服器壓力有影響,望大神賜教

相關推薦

利用Jcrop完成儲存功能

首先到官網(deepliquid.com/content/Jcrop.html)下載Jcrop外掛接下來就是吧你所下載的包解壓並放在你的專案裡.然後就是各種的配置了,根據你的專案需求,比選擇框預設大小之類的.另外在jQuery_jcrop.js問價的最下端有一段初始化的程式

Unity學習——簡單的順序迴圈播放和儲存功能實現

一:功能簡單介紹 1,在功能實現中,會遇到想順序迴圈使用一個數組的東西,如果到了陣列最後一個後卻不知道怎麼寫程式碼讓其再次從第一個開始 2,各種軟體都會有截圖功能,本篇簡單記錄寫我自己曾遇到的難點,不喜勿噴! 二:簡單的順序迴圈陣列內元素 這裡以順序迴

前臺JS 實現儲存功能

電氣視訊專案-視訊截圖 以下是重點程式碼: //變數宣告 var video = document.getElementById('video_1'); var canvas = documen

react-native 生成二維碼並儲存功能實現

近期專案開發需要,需要更加不同使用者生成隨機的二維碼,並實現儲存該二維碼(包含二維碼周邊的背景圖,類似支付寶的紅包二維碼圖片)的功能。在網上查詢相關元件,開始使用的是react-native-qrcode元件,截圖功能使用的是react-native-view-shot元件,儲存圖片則是使用的rea

利用win api 實現 儲存為BMP並轉為位元組流

c++ 利用winAPI 實現截圖幕; 程式碼: #include<windows.h> void ScreenSnap(HBITMAP hBitmap,char *bmpPath,HDC dc); int main() { HWND DeskWnd=::

Web開發之用canvas2image.js將canvas儲存為圖片(實現頁面下載功能

var canvas, ctx, bMouseIsDown = false, iLastX, iLastY, $save, $imgs, $convert, $imgW, $imgH, $sel; function init () {

利用eclipse或者pycharm編寫monkeyrunner指令碼,cmd開啟應用“轉轉”並儲存到D盤

1、eclipse或者pycharm編寫monkeyrunner指令碼:from com.android.monkeyrunner import MonkeyRunner,MonkeyDevice,MonkeyImage device=MonkeyRunner.waitFor

Jcrop Java實現功能

上傳頭像,並且可以截圖,需要jcrop 架包,可以到網址去瀏覽效果下載架包:http://deepliquid.com/projects/Jcrop/demos.php <pre name="code" class="html">//匯入樣式和js <

js 利用html2canvas實現功能

需要匯入的檔案:jquery.min.js,html2canvas.js,canvas2image.js,jquery.qrcode.min.js(如需二維碼) var shareContent = document.getElementById("imgmodel");

C#中實現QQ功能及相關問題

runt blog 圖片 finished 觀察 button oid sha basemap 對於QQ截圖,肯定是早就有認識了,只是一直沒有去認真觀察這個操作的具體實現步驟。所以這裏將自己的記憶中的步驟簡單的寫一下: 習慣性用QQ或者TIM的人,一般是使用Ctrl+Alt

Unity儲存到安卓手機相簿

1、首先本人同樣用了和大家一樣的方法在百度查了很久的資料,之後又看API,官方幫助文件,之後終於解決了這個問題。在網上查到的都是程式碼幾乎都是一個模子刻出來的,現在貼上我自己查了資料後改的程式碼。 2、直接上原始碼,簡單粗暴 using UnityEngine; using Syst

Unity儲存到本地,安卓手機

1、簡單粗暴 ,直接上程式碼。 using UnityEngine; using System.Collections; using System.IO; public class SavedScreen : MonoBehaviour { string path = "";

springmvc關於利用kaptchar完成驗證碼圖片功能

新增依賴: 官方提供的pom應該是 <dependency> <groupId>com.google.code.kaptcha</groupId> <artifactId>kaptcha</artifactI

Unity3d 儲存到相簿,並且重新整理相簿

原文連結 using UnityEngine; using System.Collections; using System; using System.IO; public class CaptureScreenshotMgr: MonoBehaviour { /// <sum

selenium儲存、擷取特定區域的圖片

browser = webdriver.Chrome() wait = WebDriverWait(browser, 10) browser.get('https://www.baidu.com') time.sleep(3) browser.get_scr

如何通過 Terminal 設定儲存的位置

由於截圖的預設位置是儲存在 desktop 上的,而 desktop 又是我們經常見的地方,有一個乾淨的介面對良好的電腦的體驗非常重要,那麼可以通過改變截圖的預設的儲存位置來改變。而改變這一路徑需要用到 Terminal ,進行設定的只需要3個步驟: 開啟 Termianal,然後首先輸入以下程式碼:

FFMPEG4.0.2版本上讀取RTSP流,儲存

網上ffmpeg開發的程式碼很多,但是因為版本介面變化很大,都不知道用什麼介面。找了很多資料和測試,總算有個可以執行的版本了。直接貼程式碼,需要的拿去測試吧。 capturertsp.c檔案 /* * read from rtsp,and capture

請教picturebox儲存到陣列並實現拖動組合的問題

VS2017從元資料無註釋!AutodeskRevit二次開發VS2017從元資料無註釋!AutodeskRevit二次開發 net4.5選單BUGwinform製作列印net4.5選單BUGwinform製作列印 父窗體BindingNavigator導航按鈕如何操作當前活

Python OpenCV 呼叫攝像頭並儲存

0x01 OpenCV安裝   通過命令pip install opencv-python 安裝 pip install opencv-python 0x02  示例 import cv2 cap = cv2.VideoCapture(0) #開啟攝像

儲存本地

測試過程中會有一些執行失敗的,所以這時候就要用到截圖的方法了: get_screenshot_as_file  如下: from selenium import webdriver import time driver = webdriver.Chrome() dri