前言
var watermarkInfo = { fontSize: 18, // 像素值 fontFamily: 'cursive', content: '', color: '#fffbf0' };
實現過程中的問題與解決方案
代碼什么的就不全部貼上來了,只是講一下其中遇到的一些問題與實現思路。
這些問題您可能已經大多了解了,不過為了兼顧所有人,所以還是會將一些比較簡單的技術點也講一下。
整個實現過程中遇到的問題如下
- 獲取圖片
- 將上傳文件轉換為圖片
- 在圖片上加水印
- 拖動文字加水印
- 將最后修改的圖片下載下來
獲取圖片
獲取圖片實際上就是用到文件上傳控件,也就是
<input id="target_file" type="file"/>
然而原始的文件上傳控件比較丑,所以隱藏此控件,並加了一個新的按鈕在它前面
<a class="btn" id="btn_select_file" href="jacascript:void(0)">選擇背景圖</a> <input id="target_file" type="file" style="display:none" />
而想實現點擊選擇背景圖按鈕去選擇文件,用以下代碼即可
// 按下選擇的背景圖 $('#btn_select_file').click(function () { $('#target_file').click(); });
選擇文件后,文件上傳控件會觸發change事件,此時可以拿到文件。
$('#target_file').change(function (event) { var imgFile = event.target.files[0]; ...... });
將文件轉換為圖片
文件轉換為圖片實際上首先需要讀取文件,這里需要用到FileReader。
function setImgIntoCanvas(imgFile) { var reader = new FileReader(); reader.onloadend = function (e) { var dataURL = e.target.result; img.onload = function (event) { var ctx = document.getElementById('target_canvas').getContext('2d'); //將canvas大小設置為和圖片一樣大 setCanvasSize(event.target.naturalWidth, event.target.naturalHeight); ctx.drawImage(img, 0, 0); setCanvasImgToDownloadLink(); }; img.src = dataURL; }; reader.readAsDataURL(imgFile); resetWatermark(); };
以上為核心代碼,通過 FileReader的 readAsDataURL函數讀取文件可以獲得Base64格式的圖片數據,將圖片數據賦值給一個Image對象。
在圖片上加水印
拖動文字加水印
canvas雖然也能捕獲事件,獲取鼠標位置,並實現拖動文字效果,但是實現起來太麻煩。
所以這里采用更簡單的方案。
當我們設置水印時,直接將文字渲染到canvas上,然后在文字上方安放一個顏色透明的內容為水印文字的span元素。
然后我們在這個span元素上加drag事件。
HTML5拖動功能網上一大堆,這里就不講了。
主要講一下實現思路:
在開始拖動時,重新用圖片渲染canvas,使得之前渲染的文字消失。
在結束拖動時,獲取到具體的位置,再重新將文字渲染進canvas。
這里說起來簡單,其實還是有一些細節,包括css和js的配合,比如文字拖動到邊界時的處理方式,又比如文字拖動到邊界出現換行的情況。
還有一些其他的小坑點,需要你自己看代碼去體會了。
這里貼出部分代碼:
// 綁定移動水印相關事件 var bindEvent4DragWatermark = function () { $('#watermark').on('dragstart', function (e) { var ctx = document.getElementById('target_canvas').getContext('2d'); ctx.clearRect(0, 0, $('#target_canvas').width(), $('#target_canvas').height()); ctx.drawImage(img, 0, 0); // 顯示可拖拽水印 $(this).addClass('selected'); watermarkInfo.offsetX = e.originalEvent.offsetX + canvasInfo.left; watermarkInfo.offsetY = e.originalEvent.offsetY + canvasInfo.top; }); // 讓水印跟着鼠標移動 $('#watermark').on('drag', function (e) { var x = e.originalEvent.pageX; var y = e.originalEvent.pageY; if (x === 0 && y === 0) { return; } x -= watermarkInfo.offsetX; y -= watermarkInfo.offsetY; $('#watermark').css('left', x).css('top', y); }); $('#watermark').on('dragend', function (e) { // 調整位置,使水印無法超出canvas邊界 var x = e.originalEvent.pageX - watermarkInfo.offsetX; var y = e.originalEvent.pageY - watermarkInfo.offsetY; if (x < 0) { x = 0; } if (y < 0) { y = 0; } var maxX = canvasInfo.width - watermarkInfo.width; var maxY = canvasInfo.height - watermarkInfo.height; if (x > maxX) { x = maxX; } if (y > maxY) { y = maxY; } $('#watermark').css('left', x).css('top', y); // 拖拽完水印,文本隱藏 $('#watermark').removeClass('selected'); setTextIntoCanvas(); }); // 讓鼠標不顯示禁用樣式 $('#canvas-container').on('dragover', function (e) { e.preventDefault(); }); }
將最后修改的圖片下載下來
之前我們已經講到了用canvas的toDataURL函數獲取最后的圖片數據,然后關於下載就需要用到一個HTML5的download屬性。
<a class="btn" id="download_file" href="#" download="水印圖片">下載合成圖片</a>
接下來是設置圖片數據的代碼
/** * 設置canvas圖像到下載鏈接上 */ function setCanvasImgToDownloadLink() { var imgData = document.getElementById('target_canvas').toDataURL(); $('#download_file').attr('href', imgData); };
將功能寫進博客里
至於這部分首先要申請JS權限。
其次如果觀察仔細,還可以在我的代碼中看到下列代碼
// 此處通過這種方式將html插入,是因為博客園自動屏蔽了canvas標簽和download屬性 var initHtmlConstruct = function () { $('#canvas-container').text('').append('<canvas id="target_canvas" width="100" height="100">瀏覽器不支持此功能,請升級</canvas><span draggable="true" id="watermark"></span>') $('#toolbar').append('<a class="btn" id="download_file" href="#" download="水印圖片">下載合成圖片</a>'); }
至於原因注釋里也寫了,是因為博客園的編輯器屏蔽了canvas標簽和download屬性。
總結
總的來說,這其實是一個很小的功能,但是要把它做得好用一點,涉及到的知識點並不少,也不並不僅僅我提到的這一點(比如canvas的透明度樣式並不是用圖片哦,而是用css樣式,還是從《css揭秘》那本書上學到的)。
當然這個東西或多或少還是有那么一些瑕疵,也存在一些兼容性上的問題,不過對我而言夠用就好。
也希望上面介紹的一些東西對您也有收獲。