版权声明: https://blog.csdn.net/weixin_38500689/article/details/79564034
canvas控制图像旋转:
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<input type="button" id="angle_v" onclick="myRotate()" value="旋转" />
js:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img_w,img_h;
// ctx.fillRect(50,25,100,50);
var imgsc = new Image();
imgsc.src = "./s_02.png";
img_w = imgsc.width;
img_h = imgsc.height;
ctx.drawImage(imgsc,50,100,imgsc.width,imgsc.height);
var angle = 0;
function myRotate()
{
ctx.translate(50+imgsc.width/2,100+imgsc.height/2);
ctx.clearRect(-imgsc.width/2,-imgsc.height/2,imgsc.width,imgsc.height);//x2 是为了把原来的图全部抹掉(不留下痕迹)
angle = 90;
ctx.rotate(angle*Math.PI/180);
ctx.drawImage(imgsc,-imgsc.width/2,-imgsc.height/2);
ctx.translate(-50-imgsc.width/2,-100-imgsc.height/2);
// setTimeout(myRotate,1000);
}
canvas实现图像边缘检测算法:
<!DOCTYPE HTML>
<html>
<head>
<title>检测图像的边缘</title>
<script>
var image = new Image();
window.onload = function () {
image.onload = demo;
image.src = "lugage.png";
};
function demo() {
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
// 在canvas上描画图像(之后检出的边缘图像会重叠之上)
context.drawImage(image, 0, 0);
// 获取图像数据
var input = context.getImageData(0, 0, canvas.width, canvas.height);
//生成盛放数据的空ImageData对象
var output = context.createImageData(canvas.width, canvas.height);
// 定义变量
// (这里使用了 input.width 与 input.height
// 使用了canvas.width 与 canvas.height时,
// 在高解像度的显示屏上的显示是不同的
var w = input.width, h = input.height;
var inputData = input.data;
var outputData = output.data;
// 检测边缘[0 1 0; 1 -4 1; 0 0 0]。
for (var y = 1; y < h-1; y += 1) {
for (var x = 1; x < w-1; x += 1) {
for (var c = 0; c < 3; c += 1) {
var i = (y*w + x)*4 + c;
outputData[i] = 127 + -inputData[i - w*4 - 4] - inputData[i - w*4] - inputData[i - w*4 + 4] +
-inputData[i - 4] + 8*inputData[i] - inputData[i + 4] +
-inputData[i + w*4 - 4] - inputData[i + w*4] - inputData[i + w*4 + 4];
}
outputData[(y*w + x)*4 + 3] = 255; // alpha
}
}
//描画图像
context.putImageData(output, 0, 0);
}
</script>
</head>
<body>
<h2>图像文件边缘检测演示及源代码</h2>
<h3>使用的图像</h3>
<p><img src="lugage.png" alt="Edge detection"></p>
<h3>在原来图像上描画使用canvas检测出的图像边缘</h3>
<canvas width="425" height="318"></canvas>
</body>
</html>
canvas实现拖动进度条实现图像放大效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaaaaa;">
你的浏览器不支持canvas
</canvas>
<input type="range" id="scale-range" min=".5" max="3" step="0.1" value="1" style="display: block;margin: 20px auto; width: 400px" />
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var slider = document.getElementById("scale-range");
var image = new Image();
window.onload = function(){
canvas.width = 480;
canvas.height = 300;
var scale = slider.value;
image.src = "./bj.jpg";
image.onload = function () {
//context.drawImage(image, 0 , 0 ,canvas.width, canvas.height);
drawImageByScale(scale);
slider.onclick = function () {
scale = slider.value;
drawImageByScale(scale);
}
};
function drawImageByScale(scale) {
var imagewidth = 480 * scale;
var imageheight = 300 * 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);
}
}
</script>
</body>
</html>