效果图

wKiom1iF1CqDxPuSAAJNLGOJhww412.png-wh_50

html结构

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Canvas</title>

<link rel="stylesheet" href="">

<style>

body{

background-color: #000;

}


#canvas{

display: block;

margin: 0 auto;

border: 1px solid #aaa;

}


.range-style{

display: block;

margin: 20px auto;

width: 800px;

}


.watermark-canvas-style{

display: block;

margin: 0 auto;

border: 1px solid #aaa;

}

</style>

</head>

<body>

<canvas id="canvas"></canvas>

<input type="range" class="range-style" id="scale-range" min="0.5" max="3.0" step = "0.01" value="0.5">

<canvas id="watermark-canvas" class="watermark-canvas-style"></canvas>

</body>

</html>

js脚本

<script>

var canvas = document.getElementById("canvas");

var slider = document.getElementById("scale-range");

var watermarkCanvas = document.getElementById("watermark-canvas");


var context = canvas.getContext("2d");

var watermarkContext = watermarkCanvas.getContext("2d");


var image = new Image();


window.onload = function(){

canvas.width = 600;

canvas.height = 450;


var scale = slider.value;

console.log(scale);


image.src = "20170122161717.png";

image.onload = function(){

// context.drawImage(image,0,0,canvas.width,canvas.height);

drawImageByScale(scale);


slider. = function(){

scale = slider.value;

drawImageByScale(scale);

}

}


watermarkCanvas.width = 500;

watermarkCanvas.height = 100;


watermarkContext.font = "bold 50px Arial";

watermarkContext.fillStyle = "rgba(255,255,255,0.5)";

watermarkContext.textBaseline = "middle";

watermarkContext.fillText("%:)%yunshuo%:)%",20,50);

}



function drawImageByScale(scale){

var imageWidth = 600 * scale;

var imageHeight = 450 * scale;


// var sx = imageWidth / 2 - canvas.width / 2;

// var sy = imageHeight / 2 - canvas.height / 2;


// context.drawImage(image,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height);

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(watermarkCanvas,canvas.width - watermarkCanvas.width,canvas.height - watermarkCanvas.height);


}


</script>

QQ截图20181014143201.jpg