您現在的位置是:電腦技術吧?>? 故障問題 ??>??切圖,.9切圖??>??正文詳情

切圖,.9切圖

賴驪娜2019-11-13 16:11:14 人圍觀
簡介切圖什么意思享受生活,熱愛重建,大家好,我是這個充斥著HTML5話題的時代的賈森,似乎不懂HTML5的人有點落伍了。讓我也跟上潮流。我今天分享的是一個基于HTML5的自助截三格切圖

  享受生活,熱愛重構,大家好,我是Json。

  在現在這個到處是HTML5話題的時代,好像不懂點HTML5都有點落伍。

那我也跟上潮流一把吧,今天給大家分享的是基于HTML5的自助切圖。

  在組里經常會被某設計師叫切板仔,確實重構很大一部分工作都花在切圖上,而如何提高切圖效率或者讓切圖自助化也是我們重構師的追求。

基于這個前提我自己抱著研究的心態,使用HTML5大致實現了一下。

一開始覺得HTML5是個很神秘很高深的東西,其實當你去了解他,你會發現他是很空虛,且很容易上.手的。

  這里使用到的HTML5技術包括:  本地預覽(FileReader)  拖拽(drag drop)  切圖(canvas)  拖拽:  拖拽基本事件如下: DataTransfer 對象 退拽對象用來傳遞的媒介,使用一般為Event.dataTransfer。

draggable 屬性 就是標簽元素要設置draggable=true,否則不會有效果,例如: div title=拖拽我 draggable=truert;列表1/div:rt;/tdrt; ondragstart 事件 當拖拽元素開始被拖拽的時候觸發的事件,此事件作用在被拖曳元素上 ondragenter 事件 當拖曳元素進入目標元素的時候觸發的事件,此事件作用在目標元素上 ondragover 事件 拖拽元素在目標元素上移動的時候觸發的事件,此事件作用在目標元素上 ondrop 事件 被拖拽的元素在目標元素上同時鼠標放開觸發的事件,此事件作用在目標元素上 ondragend 事件 當拖拽完成后觸發的事件,此事件作用在被拖曳元素上 drageleave事件 當拖拽離開此處時觸發,只在離開這個對象時觸發一次,此事件作用在目標元素上 Event.preventDefault() 方法 阻止默認的些事件方法等執行。

在ondragover中一定要執行preventDefault(),否則ondrop事件不會被觸發。

另外,如果是從其他應用軟件或是文件中拖東西進來,尤其是圖片的時候,默認的動作是顯示這個圖片或是相關信息,并不是真的執行drop。

此時需要用用document的ondragover事件把它直接干掉。

Event.effectAllowed 屬性 就是拖拽的效果。

  圖1是頁面上所使用到拖拽的地方。

左圖為拖拽上傳圖片,右圖為拖拽參考線。

  介紹完拖拽基本事件后,再來看下頁面是如何通過拖拽將本地圖片通過拖拽的方式拖到頁面指定區域使用圖片上傳,這也是拖拽現在比較常用到的功能。

  給document增加拖拽事件,當拖拽元素進入頁面時改變目標元素樣式提示用戶目標元素位置,當拖拽元素離開頁面后還原樣式。

代碼如下:  document.ondragleave = function(e){  e.preventDefault();  var el = document.getElementById('target_box');  el.className = el.className.replace(/over/g,'');  }  document.ondrop = function(e){  e.preventDefault();  }  document.ondragenter = function(e){  e.preventDefault();  var el = document.getElementById('target_box');  el.className = el.className ' over';  }  document.ondragover = function(e){  e.preventDefault();  var el = document.getElementById('target_box');  el.className = el.className ' over';  }  當圖片被拖到上傳區域后通過FileReader方法讀取本地文件,然后將圖片通過canvas來繪制,如果圖片的寬度是大于畫布1000px將水平居中處理,這里因為切圖的時候需要將圖片完整切出來,所以在設置canvas寬度時需要顯示成圖片的大小,所以這里使用了負marginLeft(這里將圖片寬度減1000得出超出1000的區域,然后再除于2得出marginLeft的值)外面套一層1000px的方式來實現水平居中。

代碼如下:  var box = document.getElementById('target_box');  box.ondrop = function(e){  e.preventDefault();  //獲取文件列表  var fileList = e.dataTransfer.files;  var reader = new FileReader();  reader.onload = function(e){  var img = new Image();  img.src = this.result;  img.onload = function(){  if(this.width1000){  canvas.style.marginLeft = ((this.width - 1000)/2) * -1 'px';  }  canvas.width = this.width;  canvas.height = this.height;  ctx.drawImage(this,0,0);  }  }  reader.readAsDataURL(fileList[0]);  document.getElementById('target_box').style.display = 'none';  document.getElementById('doc').style.display = 'display';  };  本地預覽(FileReader) FileReader接口的方法 readAsBinaryString(file) 將文件讀取二進制碼 通常我們將它傳送到后端,后端可以通過這段字符串存儲文件 readAsText(file,[encoding]) 將文件讀取文本 第二個參數是文本的編碼方式,默認UTF-8 readAsDataURL(file) 將文件讀取為DataURL 將文件讀取為一串Data URL字符串,將小文件以一種特殊格式的URL地址直接讀入頁面。

小文件指圖像與html等格式的文件。

FileReader接口的事件 onabort 數據讀取中斷時觸發 onerror 數據讀取出錯時觸發 onloadstart 數據讀取開始時觸發 onprocess 數據讀取中 onload 數據讀取成功完成時觸發 onloadend 數據讀取完成時觸發,無論成功失敗   這里因為標尺不需要做任何事情處理只需要拖拽效果,所以只需要增加draggable屬性就可以,代碼如下:

  然后給目標元素增加Drop事件,當拖拽的標尺在目標元素上放開時新建一個參考線并通過offsetY來獲取鼠標釋放時的Y坐標,然后再將這個Y坐標存到數組里。

  //增加標尺目標事件  document.getElementById('cvs').ondrop = function(ev){  var div = document.createElement('div');  div.style.width = '100%'  div.style.height = '1px';  div.style.background = '#4affff';  div.style.position = 'absolute'  div.style.top = ev.offsetY 18 'px';  document.getElementById('screen').appendChild(div);  rulerTop.push(ev.offsetY);  return false;  }  Canvas:  這里先介紹下canvas的drawImage方法,切圖的核心方法就是這個,我們先來看看官方給出的使用方法與解釋:  drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) image 所要繪制的圖像。

這必須是表示 #FormatImgID_3# 標記或者屏幕外圖像的 Image 對象,或者是 Canvas 元素。

sourceX, sourceY 圖像將要被繪制的區域的左上角。

這些整數參數用圖像像素來度量。

sourceWidth, sourceHeight 圖像所要繪制區域的大小,用圖像像素表示。

destX, destY 所要繪制的圖像區域的左上角的畫布坐標。

destWidth, destHeight 圖像區域所要繪制的畫布大小。

  了解了drawImage方法后我們來看下,如何通過drawImage達到切圖效果,其實這里的切圖,只是通過drawImage加上高寬和偏移量來實現所謂的切圖效果,代碼如下:  //繪制圖片  function scaleCanvas (canvas, width, height, destX, destY) {  var w = canvas.width,  h = canvas.height;  var cutCanvas = document.createElement('canvas');  var cutCtx = cutCanvas.getContext('2d');  cutCanvas.width = width;  cutCanvas.height = height;  cutCtx.drawImage(canvas, 0, 0, w, h, destX, destY, w, h);  return cutCanvas;  }  //獲取圖片URL  function getDataURL (canvas, width, height, destX, destY) {  canvas = scaleCanvas(canvas, width, height, destX, destY);  return canvas.toDataURL('image/jpeg');  }  //將conver轉成IMG格式  var convertToImage = function (canvas, width, height, destX, destY) {  var strData = getDataURL(canvas, width, height, destX, destY);  return encodeURIComponent(strData);  }  這里先說下大致實現的原理,首先先創建一個新的canvas然后設置好寬高,而這個寬高就是參考線分隔的每一塊寬高,然后過通drawImage將原圖上某塊局域復制一份出來,再通過toDataURL轉成base64編碼方便本地顯示。

  所在在這個Demo中image就是我們剛上傳的那個圖片,sourceX、sourceY和destWidth、destHeight取圖片的原始高寬,而我們要復制的局域也是從新的canvas上的左上角開始,所以這里的sourceX、sourceY為0,0。

這里最主要的就是destX、destY,就是他們來控制復制局域的起始坐標,因為新圖片是需要從最左邊開始復制,所以destX為0,而destY將根據參考線的縱坐標來定值。

  這里要注意一下,因為域的問題,所以如果頁面不是放到服務器上運行而是本地運行的話會出現權限報錯情況  最后附上Demo一枚,歡迎大家盡情的暴、使勁暴。

(Demo只支持chrome瀏覽器,其他瀏覽器會有不良反應,請見諒)  好了,整個HTML5自助化切圖的主要代碼就這些,這里第一次嘗試用HTML5去做一些實實在在的東西,可能代碼并不是最優,還能繼續優化,大家如果對于文章有什么建議或不明白的地方歡迎討論。

  在舊版的切圖工具里,我們的做法是將圖片上傳到服務器,然后通過服務器端把圖片切好后把對應的地址返回,前端再把頁面顯示出來。

這樣的做法會導致在網絡慢時出現長時間的等待,而如果頁面放棄這里的操作,還需要將圖片從服務器端刪除掉。

在拖拽參考線時也只能通過大量的代碼去實現,還需要編寫一些服務器端代碼。

  HTML5版相對有響應速度快(本地讀取)、拖拽功能簡單、前端切圖不需要依賴服務器,減少開發成本。

  反正HTML5是個上流、好玩、有趣、簡單的好東西,值得你一生擁有。

  寫完文章已經凌晨兩點半,根據官方和非官方統計,這個時間段被坑機率是平時的0.000001%,實踐是檢驗真理的唯一標準。

而為了檢驗這個標準我帶著疲憊的身軀,打開客戶端進入匹配模式。

  裸多蘭一級升E下路孤獨神級大嘴再次上路,德瑪西亞。

注:更多精彩教程請關注電腦高手網頁設計教程 欄目,

版權聲明:本文由 賴驪娜 整理編輯。

原標題:怎樣切圖,什么是切圖

轉載注明出處:http://www.dn9ww09s.icu/fault/11876.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦連打印機脫機,電腦與打印機脫機了怎么辦

    電腦連打印機脫機,電腦與打印機脫機了怎么辦 相關圖片打印機脫機了怎么解決平時我們會用打印機打印文件和資料,方便在班上工作或學習。但是,在使用打印機的過程中,我們可能會遇到打印機離線無法打印的情況。要解決這個問題,我...

  • canvas繪制矩形,canvas繪制空心矩形

    canvas繪制矩形,canvas繪制空心矩形 相關圖片canvas繪制實心矩形的方法在過去的兩天里,我需要用我同事的HTML5來畫圖。我發現矩形函數所畫的邊界存在風格不一致的問題。最后,我通過一些消除方法找到了問題的癥結所在,現在我...

  • 本地連接不見了,本地連接

    本地連接不見了,本地連接 相關圖片電腦的本地連接不見了怎么辦如今,我們越來越多地使用計算機工作,而網絡是計算機的命脈。如果在使用計算機時遇到沒有本地連接的問題,我們應該怎么做?有些用戶不知道怎么做...

  • 什么哪些什么填空,什么啊什么填空

    什么哪些什么填空,什么啊什么填空 相關圖片什么地找填空當你在網上制作獎勵信息時,你經常會看到一些標題標題填寫在空白的在線/標題樣式類型=文本/CSS!--. 仙{左邊框樣式:無;右邊框樣式:無什么地想填空...

  • 筆記本的虛擬內存,筆記本虛擬內存有用嗎

    筆記本的虛擬內存,筆記本虛擬內存有用嗎 相關圖片電腦虛擬內存設置多少戴爾品牌是全球知名的IT品牌,主要集中在IT產品上,更注重整體,所以自然會有很多用戶使用戴爾筆記本,當然也有一些用戶覺得電腦內存不足,因為有很多軟件...

  • 元素隱藏,js判斷元素顯示隱藏

    元素隱藏,js判斷元素顯示隱藏 相關圖片html元素隱藏一。Dreamweaver顯示隱藏元素行為1。將AP div(通常稱為layer)插入到web頁面2中。選擇body標記、link(a)標記或AP元素3。打開行jquery元素顯示和隱藏...

  • 電腦鍵盤圖,電腦鍵盤示意圖高清

    電腦鍵盤圖,電腦鍵盤示意圖高清 相關圖片電腦鍵盤指法示意圖很多朋友都想知道電腦鍵盤圖的制作方法。其實,電腦鍵盤圖的制作方法很簡單。如果你想學習,編輯一定會教你電腦鍵盤圖的方法!接下來,我將為您帶來電腦鍵...

  • wifi密碼查看,如何查看wifi密碼

    wifi密碼查看,如何查看wifi密碼 相關圖片wifi密碼忘了怎么辦WiFi無線連接被越來越多的人廣泛使用。人多了,自然會有一些安全隱患,比如被擦網。我們有時會抱怨網絡速度太差,其實很大一部分是有人搓網造成的,所以我們就...

  • 表單和表格,excel 表單

    表單和表格,excel 表單 相關圖片html表格一。在Dreamweaver的表單1中插入表。單擊鼠標,將光標放在窗體的框架線內,然后插入表,就像在普通文檔中一樣。如下圖所示:您可以在代碼視圖中查看源代碼:2怎樣編輯表格...

  • wifi密碼查看,如何查看wifi密碼

    wifi密碼查看,如何查看wifi密碼 相關圖片wifi密碼忘了怎么辦WiFi無線連接被越來越多的人廣泛使用。人多了,自然會有一些安全隱患,比如被擦網。我們有時會抱怨網絡速度太差,其實很大一部分是有人搓網造成的,所以我們就...

熱評文章

  • 手把手教你如何組裝一臺電腦,組裝筆記本電腦教程

    手把手教你如何組裝一臺電腦,組裝筆記本電腦教程 相關圖片臺式電腦裝機教程大量用戶認為,他們自己動手組裝的電腦肯定比他們購買的整臺機器更劃算。事實上,各種配件都會在到貨后進行組裝。小編會給你介紹電腦安裝的步驟。如果你感興...

  • 雷神筆記本黑屏怎么辦,雷神筆記本不能開機

    雷神筆記本黑屏怎么辦,雷神筆記本不能開機 相關圖片雷神筆記本怎么強制關機雷神筆記本的用戶告訴小編,當他打開電腦時,發現筆記本里有一個黑屏,他不知道怎么解決。我們知道筆記本電腦是由顯示器、鍵盤、鼠標、CPU、內存和硬盤...

  • 面包屑怎么做,面包屑可以做啥

    面包屑怎么做,面包屑可以做啥 相關圖片面包屑炸蝦的做法方法1,說明:該方法使用CSS3,無圖片,兼容各種WebKit瀏覽器,兼容IE8 。首先,上圖:1。HTML代碼相對簡單。您只需要一個簡單的UL和Li代碼,如下面包屑炸蝦...

  • 惠普筆記本進入bios,惠普筆記本bios

    惠普筆記本進入bios,惠普筆記本bios 相關圖片惠普臺式電腦怎么進入biosBIOS是整個計算機最基本的設置。啟動計算機的第一步是先加載BIOS,然后通過BIOS加載系統將其引導到系統中。BIOS中有許多實用的設置。以下是HP電腦如何進惠普...

  • 網頁抖動怎么調整,抖動

    網頁抖動怎么調整,抖動 相關圖片系統抖動向CSS添加以下代碼:HTML,body{overflow-y:scroll;}HTML,body{overflow:scroll;min height:101手機畫面抖動怎么回事...

  • 一鍵清除bat,一鍵垃圾

    一鍵清除bat,一鍵垃圾 相關圖片下載垃圾一鍵清除重新安裝系統時,將覆蓋以前系統的文件。我們使用它可能不重要,但當我們使用它時,我們會感到計算機越來越擁擠。因此,我們需要學習如何通過單擊清除系統垃...

  • 段落縮進,段落首行縮進

    段落縮進,段落首行縮進 相關圖片各段落首行縮進2字符CSS段落縮進的語法如下:語法:文本縮進:允許值:初始值:0文本縮進屬性可以應用于塊級元素(P、H1等),以定義元素第一行可以接受各段落懸掛縮進...

  • 電腦顯示器老是黑屏,電腦為什么顯示器黑屏

    電腦顯示器老是黑屏,電腦為什么顯示器黑屏 相關圖片電腦顯示器黑屏閃爍我經常在網上看到一些網友說電腦顯示器上有一個黑屏。我不知道該怎么辦。嘗試后無法重新啟動計算機監視器。事實上,電腦顯示器上出現黑屏有很多原因。由于...

  • 打印機顯示暫停打印,打印機無法打印顯示暫停

    打印機顯示暫停打印,打印機無法打印顯示暫停 相關圖片打印機老是暫停怎么辦一些用戶報告,使用打印時無法暫停打印機顯示。他們掙扎了半天,還是沒法打印。打印機可能設置為暫停狀態,這不是主要故障。如何解決遇到打印機顯示暫停...

  • id和name,如何根據id獲取name

    id和name,如何根據id獲取name 相關圖片html name id 區別HTML5已經刪除了name屬性。執行錨定時請使用ID。示例效果:http://keleyi.com/keleyi/phtml/html5/9.htmsuppo而name...

關注微信

变脸官网查询