添加水印是在我上一章縮放圖片的大小的基礎(chǔ)上為圖片添加水印。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片縮放</title>
</head>
<body style="background: #000;">
<canvas id="canvas" style="display: block;margin:0 auto;background: #fff;"></canvas>
<input type="range" name="" id="scale-canvas" min="0.5" max="3.0" value="1.0" step="0.01" style="display: block;width:300px;margin:0 auto;">
<canvas id="waterMark-canvas" style="display: none; margin:0 auto;"></canvas>
<script type="text/javascript">
var waterMark = document.getElementById('waterMark-canvas');
var waterContext = waterMark.getContext('2d');
var range = document.getElementById('scale-canvas');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
window.onload = function(){
canvas.width = 418;
canvas.height =435;
image.src = '2.jpg';
var scale = range.value;
image.onload = function () {
drawImageByRange(scale);
range.onmousemove = function () {
scale = range.value;
drawImageByRange(scale);
}
}
}
waterMark.width = 210;
waterMark.height = 80;
waterContext.font = 'bold 18px Arial';
waterContext.fillStyle = '#f12';
waterContext.lineWidth = 3;
waterContext.textBaseline = 'middle';
waterContext.fillText('congcongnanian@.com',0 , 35);
function drawImageByRange(scale){
var imageWidth = canvas.width * scale ;
var imageHeight = canvas.height * scale ;
var dx = canvas.width / 2 - imageWidth / 2;
var dy = canvas.height / 2 - imageHeight / 2;
context.clearRect( 0 , 0 ,canvas.width , canvas.height);
context.drawImage(image, dx , dy , imageWidth , imageHeight );
context.drawImage(waterMark , canvas.width -waterMark.width ,canvas.height -waterMark.height );
}
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
