canvas圖片壓縮，局部放大，像素處理

阿新 • • 發佈：2018-05-31

數組 doc photo clas typeof oct 畫布 reader 順序

直接上代碼：（具體看註釋）

需要引用jquery.min.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>壓縮圖片</title>
</head>
<body>
    <input type="file" name="file" id="file">
    <div id="container"></div>

    <script src="../jquery-3.3.1.min.js"></script>
    <script>
    $( 
function(){
        $("#file").on("change",function(){
            var file = this.files[0]
            photoCompress(file, 200, $("#container")[0])
        })
    })

    /**@argument
     * file:文件（圖片形式）
     * w：文件壓縮後的寬度
     * objDiv：容器或者回調函數
     **/
    function photoCompress(file, w, objDiv){
         
var ready = new FileReader() // 異步文件讀取機制
        ready.readAsDataURL(file) // 圖片預覽
        ready.onload = function(){
            var re = this.result
            canvasDataURL(re, w, objDiv)
        }
    }

    function canvasDataURL(re, w, objDiv){
        var newImg = new Image()
        newImg.src  
= re
        var imgWidth,
            imgHeight
            offsetX = 0,
            offsetY = 0
        // img的onload事件中同步執行繪制圖像的函數，就可以一邊裝載一邊繪制了
        newImg.onload = function(){
            var img = document.createElement("img")
            img.src = newImg.src
            imgWidth = img.width
            imgHeight = img.height
            var newHeight = Math.round(imgHeight * w / imgWidth) // 按比例計算壓縮後的圖片高度
            var canvas = document.createElement("canvas")
            canvas.width = w
            canvas.height = newHeight
            var ctx = canvas.getContext(‘2d‘)
            // clearRect(x,y,width,height)
            // 參數說明：x、y矩形起點的橫縱坐標，width、height表示矩形寬高
            ctx.clearRect(0,0,w,newHeight)
            // 重置圖片寬高為壓縮後的寬高
            imgWidth = w
            imgHeight = newHeight
            // drawImage(image,x,y,w,h)
            // 參數說明：image-Image對象，x、y是繪制時該圖像在畫布中的起始坐標。w、h表示繪制時圖像的寬高
            // 該方法也可以復制圖片某個區域：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
            // 參數說明：image-Image對象，sx、sy是復制源圖像中被復制區域的起點橫縱坐標，sw、sh時候被復制區域的寬高
            // dx、dy是表示復制後的目標圖像在畫布中的起始橫縱坐標，dw，dh是復制後的目標圖像的寬高
            ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight)

            /*******************start復制局部區域放大(需要把畫布寬高都增加200) *************/
            // ctx.drawImage(img,360,390,800,400,imgWidth,0,150,100) 
            /*********************************** end **********************************/

            /*******************************start像素處理 *******************************/
            // 像素處理：下面定義的imagedata其實是一個CanvasPixelArray對象，具有height、width、data等屬性。
            // data屬性是一個保存像素數據的數組，每四個為一組，按順序分別表示：紅色值，綠色值，藍色值，透明度值。
            // var imgdata = ctx.getImageData(0,0,imgWidth,imgHeight)
            // var imgdataArr = imgdata.data
            // var imgdataLen = imgdataArr.length
            // console.log(imgdataArr)
            // for(var i = 0; i < imgdataLen; i += 4){
            //     imgdataArr[i] = 255 - imgdataArr[i] // red
            //     imgdataArr[i+1] = 255 - imgdataArr[i+1] // green
            //     imgdataArr[i+2] = 255 - imgdataArr[i+2] // blue
            // }
            // ctx.putImageData(imgdata,0,0) // 重置像素值後重繪圖像：參數分別表示：imgdata-像素組，重繪圖像的起點橫縱坐標
            /*********************************** end **********************************/

            
            var base64 = canvas.toDataURL(‘img/png‘,0.7) // 參數表示：指定的圖片類型，圖片質量 
            if(typeof objDiv === ‘object‘){
                objDiv.appendChild(canvas)
                // console.log(base64)
            } else if(typeof objDiv === ‘function‘){
                objDiv(base64)
            }
        }
    }
    </script>
</body>
</html>

如有問題請指出~

canvas圖片壓縮，局部放大，像素處理

數組 doc photo clas typeof oct 畫布 reader 順序直接上代碼：（具體看註釋）需要引用jquery.min.js <!DOCTYPE html> <html lang="en"> <head>

js基礎第一天 (全局變量，局部變量)

cti 是我 ons 五行沒有應該聲明長時間 urn 前言：今天我把變量這塊內容單獨放出來，是我覺的這也是個重點，我很早就知道變量這個東東，可惜一直半懂不懂的，每次出現復雜的寫法我就蒙圈了，今天我利用的好長時間把這塊內容弄明白。初學者可以看看我下面的案例和詳細解釋

c++全局變量，局部變量，內存布局，默認初始化

def 布局內存布局 con glob efi 靜態存儲區 cal 自定義類全局變量定義在所有函數之外的變量，main函數之內的變量也是局部變量，Globle variable 未顯示初始化時執行默認初始化局部變量定義在函數之內的變量，Local variabl

面向對象，局部變量和成員變量

對象 pri 計算影響多個 static 初始化 ret false 面向對象的編程關註與類的設計設計類實際上是設計類的成員基本的類的成員，屬性（成員變量）&方法1、設計類，並設計類的成員（成員變量&成員方法）2、通過類，來創建類的對象（累的實例化用n

隨筆⑨ java中的變量 --- 類變量（靜態變量），final變量，成員變量，局部變量

stat 很大的 public color 靜態不同 nbsp 綜合加載 java中的變量 --- 類變量（靜態變量），final變量，成員變量，局部變量 ① 類變量（也叫靜態變量）是類中獨立於方法之外的變量，用static 修飾，靜態變量隨著類的加載而加載。 ② f

java中靜態代碼塊（static{...}），局部代碼塊（方法中{...}），構造代碼塊（類中{...}）區別。

一個什麽控制 class 加載我們所有變量統一初始化 1、局部代碼塊: 　　格式：在方法中{局部代碼塊執行語句} 　　局部代碼塊，又叫普通代碼塊。它是作用在方法中的代碼塊。　　作用：是控制變量的生命周期。　　在程序中當我們定義完成一個局部變量x之後，並且在接

css+jquery 實現圖片局部放大預覽

leave init float this () 設計背景事件 relative 今天有時間開始動手,使用css+jqueryshi實現了圖片局部放大的組件,首先看看效果圖: 界面設計思路如下: 1.兩個div,左

WPF和Winform中picturebox圖片局部放大

Java筆記：成員變量，局部變量，類變量，實例變量以及註意事項

dock 量變 set system println 就是給未來的自己成員變量 tty 局部變量：方法中定義的變量。成員變量（類似C中的全局變量）：成員變量定義在方法體和語句塊之外。成員變量就概括描述了類中的變量，不區分static。是以下變量的統稱。類變量（靜態變

python函數(全局變量，局部變量，作用域，遞歸函數，高階函數，匿名函數)

1-1 內置函數 info 結果類型函數地址 iterable 二層 abs ret 1.1函數 1.1.1什麽是函數函數就是程序實現模塊化的基本單元，一般實現某一功能的集合。函數名：就相當於是程序代碼集合的名稱參數：就是函數運算時需要參與運算的值被稱作為參數函數

手機端圖片點選預覽，雙指放大，完整demo，引入hammer.js

程式碼凌亂，自己寫的絕對能用！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

Android 圖片壓縮的一些小技巧，以及bitmap和byte[]之間的轉換

對於獲取到的圖片進行壓縮然後上傳，這個事情還是很重要的而且是很實用的。 public byte[] compressBitmap(Bitmap bitmap) { ByteArrayOutputStream baos = null; try {

高仿新浪點選圖片放大(可以拖動，動態縮小放大，以及再次點選圖片消失和儲存圖片的功能)

有圖有真相：最近在做專案的時候用到了點選圖片放大效果，於是就開始實現，本以為挺簡單的，實現起來還是遇到不少的小問題啊：第一：只實現點選圖片放大，再次點選消失，這個好實現；第二：只實現圖片可以拖動，而且可以動態縮小放大，這個也好實現；第三：第一和第二同步實現就出現問

簡析靜態代碼塊，構造代碼塊(普通代碼塊)，局部代碼塊，構造函數的執行順序

條件簡析 tar nbsp info 代碼塊 itl 創建過程 targe 測試代碼： package test; public class Father { static{ System.out.println("父類

bs4爬蟲處理解析html代碼，獲得屬性，獲取crsf認證，事件數據插入失敗回滾，# 局部禁用csrf認證，處理時間

爬蟲 annotate itl pro val time des strip() set 獲得屬性var username = $(this).attr(‘username‘) 獲取crsf認證 token = $(‘[name=csrfmiddlewaretoken]

[ 轉載 ]Java：成員變量，局部變量，靜態變量的區別

寶馬需要聯系類的屬性共存類變量說話 java語言別名精簡後方便自己理解。成員變量我們研究一個事物：屬性：外在特征；如身高，體重行為：能做什麽；如說話，打球。在Java語言中，最基本的單位是類（class），類就是用來體

python matplotlib 圖表局部放大

ren style conn pyplot show connect mar col ins import matplotlib.pyplot as plt from mpl_toolkits.axes_grid1.inset_locator import zoomed

小眾軟件：錄屏局部放大神器 ZoomIt

下載 zoom 工具 ora 官網互動 span 名稱目前名稱 ZoomIt 功能屏幕放大錄制工具說明此款軟件解決了以下幾點訴求：我們在錄制軟件使用教學的時候，有些操作位置細節的放大需要（局部放大）我們在給別人講解PPT的時候，需要標註文字

對圖片中的局部文字提取的教程

工具分享圖片 abd proc blog 內容調整下載安裝如圖所示怎麽對圖片中的局部文字進行提取呢？有時候我們在圖片上看到一段文字想保存下來這個時候就需要使用文字提取的方法了，具體怎樣去操作呢？下面就來分享一個教程。　　步驟一、如果想對圖片中的文字進行提取，則我

CAD圖紙文件怎麽將其進行局部放大？

文章安裝下載首頁打開是不是相關迅捷學習 CAD圖紙文件怎麽將其進行局部放大？一張CAD圖紙文件放在CAD看圖軟件裏面進行查看的，想要進行圖紙裏面局部放大查看的時候我們應該如何進行使用操作呢，不用著急，今天小編就要來教教大家CAD圖紙文件怎麽將其進行局部放大的

canvas圖片壓縮，局部放大，像素處理

相關推薦