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

最新推荐文章于 2023-04-24 17:10:59 发布

邹琼俊

最新推荐文章于 2023-04-24 17:10:59 发布

阅读量5.9k

点赞数 1

分类专栏： ASP.NET WebForm开发文章标签： html5 function 浏览器 image button xhtml

本文链接：https://blog.csdn.net/zouyujie1127/article/details/6623080

版权

ASP.NET WebForm开发专栏收录该内容

77 篇文章 0 订阅

订阅专栏

什么是 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();" />