摘要:在出現之前,項目中的圖片添加水印的需求,必定是后端同學們來處理的,但是出來之后,前端終于可以站出來說,這個需求,交給我來壯哉我大前端,上周的任務就是在前端處理水印的效果,這個效果最重要的邏輯其實就幾行代碼,至于如何優雅的將這些簡單的邏輯封裝
在canvas出現之前,項目中的圖片添加水印的需求,必定是后端同學們來處理的,但是canvas出來之后,前端終于可以站出來說,這個需求,交給我來!壯哉我大前端~,上周的任務就是在前端處理水印的效果,這個效果最重要的邏輯其實就幾行代碼,至于如何優雅的將這些簡單的邏輯封裝成方法并入公司的前端庫,應該是一個仁者見仁智者見智的問題,在此不表。
好了,廢話不表,開始干活。
在html中準備canvas環境
加載圖片,這張圖片有可能是已經存在的,也有可能是從后端通過ajax取過來的,不管是哪種方式,我們都需要一個img對象來保存這張圖,在例子中,我們從后臺取過來一張url為./img/demo.jpg的圖片
var img = new Image();
img.src = "./img/demo.jpg";
在圖片加載完成之后,調用canvas的drawImage(),將我們的圖片繪制在canvas的圖層上面
img.onload=function(){
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.drawImage(img,0,0);
}
注意,調用drawImage()函數之前,請確保你的圖片已經加載ok,否則你會看到canvas是空白的,這是因為在圖片還沒有絕對加載到頁面之前,你直接調用了drawImage(),而這個時候,img對象還是空的。
在canvas上繪制好圖片之后,回到onload函數中,利用我們在上一步中獲取的ctx對象,繼續繪制水印,font屬性可以自定義水印的大小以及字體,fillStyle()方法可以自定義水印的顏色以及透明度,fillStyle()則完成最后的填充以及水印的位置定位
ctx.font="20px microsoft yahei";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText("my images",100,100);
ok,如果你進行到這一步,初步的水印效果應該以及達成了,如果你還需要更多的效果,那就趕快去看canvas的api吧,上圖,看看我的水印
最后,貼一個源代碼,想看到效果的同學,直接拷貝我的html代碼,將里面的圖片url替換成你本地的url,就可以了
Document
Your browser does not support the HTML5 canvas tag.
- //準備img對象
- var img = new Image();
- img.src = "./img/demo.jpg";
-
- // 加載完成開始繪制
- img.onload=function(){
- //準備canvas環境
- var canvas=document.getElementById("myCanvas");
- var ctx=canvas.getContext("2d");
- // 繪制圖片
- ctx.drawImage(img,0,0);
- // 繪制水印
- ctx.font="20px microsoft yahei";
- ctx.fillStyle = "rgba(255,255,255,0.5)";
- ctx.fillText("my images",100,100);
- }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86133.html
摘要:教程所示圖片使用的是倉庫圖片,網速過慢的朋友請移步原文離屏技術與放大鏡實現。為了方便講解,本文分為個應用部分實現水印和中心縮放實現放大鏡什么是離屏技術學習和濾鏡實現介紹過接口。這就是離屏技術。 教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步>>> (原文)canvas 離屏技術與放大鏡實現。 更多討論或者錯誤提交,也請移步。 利用canvas除了可以實現濾鏡,還可以...
摘要:教程所示圖片使用的是倉庫圖片,網速過慢的朋友請移步原文離屏技術與放大鏡實現。為了方便講解,本文分為個應用部分實現水印和中心縮放實現放大鏡什么是離屏技術什么是離屏技術學習和濾鏡實現介紹過接口。這就是離屏技術。教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步>>> (原文)canvas 離屏技術與放大鏡實現。 更多討論或者錯誤提交,也請移步。 利用canvas除了可以實現濾鏡...
摘要:最近項目中遇到一個需求,需要把一張圖片加上平鋪的水印類似這樣的效果首先想到的是用完成這種功能,因為我之前也沒有接觸過,所以做這個功能的時候,就是一步一步的摸索中學習,過程還是挺的,接下來跟我一步步來實現這個功能以及發現一些的坑吧。 最近項目中遇到一個需求,需要把一張圖片加上平鋪的水印 類似這樣的效果showImg(https://segmentfault.com/img/remote/...
閱讀 1872·2021-11-25 09:43
閱讀 2149·2021-11-19 09:40
閱讀 3431·2021-11-18 13:12
閱讀 1741·2021-09-29 09:35
閱讀 663·2021-08-24 10:00
閱讀 2510·2019-08-30 15:55
閱讀 1716·2019-08-30 12:56
閱讀 1819·2019-08-28 17:59
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要