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

什么是 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>

HTML5图片处理（请使用谷歌浏览器）相关推荐

html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
图片动画效果html5,8个实用炫酷的HTML5图片动画应用
原标题:8个实用炫酷的HTML5图片动画应用近期我们发布了不少关于HTML5和jQuery的图片动画应用,很多都比较实用,也有一些效果非常炫酷,比如一些HTML5 3D图片动画特效.本文精选了8个实 ...
html css图片展开动画,8个实用炫酷的HTML5图片动画应用
本文作者html5tricks,转载请注明出处近期我们发布了不少关于 1.CSS3/jQuery实现移动端滑动图片层叠效果这是一款基于jQuery和CSS3的图片层叠插件,这和我们之前介绍的CSS ...
html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html5如何让多张图片重叠,HTML5图片层叠的实现示例
最近在跟的一个深圳屋祺项目,由于一些内部原因这次我们需要自己写静态页面.兵来将挡水来土掩,既然组织需要那就做呗.其中有一个页面布局如下所示, 红色方框标注的部分是由三张图片组合而成,各部分图片如下: ...
10款让人惊叹的HTML5图片动画特效
现在网页上的图片已经不再是10几年前那种低像素的静态图片了,有了HTML5和jQuery,我们可以让一张普通的图片变得多姿多彩,特别是利用HTML5,还可以实现一些很复杂的图片动画特效.下面分享的10 ...
浮士德html5图片裁剪器2016开源版
前言最近刚刚好整理浮士德头像裁剪的flash版本,为了某些低级浏览器的兼容着想,既然已经做好了flash版本了,那么,现代浏览器的html5版本和ipad版,移动版也要做一些处理和打包. 兼容性兼 ...
html5图片裁剪控件原型【含缩放，旋转，拖动功能】---2、核心代码
推荐这一篇文章是早年为了解决图片裁剪的探索性文章,现在已经开放出了falsh版及html5版本的图片裁剪插件,各位有时间可以看看: 浮士德html5图片裁剪器2016开源版浮士德头像裁剪flash ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
炫酷实用 7款jQuery/HTML5图片应用
2019独角兽企业重金招聘Python工程师标准>>> jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图 ...

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

HTML5图片处理（请使用谷歌浏览器）相关推荐

最新文章

热门文章