亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

js初級(jí)應(yīng)用之canvas制作圖片水印

xiaowugui666 / 1917人閱讀

摘要：在出現(xiàn)之前，項(xiàng)目中的圖片添加水印的需求，必定是后端同學(xué)們來處理的，但是出來之后，前端終于可以站出來說，這個(gè)需求，交給我來壯哉我大前端，上周的任務(wù)就是在前端處理水印的效果，這個(gè)效果最重要的邏輯其實(shí)就幾行代碼，至于如何優(yōu)雅的將這些簡單的邏輯封裝

在canvas出現(xiàn)之前，項(xiàng)目中的圖片添加水印的需求，必定是后端同學(xué)們來處理的，但是canvas出來之后，前端終于可以站出來說，這個(gè)需求，交給我來！壯哉我大前端~，上周的任務(wù)就是在前端處理水印的效果，這個(gè)效果最重要的邏輯其實(shí)就幾行代碼，至于如何優(yōu)雅的將這些簡單的邏輯封裝成方法并入公司的前端庫，應(yīng)該是一個(gè)仁者見仁智者見智的問題，在此不表。

好了，廢話不表，開始干活。

在html中準(zhǔn)備canvas環(huán)境 

Your browser does not support the HTML5 canvas tag.
加載圖片,這張圖片有可能是已經(jīng)存在的，也有可能是從后端通過ajax取過來的，不管是哪種方式，我們都需要一個(gè)img對(duì)象來保存這張圖,在例子中，我們從后臺(tái)取過來一張url為./img/demo.jpg的圖片 
var img = new Image();   
img.src = "./img/demo.jpg";
在圖片加載完成之后，調(diào)用canvas的drawImage(),將我們的圖片繪制在canvas的圖層上面 
img.onload=function(){
       var canvas=document.getElementById("myCanvas");
       var ctx=canvas.getContext("2d");
       ctx.drawImage(img,0,0);
}
注意，調(diào)用drawImage()函數(shù)之前，請(qǐng)確保你的圖片已經(jīng)加載ok，否則你會(huì)看到canvas是空白的，這是因?yàn)樵趫D片還沒有絕對(duì)加載到頁面之前，你直接調(diào)用了drawImage(),而這個(gè)時(shí)候，img對(duì)象還是空的。
在canvas上繪制好圖片之后，回到onload函數(shù)中，利用我們?cè)谏弦徊街蝎@取的ctx對(duì)象，繼續(xù)繪制水印，font屬性可以自定義水印的大小以及字體，fillStyle()方法可以自定義水印的顏色以及透明度，fillStyle()則完成最后的填充以及水印的位置定位 
   ctx.font="20px microsoft yahei";
   ctx.fillStyle = "rgba(255,255,255,0.5)";
   ctx.fillText("my images",100,100);
ok，如果你進(jìn)行到這一步，初步的水印效果應(yīng)該以及達(dá)成了，如果你還需要更多的效果，那就趕快去看canvas的api吧，上圖，看看我的水印

最后，貼一個(gè)源代碼，想看到效果的同學(xué)，直接拷貝我的html代碼，將里面的圖片url替換成你本地的url，就可以了 



    
    Document



Your browser does not support the HTML5 canvas tag.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86133.html

相關(guān)文章

  • canvas離屏技術(shù)與放大鏡實(shí)現(xiàn)

    摘要：教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步原文離屏技術(shù)與放大鏡實(shí)現(xiàn)。為了方便講解，本文分為個(gè)應(yīng)用部分實(shí)現(xiàn)水印和中心縮放實(shí)現(xiàn)放大鏡什么是離屏技術(shù)學(xué)習(xí)和濾鏡實(shí)現(xiàn)介紹過接口。這就是離屏技術(shù)。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步>>> （原文）canvas 離屏技術(shù)與放大鏡實(shí)現(xiàn)。 更多討論或者錯(cuò)誤提交，也請(qǐng)移步。 利用canvas除了可以實(shí)現(xiàn)濾鏡，還可以...

    wangbjun 評(píng)論0 收藏0

  • canvas離屏技術(shù)與放大鏡實(shí)現(xiàn)

    摘要：教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步原文離屏技術(shù)與放大鏡實(shí)現(xiàn)。為了方便講解，本文分為個(gè)應(yīng)用部分實(shí)現(xiàn)水印和中心縮放實(shí)現(xiàn)放大鏡什么是離屏技術(shù)什么是離屏技術(shù)學(xué)習(xí)和濾鏡實(shí)現(xiàn)介紹過接口。這就是離屏技術(shù)。教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步>>> （原文）canvas 離屏技術(shù)與放大鏡實(shí)現(xiàn)。 更多討論或者錯(cuò)誤提交，也請(qǐng)移步。 利用canvas除了可以實(shí)現(xiàn)濾鏡...

    MartinDai 評(píng)論0 收藏0

  • 手摸手教你用canvas實(shí)現(xiàn)給圖片添加平鋪水印

    摘要：最近項(xiàng)目中遇到一個(gè)需求，需要把一張圖片加上平鋪的水印類似這樣的效果首先想到的是用完成這種功能，因?yàn)槲抑耙矝]有接觸過，所以做這個(gè)功能的時(shí)候，就是一步一步的摸索中學(xué)習(xí)，過程還是挺的，接下來跟我一步步來實(shí)現(xiàn)這個(gè)功能以及發(fā)現(xiàn)一些的坑吧。 最近項(xiàng)目中遇到一個(gè)需求，需要把一張圖片加上平鋪的水印 類似這樣的效果showImg(https://segmentfault.com/img/remote/...

    崔曉明 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<