HTML5图片处理（请使用谷歌浏览器）

最新推荐文章于 2022-07-21 13:54:01 发布

iteye_6481

最新推荐文章于 2022-07-21 13:54:01 发布

阅读量205

点赞数

文章标签： xhtml javascript ViewUI

什么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript">
//美女图的 Base64 编码
IMG_SRC = '../images/青青.jpg' //此处请修改图片的路径
function Show() {
var ctx = document.getElementById("canvas1").getContext("2d");
img = new Image();
img.onload = function () {
ctx.drawImage(img,30, 30);
}
img.src = IMG_SRC;
}
function Clear() {
var ctx = document.getElementById("canvas1").getContext("2d");
ctx.clearRect(0, 0, 250, 300);
}
function Scale1() {
var scale = event.target.value/10;
var ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0, 0, 250, 300);
img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0,img.width*scale,img.height);
}
img.src = IMG_SRC;
}
function Scale2(){
//计算比例
var scale=event.target.value/10
//获取画布对象
ctx = document.getElementById("canvas2").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
//创建图像对象
img=new Image();
//图像被装入后触发
img.οnlοad=function(){
//纵向缩放绘制
ctx.drawImage(img,0,0,img.width,img.height*scale);
}
//指定图像源
img.src = IMG_SRC;
}
function Scale3() {
var scale = event.target.value / 10;
var ctx = document.getElementById("canvas2").getContext("2d");
ctx.clearRect(0, 0, 250, 300);
img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);
}
img.src = IMG_SRC;
}
function Scale4() {
var scale = event.target.value;
var ctx = document.getElementById("canvas2").getContext("2d");
ctx.clearRect(0, 0, 250, 300);
img = new Image();
img.onload = function () {
var n1 = img.width / scale;
var n2 = img.height / scale;
for (var i = 0; i < n1; i++)
for (var j = 0; j < n2; j++)
ctx.drawImage(img, i * img.width / scale, j * img.height / scale, img.width / scale, img.height / scale);
}
img.src = IMG_SRC;
}
function Patterns() {
var ctx = document.getElementById("canvas3").getContext("2d");
img = new Image();
img.src = IMG_SRC;
img.onload = function () {
var ptrn = img.createPattern(img, 'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 250, 300);
}
}
function ClearPatterns() {
var ctx = document.getElementById("canvas3").getContext("2d");
ctx.clearRect(0, 0, 250, 300);
}
</script>
</head>
<body>
<table width="100%"><tr>
<td>
<canvas id="canvas1" width="250" height="300px" style="background-color:Black">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器或者 FireFox 浏览器
</canvas><br />
<input type="button" value="显示美女" οnclick="Show();" />
<input type="button" value="清空" οnclick="Clear();" />
</td><td>
<canvas id="canvas2" width="250" height="300" style="background-color:black">
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器或者 FireFox 浏览器
</canvas><br/>注意：下面的 Range 控件只能在 Google Chrome 浏览器中正确呈现<br />
横向缩放<input type="range" min="1" max="20" οnchange="Scale1(event)" /><br />
纵向缩放<input type="range" min="1" max="20" οnchange="Scale2(event)" /><br/>
按比例缩放<input type="range" min="1" max="20" οnchange="Scale3(event)" /><br />
平铺<input type="range" min="1" max="20" value="1" οnchange="Scale4(event)" /><br />
</td></tr>
<tr><td>
<canvas id="canvas3" width="250px" height="300" style="background-color:Black"></canvas>
<input type="button" value="贴图" οnclick="Patterns();" />
<input type="button" value="清空" οnclick="ClearPatterns();" />

</td><td></td></tr></table>
</body>
</html>

iteye_6481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5图片处理（请使用谷歌浏览器）

什么是 HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN...
复制链接

扫一扫