區塊鏈研究實驗室 | PlasmaMVP使用javascript實現資金撤回教程
為了更好地理解我的研究，我將PlasmaMVP表示為javascript。MVP是Vbuterin最初提出的minimal viable plasma，旨...
JavaScript實現瀏覽器本地的圖像移動、大小調整和裁剪
本文介紹如何使用和HTML5 Canvas元素來移動、調整大小和裁剪圖像，這些技術適用於圖片編輯器、照片分享等應用場景。
一般而言圖像的剪裁會放在服務端進行，但是圖片傳送會消耗較多的流量。藉助HTML5 Canvas繪圖功能，可以在瀏覽器端以比較簡單的方式來實現。
代碼和在線演示地址：http://ikinsoft.com/3ddemo/CanvasImage.html，可以先操作下，有個整體印象，界面截圖如下：
構建界面佈局和元素
HTML頁面由源圖片、Crop操作按鈕、裁剪矩形框以及圖片容器（含4個角的調整小方塊）組成，主體代碼如下：
img[class=resize-image] 元素為本服務器圖片資源，是要進行調整和裁剪的圖片。注意出於安全策略，不能在瀏覽器中跨域操作圖片，否則會出現類似下面的報錯信息：
button[class=btn-crop] 是SVG矢量圖標按鈕。
div[class=overlay] 元素是裁剪矩形框。
此外圖片容器使用JavaScript動態包裝在 img[class=resize-image] 元素外部：
實現大小調整的功能
大小調整通過先在Canvas上繪製一個對應大小的圖像，接著通過Canvas的toDataURL方法轉化為base64編碼的字符串形式的圖片數據。最後把該data:URL通過設置為img的src屬性，附著到目標圖像元素上。
實現移動功能
通過mouseup事件獲取新的位置，然後通過的offset方法來完成元素偏移。
實現裁剪功能
這個主要是實現一個居中的覆蓋矩形（overlay），接著通過計算背景圖片和該覆蓋矩形的偏移來獲取圖片裁剪區域的座標，
然後再通過Canvas的drawImage和toDataURL完成裁剪圖的繪製。
最後再加上一些移動功能，如觸摸事件（Touch）和手勢（Gesture）檢測的支持。
相關推薦
'在瀏覽器中實現GPU加速的JavaScript'
"gpu.jsGPU加速JavaScript GPU.js是用於Web和節點的JavaScript的GPGPU（GPU上的通用計算）的JavaScript加速庫。GPU.js自動將簡單的JavaScript函數轉換為著色器語言並編譯它們，以便它們在GPU上運行。如果GPU不...
'JavaScript實現第三方登錄網站原理在這呢'
"點關注，不迷路，每天更新大量前端資料前端實現第三方登錄之OAuth2.0協議OAuth 2.0 規定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應用頒發令牌。下面就是這四種授權方式。授權碼模式（authorization-code）簡化模式（implic...
最新Visual Studio 2019可以用Edge瀏覽器除錯JavaScript
開發者現在可以在VisualStudio.com下載最新Visual Studio 2019 16.2第二預覽版，這個版本讓開發者可以使用Edge瀏覽器為...
如何用JavaScript純前端來實現下載腳本，讓後端人員失業去吧
下載腳本長期以來一直是互聯網可用性的重要組成部分。一般都是在服務端來實現的居多，隨著技術的發展，前後端分離技術的興起，以前很多後端的事也更多讓前端來實現，...
JavaScript的功能設計過程API實現功能
我們模擬API不是為了好玩，而是為了協助開發功能。考慮到將來可能要模擬龐大的API集合，因此，我們需要一個控制任務順序的流程。例如，在開始實現一個功能之前，我們是否需要等待某個API就緒？雖然設計API需要時間，並且會關聯到很多人，但如果我們可以模擬API，那就不需要等待了...
這些地方不需要使用Javascript，用css就可以實現
需要關於前端的學習資料請加群：532018971當我做前端開發的時候，經常會使用 CSS 來代替 JavaScript 做一些交互。下面是我僅僅使用幾行 ...
用25行JavaScript語句實現一個簡單的編譯器
即使對於專業程序員來說，構造一個編譯器也是頗具挑戰性的任務，本文將會引導你抽絲剝繭，一探究竟！為什麼我需要這個？你可能想“為什麼我需要知道如何開發編譯器?...
前端日報：JavaScript實現自動重連和Web技術實現移動監測
1、JavaScript作用域和閉包作用域和閉包在JavaScript裡非常重要。但是在我最初學習JavaScript的時候，卻很難理解。這篇文章會用一些...
聊聊那些使用前端Javascript實現的機器學習類庫
機器學習（Machine Learning）在最近幾年絕對稱的上是大火，越來越多的公司和資本投入了巨大資源和金錢到這個新上位的技術“新寵”中，尤其是隨著更...
javascript實現分頁效果
網站分頁功能是必不可少的，一般用在列表頁面中，javascript實現分頁效果，效果如下：實現代碼html結構：CSS樣式：javascript：
javascript技術實現帶動畫的提示型彈窗效果
原生javascript實現帶動畫的提示型彈窗，常用於網站彈層的彈窗也有很多，一般用插件比較多，所以今天就來寫一寫該功能，如有錯誤之處請指出！彈出跟消失都...
實現網頁瀏覽器滾動條同步的滾動進度條
實現一個效果，就是網頁瀏覽器中的滾動條滾動的同時出現同步的滾動進度條！可以用在一些要描述頁面長度的項目中，讓用戶更直觀的知道該網頁是不是快拉到底部了！代碼...
程序員150行原生JavaScript實現最簡單的圖片懶加載
懶加載什麼是懶加載懶加載其實就是延遲加載，是一種對網頁性能優化的方式，比如當訪問一個頁面的時候，優先顯示可視區域的圖片而不一次性加載所有圖片，當需要顯示的...
推薦中...