您的位置：首页 > Web前端 > HTML5

HTML5 Canvas图像缩放

2015-02-10 10:47 260 查看

<html>

<head>

<meta charset="gbk">

<title>图像缩放与水印</title>

<style>

body {

background: rgba(100, 145, 250, 0.3);

}

#scaleSlider {

vertical-align: 10px;

width: 100px;

margin-left: 90px;

}

#canvas {

margin: 10px 20px 0px 20px;

border: thin solid #aaaaaa;

cursor: crosshair;

padding: 0;

}

#controls {

margin-left: 15px;

padding: 0;

}

#scaleOutput {

position: absolute;

width: 60px;

height: 30px;

margin-left: 10px;

vertical-align: center;

text-align: center;

color: blue;

font: 18px Arial;

text-shadow: 2px 2px 4px rgba(100, 140, 250, 0.8);

}

</style>

</head>

<body>

<div id='controls'>

<output id='scaleOutput'>1.0</output>

<input id='scaleSlider' type='range' min='1' max='3.0' step='0.01' value='1.0'/>

</div>

<canvas id='canvas' width='800' height='520'>Canvas not supported</canvas>

<script>

var canvas = document.getElementById('canvas'),

context = canvas.getContext('2d'),

offscreenCanvas = document.createElement('canvas');

offscreenContext = offscreenCanvas.getContext('2d'),

image = new Image(),

scaleOutput = document.getElementById('scaleOutput');

scaleSlider = document.getElementById('scaleSlider');

scale = 1.0,

MINIMUM_SCALE = 1.0,

MAXIMUM_SCALE = 3.0;

function drawScaled() {

var w = canvas.width,

h = canvas.height,

sw = w * scale,

sh = h * scale;

//将离屏offscreenCanvas中的内容放大或缩小

context.drawImage(offscreenCanvas, 0, 0,

offscreenCanvas.width, offscreenCanvas.height, -sw/2 + w/2, -sh/2 + h/2, sw, sh);

}

function drawScaleText(value) {

var text = parseFloat(value).toFixed(2);

var percent = parseFloat(value - MINIMUM_SCALE) /parseFloat(MAXIMUM_SCALE - MINIMUM_SCALE);

scaleOutput.innerText = text;

percent = percent < 0.35 ? 0.35 : percent;

scaleOutput.style.fontSize = percent*MAXIMUM_SCALE/1.5 + 'em';

}

//画两行文字

function drawWatermark(context) {

var lineOne = 'Copyright',

lineTwo = 'Acme, Inc.',

textMetrics = null,

FONT_HEIGHT = 128;

context.save();

context.fillStyle = 'rgba(100,140,230,0.5);';

context.strokeStyle = 'yellow';

context.shadowColor = 'rgba(50, 50, 50, 1.0)';

context.shadowOffsetX = 5;

context.shadowOffsetY = 5;

context.shadowBlur = 10;

context.font = FONT_HEIGHT + 'px Arial';

textMetrics = context.measureText(lineOne);

context.translate(canvas.width/2, canvas.height/2);

context.fillText(lineOne, -textMetrics.width/2, 0);

context.strokeText(lineOne, -textMetrics.width/2, 0);

textMetrics = context.measureText(lineTwo);

context.fillText(lineTwo, -textMetrics.width/2, FONT_HEIGHT);

context.strokeText(lineTwo, -textMetrics.width/2, FONT_HEIGHT);

context.restore();

}

//事件处理.........

scaleSlider.onchange = function(e) {

scale = e.target.value;

if (scale < MINIMUM_SCALE) scale = MINIMUM_SCALE;

else if (scale > MAXIMUM_SCALE) scale = MAXIMUM_SCALE;

drawScaled();//这里处理离屏

drawScaleText(scale);

}

// 初始化...............

offscreenCanvas.width = canvas.width;

offscreenCanvas.height = canvas.height;

image.src='img/new/2.png',

image.onload = function(e) {

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

offscreenContext.drawImage(image, 0, 0,canvas.width, canvas.height);

drawWatermark(context);

drawWatermark(offscreenContext);

drawScaleText(scaleSlider.value);

};

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航