canvas添加水印

来源：互联网发布：java算法数据结构编辑：程序博客网时间：2024/06/03 13:34
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body style="background: black;"><canvas id="myCanvas" style="display: block;border: 10px solid #aaa;margin: 0 auto;">    你的浏览器不支持canvas</canvas><canvas id="watermarksCanvas" style="display: none;border: 1px solid #aaa;margin: 0 auto;">    你的浏览器不支持canvas</canvas><input type="range" id="scale_range" min="0.5" max="3.0" value="1.0" step="0.01" style="display: block;margin: 20px auto;width: 800px;"><script>    var myCanvas = document.getElementById("myCanvas");    var context = myCanvas.getContext("2d");    var watermarksCanvas = document.getElementById("watermarksCanvas");    var watermarksContext = watermarksCanvas.getContext("2d");    var slider = document.getElementById("scale_range");    var image = new Image();    window.onload = function (){        myCanvas.width = 300;        myCanvas.height = 200;        var scale = slider.value;        image.src = '1.jpg';        image.onload = function () {            // context.drawImage(image,750,750,200,200,0,0,800,800);            drawImageByScale(scale);            slider.onmousemove = function () {                scale = slider.value;                drawImageByScale(scale);            }            //watermarks            watermarksCanvas.width = 100;            watermarksCanvas.height = 50;            watermarksContext.font = "bold 7px Arial";            watermarksContext.lineWidth = "1";            watermarksContext.fillStyle = "rgba(0,0,255,0.5)";            watermarksContext.textBaseline = "middle";            watermarksContext.fillText("==MyCanvas WaterMarks==",0,20);        }        function drawImageByScale(scale) {            var imageWidth = 300*scale;            var imageHeight = 200*scale;            // var sx = imageWidth / 2 - myCanvas.width / 2;            //var sy = imageHeight /2 - myCanvas.height / 2;            var dx = myCanvas.width / 2 - imageWidth / 2;            var dy = myCanvas.height /2 - imageHeight / 2;            context.clearRect(0,0,myCanvas.width,myCanvas.height);            context.drawImage(image,dx,dy,imageWidth,imageHeight);            context.drawImage(watermarksCanvas,myCanvas.width - watermarksCanvas.width,                myCanvas.height - watermarksCanvas.height);            // context.drawImage(image,sx,sy,myCanvas.width,myCanvas.height,0,0,myCanvas.width,myCanvas.height);        }    }</script></body></html>
阅读全文
0 0