導航:首頁 > 圖片大全 > 如何用canva把圖片淡化

如何用canva把圖片淡化

發布時間:2022-10-06 13:58:36

❶ canvas使用圖像(繪制圖、圖像平鋪、圖像剪裁、像素處理、繪制文字)

繪制圖像:drawImage()
獲取圖像數據:getImageData()
重寫圖像數據:putImageData()
導出圖像:toDataURL()

顧名思義,該方法就是用於將圖像繪制於Canvas畫布當中,具體用法有三種:

① 在畫布上定點陣圖像:
context.drawImage(img,x,y)
② 在畫布上定點陣圖像,並規定圖像的寬度和高度(縮放):
context.drawImage(img,x,y,width,height)
③ 剪切圖像,並在畫布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

效果:

createPattern() 方法在指定的方向內重復指定的元素。元素可以是圖片、視頻,或者其他 <canvas> 元素。被重復的元素可用於繪制/填充矩形、圓形或線條等等。

效果:

使用圖形上下文不帶參數的clip()方法來實現Canvas圖形裁切功能,該方法會使用先創建好的路徑對canvas設置裁剪區域,裁剪指定區域顯示內容。裁剪是對畫布進行的,裁剪後的畫布是不能恢復到原來的大小,因此使用save及restore。

效果:

我們可以直接從HTML5 canvas中獲取單個像素。通過ImageData對象我們可以以讀寫一個數據數組的方式來操縱像素數據。當完成像素操作之後,如果要顯示它們,需要將這些像素復制到canvas上。

ImageData對象代表canvas中某個區域的底層像素數據。它包含三個只讀的屬性:

width:圖像的寬度,單位像素。
height:圖像的高度,單位像素。
data:包含像素值的一維數組。

在data數組中的每一個像素包含4個位元組的值。也就是說每一個像素由4個位元組表示,每一個位元組分別表示紅色,綠色,藍色和一個透明度alpha通道(RGBA)。

putImageData()函數將它們復制到canvas上。putImageData()函數有兩種格式。第一種格式是復制所有的像素到canvas中。canvasX和canvasY參數是canvas上插入像素的x和y坐標。

sx和sy參數(sourceX 和 sourceY)是矩形左上角的x和y坐標。
sWidth和sHeight參數(sourceWidth 和 sourceHeight)是矩形的寬度和高度。

我們也可以從canvas上獲取一個矩形區域的像素到一個ImageData對象中。通過getImageData函數可以完成這個操作。

x和y參數是從canvas上獲取的矩形的左上角的坐標。

width和height參數是從canvas上獲取的矩形的寬度和高度。

我們可以在HTML5 canvas上繪制繪制文字,並且可以設置文字的字體,大小和顏色。
繪制文字的字體由font屬性來控制。如果你需要使用顏色來填充文字或製作描邊文字,可以使用fillStyle和strokeStyle屬性來完成。
要在canvas上繪制文字,可以通過的fillText()函數或strokeText()函數來完成。

表示在(x,y)的位置,繪制text的內容。可選參數maxWidth為文本的最大寬度,單位為像素。如果設置了該屬性,當文本內容寬度超過該參數值,則會自動按比例縮小字體,使文本的內容全部可見;未超過時,則以實際寬度顯示。如果未設置該屬性,當文本內容寬度超過畫布寬度時,超出的內容將被隱藏。

效果:

❷ canvas保存的圖片模糊解決辦法

上網網路了半天,都是乘以一個叫ratio的東西,也沒成,可能是自己弄錯了吧。

然後什麼都沒有乘,改了一個地方,好了

尺寸還要是之前的尺寸,不然還會模糊

❸ java 中如何將畫在畫布上的圖形清除(從canvas類繼承的畫布類)比如清除畫在畫布上的一個點

清除方法一、
在圖片的位置接著畫一個矩形覆蓋這個圖片,並且把顏色設置成和背景色一樣就OK了!
代碼如下:
context.fillStyle="ffffff";//白色為例子;
context.fillRect(400,100,400,100);
注意,上面的代碼要放在imageObj.onload裡面才有效果;
清除的方法二、
用clearRect()方法,代碼如下:
context.clearRect(400,100,imageObj.width,100);//清除畫布上的指定區域;
注意,上面的代碼要放在imageObj.onload裡面才有效果;

❹ canvas圖片處理,求教ps像素級高手。美圖秀秀,ps等軟體都有一些圖片風格特效,比如lomo,灰化,水下效果

Photoshop圖層混合模式計算公式大全

關於photoshop的圖層混合模式,大家一定都非常熟悉了,我在這里把各種混合模式的計算公式都詳細的描述一便,希望能夠對大家理解圖層的混合模式有所幫助,編寫倉促,不足之處請多批評指正。

混合模式可以將兩個圖層的色彩值緊密結合在一起,從而創造出大量的效果。在這些效果的背後實際是一些簡單的數學公式在起作用。下面我將介紹photoshopcs2中所有混合模式的數學計算公式。另外還介紹了不透明度。下面所介紹的公式僅適用於RGB圖像。對於Lab顏色圖像而言,這些公式將不再適用。

C=d*A+(1-d)*B

相對於不透明度而言,其反義就是透明度。這兩個術語之間的關系就類似於正負之間的關系:100%的不透明度就是0%的透明度。該混合模式相對來說比較簡單,在該混合模式下,如果兩個圖層的疊放順序不一樣,其結果也是不一樣的(當然50%透明除外)。

該公式中,A代表了上面圖層像素的色彩值(A=像素值/255),d表示該層的透明度,B代表下面圖層像素的色彩值(B=像素值/255),C代表了混合像素的色彩值(真實的結果像素值應該為255*C)。該公式也應用於層蒙板,在這種情況下,d代表了蒙板圖層中給定位置像素的亮度,下同,不再敘述。

B<=A:C=B

B>=A:

C=A

該模式通過比較上下層像素後取相對較暗的像素作為輸出,注意,每個不同的顏色通道的像素都是獨立的進行比較,色彩值相對較小的作為輸出結果,下層表示疊放次序位於下面的那個圖層,上層表示疊放次序位於上面的那個圖層,下同,不再敘述。

B<=A:C=A

B>A:C=B

該模式和前面的模式是相似,不同的是取色彩值較大的(也就是較亮的)作為輸出結果。

C=A*B

該效果將兩層像素的標准色彩值(基於0..1之間)相乘後輸出,其效果可以形容成:兩個幻燈片疊加在一起然後放映,透射光需要分別通過這兩個幻燈片,從而被削弱了兩次。

C=1-(1-A)*(1-B)也可以寫成

1-C=(1-A)*(1-B)

該模式和上一個模式剛好相反,上下層像素的標准色彩值反相後相乘後輸出,輸出結果比兩者的像素值都將要亮(就好像兩台投影機分別對其中一個圖層進行投影後,然後投射到同一個屏幕上)。從第二個公式中我們可以看出,如果兩個圖層反相後,採用Multiply模式混合,則將和對這兩個圖層採用Screen模式混合後反相的結果完全一樣。

C=B/(1-A)

該模式下,上層的亮度決定了下層的暴露程度。如果上層越亮,下層獲取的光越多,也就是越亮。如果上層是純黑色,也就是沒有亮度,則根本不會影響下層。如果上層是純白色,則下層除了像素為255的地方暴露外,其他地方全部為白色(也就是255,不暴露)。結果最黑的地方不會低於下層的像素值。

C=1-(1-B)/A

該模式和上一個模式剛好相反。如果上層越暗,則下層獲取的光越少,如果上層為全黑色,則下層越黑,如果上層為全白色,則根本不會影響下層。結果最亮的地方不會高於下層的像素值。

C=A+B

將上下層的色彩值相加。結果將更亮。

C=A+B-1

如果上下層的像素值之和小於255,輸出結果將會是純黑色。如果將上層反相,結果將是純粹的數學減。

B<=0.5:C=2*A*B

B>0.5:

C=1-2*(1-A)*(1-B)

依據下層色彩值的不同,該模式可能是Multiply,也可能是Screen模式。

上層決定了下層中間色調偏移的強度。如果上層為50%灰,則結果將完全為下層像素的值。如果上層比50%灰暗,則下層的中間色調的將向暗地方偏移,如果上層比50%灰亮,則下層的中間色調的將向亮地方偏移。對於上層比50%灰暗,下層中間色調以下的色帶變窄(原來為0~2*0.4*0.5,現在為0~2*0.3*0.5),中間色調以上的色帶變寬(原來為2*0.4*0.5~1,現在為2*0.3*0.5~1)。反之亦然。

A<=0.5:C=2*A*B

A>0.5:

C=1-2*(1-A)*(1-B)

該模式完全相對應於Overlay模式下,兩個圖層進行次序交換的情況。如過上層的顏色高於50%灰,則下層越亮,反之越暗。

A<=0.5:C=(2*A-1)*(B-B*B)+B

A>0.5:

C=(2*A-1)*(sqrt(B)-B)+B

該模式類似上層以Gamma值范圍為2.0到0.5的方式來調制下層的色彩值。結果將是一個非常柔和的組合。

A<=0.5:C=1-(1-B)/2*A

A>0.5:

C=B/(2*(1-A))

該模式非常強烈的增加了對比度,特別是在高亮和陰暗處。可以認為是陰暗處應用ColorBurn和高亮處應用ColorDodge。

C=B+2*A-1

相對於前一種模式而言,該模式增加的對比度要弱些。其類似於Linear

Burn,只不過是加深了上層的影響力。

B<2*A-1:

C=2*A-1

2*A-1<B<2*A:C=B

B>2*A:

C=2*A

該模式結果就是導致中間調幾乎是不變的下層,但是兩邊是Darken和Lighte年模式的組合。

A<1-B:C=0

A>1-B:

C=1

該模式導致了最終結果僅包含6種基本顏色,每個通道要麼就是0,要麼就是255。

C=|A-B|

上下層色調的絕對值。該模式主要用於比較兩個不同版本的圖片。如果兩者完全一樣,則結果為全黑。

C=A+B-2*A*B

亮的圖片區域將導致另一層的反相,很暗的區域則將導致另一層完全沒有改變。

HcScYc=HASBYB

輸出圖像的色調為上層,飽和度和亮度保持為下層。對於灰色上層,結果為去色的下層。

HcScYc=HBSAYB

輸出圖像的飽和度為上層,色調和亮度保持為下層。

HcScYc=HASAYB

輸出圖像的亮度為下層,色調和飽和度保持為上層。

HcScYc=HBSBYA

輸出圖像的亮度為上層,色調和飽和度保持為下層。

該模式根本不是真正的溶解,因此並不是適合Dissolve這個稱謂,其表現僅僅和Normal類似。其從上層中隨機抽取一些像素作為透明,使其可以看到下層,隨著上層透明度越低,可看到的下層區域越多。如果上層完全不透明,則效果和Normal不會有任何不同。

❺ canvas使用圖片

引入圖像到canvas里需要以下兩步基本操作:

HTMLImageElement
這些圖片是由Image()函數構造出來的,或者任何的<img>元素
HTMLVideoElement
用一個HTML的 <video>元素作為你的圖片源,可以從視頻中抓取當前幀作為一個圖像
HTMLCanvasElement
可以使用另一個 <canvas> 元素作為你的圖片源。
ImageBitmap
這是一個高性能的點陣圖,可以低延遲地繪制,它可以從上述的所有源以及其它幾種源中生成。
這些源統一由 CanvasImageSource類型來引用。

有幾種方式可以獲取到我們需要在canvas上使用的圖片

drawImage(image, x, y)
其中 image 是 image 或者 canvas 對象,x 和 y 是其在目標 canvas 里的起始坐標。

drawImage(image, x, y, width, height)
這個方法多了2個參數:width 和 height,這兩個參數用來控制 當向canvas畫入時應該縮放的大小

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一個參數和其它的是相同的,都是一個圖像或者另一個 canvas 的引用。其它8個參數最好是參照右邊的圖解,前4個是定義圖像源的切片位置和大小,後4個則是定義切片的目標顯示位置和大小。

閱讀全文

與如何用canva把圖片淡化相關的資料

熱點內容
美女光著胸口圖片 瀏覽:7
用ps怎麼分割圖片 瀏覽:106
ps如何添加復制別的圖片時間水印 瀏覽:206
微信被封的圖片怎麼能找回來 瀏覽:958
可愛蛤蟆圖片卡通 瀏覽:208
胖子把衣服撐破圖片 瀏覽:896
河南三輪車猥瑣小女孩圖片 瀏覽:126
ps圖片加文字怎麼去掉下劃線 瀏覽:881
word選擇正文如何不選擇圖片 瀏覽:818
圖片動漫火影忍者 瀏覽:213
瑜伽休息可愛卡通圖片 瀏覽:352
招聘話務員的圖片加文字 瀏覽:329
男生做業務發型圖片 瀏覽:653
男生體脂23圖片 瀏覽:428
大美女洗澡圖片 瀏覽:498
短發發型怎麼打理圖片 瀏覽:269
劉德華吻戲圖片大全 瀏覽:472
特斯拉皮膚價格圖片大全 瀏覽:491
紅色豬手機壁紙高清圖片 瀏覽:544
可愛毛絨玩具圖片大全 瀏覽:630