本文主要介紹畫布圖片編輯(在畫布上畫圖的方法)，下面一起看看畫布圖片編輯(在畫布上畫圖的方法)相關(guān)資訊。
序
畫布，翻譯為 帆布 在中文中，已經(jīng)添加到html5中，可以與javascript結(jié)合在畫布中動態(tài)繪制圖形。
今天，我們不 不要談?wù)摦嫴嫉睦L制，而是談?wù)撊绾翁幚韴D片，所以讓 讓我們來看看詳細(xì)的介紹。
大概過程很簡單，主要分為以下三步:
畫布圖像處理就像把大象放進(jìn)冰箱一樣簡單，哈哈。
首先，主要的api
整個過程中使用的主要canvas api有:
draw image:draw imagegetimagedata:getimagedata重寫圖像數(shù)據(jù):putimagedata導(dǎo)出圖像:todataurl1。drawimage
顧名思義，該方法用于將圖像繪制到畫布中，具體有三種用法:
①在畫布上定位圖像:context.drawimage(img，x，y)
②在畫布上定位圖像，并指定圖像的寬度和高度:context。drawimage (img，x，y，width，height)。
③剪切圖像，在畫布上定位剪切的部分:context。drawimage (img，sx，sy，寬度，高度，x，y，寬度，高度)。
下表描述了上述參數(shù)值:
參數(shù)描述img指定要使用的圖像、畫布或視頻。sx是可選的。開始切割的x坐標(biāo)位置。sy是可選的。開始切割的y坐標(biāo)位置。swidth可選。裁剪圖像的寬度。身高是可選的。裁剪圖像的高度。圖像在畫布上的x坐標(biāo)位置。將圖像的y坐標(biāo)位置放在畫布上。寬度是可選的。要使用的圖像的寬度。(拉伸或縮小圖像)高度是可選的。要使用的圖像的高度。(拉伸或縮小圖像)
2.getimagedata
該方法用于從畫布中獲取圖像數(shù)據(jù)，具體用法如下:
獲取畫布指定矩形內(nèi)的像素?cái)?shù)據(jù):var imagedata = context . getimagedata(x，y，width，height)。
下表描述了上述參數(shù)值:
該參數(shù)描述x開始復(fù)制的左上角的x坐標(biāo)。要開始復(fù)制的左上角的y坐標(biāo)。寬度要復(fù)制的矩形區(qū)域的寬度。高度要復(fù)制的矩形區(qū)域的高度。這個方返回一個imagedata對象，這個對象有三個屬性:寬度、高度和數(shù)據(jù)，這個數(shù)據(jù)數(shù)組是我們使用的最重要的一個，因?yàn)樗４媪藞D像中每個像素的數(shù)據(jù)。有了這些數(shù)據(jù)，我們就可以對其進(jìn)行處理，最后改寫成畫布，從而實(shí)現(xiàn)圖片的處理和變換。對于數(shù)據(jù)數(shù)組的具體用法，我們可以在下面的例子中看到。
3.putimagedata
這個方法很簡單，就是用它把圖像數(shù)據(jù)重寫到畫布上。具體用法如下:
context.putimagedata(imgdata，x，y，dirtyx，dirtyy，dirtywidth，dirtyheight)
下表描述了上述參數(shù)值:
參數(shù)描述imgdata指定要放回畫布上的imagedata對象。x imagedata對象左上角的x坐標(biāo)，以像素為單位。y imagedata對象左上角的y坐標(biāo)，以像素為單位。dirtyx是可選的。圖像放置在畫布上的水平值(x ),以像素為單位。dirtyy是可選的。圖像放置在畫布上的水平值(y)，以像素為單位。dirtywidth是可選的。用于在畫布上繪制圖像的寬度。dirtyheight是可選的。圖像在畫布上繪制的高度。
4.todataurl
這種方法與上述三種方法不同。它是canvas對象的一個方法。該方法返回一個包含數(shù)據(jù)uri的字符串，可以直接填充到img標(biāo)簽的src屬性中作為圖像路徑地址。具體用法如下:
var data url = canvas . toda taurl(type，encoder options)；
下表描述了上述參數(shù)值:
參數(shù)描述類型是可選的。圖像格式，默認(rèn)為image/png。encoderoptions是可選的。在指定的圖像格式是image/jpeg或image/webp的情況下，可以從0到1的范圍中選擇圖像的質(zhì)量。如果超出范圍，將使用默認(rèn)值0.92。其他參數(shù)被忽略。
二、圖像處理實(shí)例
本例將簡單介紹如何通過代碼將彩片處理成黑白圖片。
！畫布id = 帆布 寬度= 600英鎊高度= 600英鎊/canvas輸入id = 手柄和手柄type = 按鈕 價值= 處理圖片和/在。put id = 創(chuàng)造 type = 按鈕 價值= 生成圖片/div id = 結(jié)果與結(jié)果/div//javascript window . onload = function{ var canvas = document . getelementbyid( 帆布 )，//get canvas object context = canvas . get context( ;).//獲取一個2d上下文對象，大部分canvas api都是這個對象的方法:var image = new image；//定義一個圖片對象image.src = imgs/img . jpg ;；image.onload = function{ //這里一定要注意！所有后續(xù)操作必須在圖像加載成功后進(jìn)行，否則圖像會處理無效的context.drawimage(image，0，0)；//從畫布的左上角(0，0)開始繪制圖片。默認(rèn)大小是圖片的實(shí)際大小，var handle = document。getelementbyid( 手柄和手柄);var create = document . getelementbyid( 創(chuàng)造 );handle.onclick = function{ //單擊 過程圖片和處理圖片的按鈕varimgdata = context . getimagedata(0，0，canvas.width，canvas . height)；//獲取圖片數(shù)據(jù)對象var data = imgdata.data//獲取一個圖片數(shù)據(jù)的數(shù)組，其中每個像素保存有四個元素，分別代表紅色、綠色、藍(lán)色和透明度值var average = 0；for(var i = 0；i數(shù)據(jù)長度；i = 4){ average = math . floor((data[i]data[i 1]data[i 2])/3)；//將紅綠藍(lán)值平均得到灰度值data[i]= data[i 1]= data[i 2]= average；重寫每個像素的顏色值} imgdata.data = datacontext.putimagedata(imgdata，0，0)；//將處理后的圖像數(shù)據(jù)重寫到畫布上。這時，畫布上圖像變成黑白的。create.onclick = function{ //單擊 生成圖片按鈕導(dǎo)出圖片var img src = canvas . toda taurl；//獲取圖片的data url var new img = new image；var result = document . getelementbyid結(jié)果與結(jié)果);new img . src = img src；//將圖像路徑分配給src result.innerhtml = ；result . appendchild(new img)；};};};也許上面的代碼寫得不好，它不。;看起來不那么容易理解。it it’最好自己寫，這樣你能更深刻地理解它。
摘要
那個 這是這篇文章的全部內(nèi)容。希望這篇文章的內(nèi)容能給你的學(xué)習(xí)或者工作帶來一些幫助。有問題可以留言交流。謝謝你的支持。
標(biāo)簽:
圖像畫面畫布處理對象
了解更多畫布圖片編輯(在畫布上畫圖的方法)相關(guān)內(nèi)容請關(guān)注本站點(diǎn)。