js image 翻转_创建HTML5 Image Effects应用–添加水平翻转

最新推荐文章于 2022-02-23 15:54:45 发布
最新推荐文章于 2022-02-23 15:54:45 发布
阅读量255 收藏
点赞数
文章标签： html css less python js ViewUI
原文链接：https://www.script-tutorials.com/html5-image-effects-app-adding-horizontal-flip/
版权

js image 翻转

HTML5 Image Effects App - Adding Horizontal Flip
HTML5 Image Effects App - Adding Horizontal Flip

HTML5 image effects – horizontal flip. Today we going to continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that you like this too. Today we will be adding new filter – Horizontal Flip.

HTML5图像效果–水平翻转。 今天我们将继续HTML5 canvas示例，希望您喜欢本系列文章。 即使是对我来说，使用图形，图像也能带来乐趣。 确保您也喜欢这个。 今天，我们将添加新的过滤器–水平翻转。

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are all html of my demo

这是我的演示的全部html

index.html (index.html)

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Image Effects App - Adding Horizontal Flip | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="column1">
                Reset to:<br />
                <input type="button" onclick="resetToColor()" value="Color" />
                <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><hr />
                Effects:<br />
                <input type="button" onclick="resetToBlur()" value="1. Blur" /><br />
                <input type="button" onclick="resetToNoise()" value="2. Add noise" /><br />
                <input type="button" onclick="resetToInvert()" value="3. Invert colors" />
                <input type="button" onclick="resetToFlopHor()" value="4. Horizontal Flip" /><hr />
                Adjustment:<br />
                <input type="button" onclick="changeGrayValue(0.1)" value="Lighter" /><br />
                <input type="button" onclick="changeGrayValue(-0.1)" value="Darker" /><br />
                Red: <input type="button" onclick="changeColorValue('er', 10)" value="More" />
                <input type="button" onclick="changeColorValue('er', -10)" value="Less" /><br />
                Green: <input type="button" onclick="changeColorValue('eg', 10)" value="More" />
                <input type="button" onclick="changeColorValue('eg', -10)" value="Less" /><br />
                Blue: <input type="button" onclick="changeColorValue('eb', 10)" value="More" />
                <input type="button" onclick="changeColorValue('eb', -10)" value="Less" />
                Blur: <input type="button" onclick="changeBlurValue(1)" value="More" />
                <input type="button" onclick="changeBlurValue(-1)" value="Less" /><br />
            </div>
            <div class="column2">
                <canvas id="orig" width="500" height="333"></canvas>
                <canvas id="panel" width="500" height="333"></canvas>
            </div>
            <div style="clear:both;"></div>
        </div>
        <footer>
            <h2>HTML5 Image Effects App - Adding Horizontal Flip</h2>
            <a href="https://www.script-tutorials.com/html5-image-effects-app-adding-horizontal-flip" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Image Effects App - Adding Horizontal Flip | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="column1">
                Reset to:<br />
                <input type="button" onclick="resetToColor()" value="Color" />
                <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><hr />
                Effects:<br />
                <input type="button" onclick="resetToBlur()" value="1. Blur" /><br />
                <input type="button" onclick="resetToNoise()" value="2. Add noise" /><br />
                <input type="button" onclick="resetToInvert()" value="3. Invert colors" />
                <input type="button" onclick="resetToFlopHor()" value="4. Horizontal Flip" /><hr />
                Adjustment:<br />
                <input type="button" onclick="changeGrayValue(0.1)" value="Lighter" /><br />
                <input type="button" onclick="changeGrayValue(-0.1)" value="Darker" /><br />
                Red: <input type="button" onclick="changeColorValue('er', 10)" value="More" />
                <input type="button" onclick="changeColorValue('er', -10)" value="Less" /><br />
                Green: <input type="button" onclick="changeColorValue('eg', 10)" value="More" />
                <input type="button" onclick="changeColorValue('eg', -10)" value="Less" /><br />
                Blue: <input type="button" onclick="changeColorValue('eb', 10)" value="More" />
                <input type="button" onclick="changeColorValue('eb', -10)" value="Less" />
                Blur: <input type="button" onclick="changeBlurValue(1)" value="More" />
                <input type="button" onclick="changeBlurValue(-1)" value="Less" /><br />
            </div>
            <div class="column2">
                <canvas id="orig" width="500" height="333"></canvas>
                <canvas id="panel" width="500" height="333"></canvas>
            </div>
            <div style="clear:both;"></div>
        </div>
        <footer>
            <h2>HTML5 Image Effects App - Adding Horizontal Flip</h2>
            <a href="https://www.script-tutorials.com/html5-image-effects-app-adding-horizontal-flip" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

What I did since last our version: changed main layout a little and add new button for new Horizontal Flip.

自上次发布以来，我所做的是：稍微更改了主布局，并为新的水平翻转添加了新按钮。

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

css / main.css (css/main.css)

/* general styles */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#bababa;
    background-image: -webkit-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%);
    background-image: -moz-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%);
    background-image: -o-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%);
    background-image: radial-gradient(600px 200px, circle, #ffffff, #bababa 50%);
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
/* tutorial styles */
.container {
    color:#000;
    margin:20px auto;
    position:relative;
    width:730px;
}
.column1 {
    float:left;
    padding-right:10px;
    text-align:right;
    width:185px;
}
.column2 {
    float:left;
    width:500px;
    background-color:#888;
    padding:10px;
}
input[type=button] {
    margin:5px;
}


/* general styles */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#bababa;
    background-image: -webkit-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%);
    background-image: -moz-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%);
    background-image: -o-radial-gradient(600px 200px, circle, #ffffff, #bababa 50%);
    background-image: radial-gradient(600px 200px, circle, #ffffff, #bababa 50%);
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
/* tutorial styles */
.container {
    color:#000;
    margin:20px auto;
    position:relative;
    width:730px;
}
.column1 {
    float:left;
    padding-right:10px;
    text-align:right;
    width:185px;
}
.column2 {
    float:left;
    width:500px;
    background-color:#888;
    padding:10px;
}
input[type=button] {
    margin:5px;
}

步骤3. JS (Step 3. JS)

As I mentioned in previous article – don`t need to publish whole code here again and again – we will publish only new functions. Here are new function for Horizontal Flip:

正如我在上一篇文章中提到的那样-不需要一次又一次地发布整个代码-我们将仅发布新功能。 这是水平翻转的新功能：

js / script.js (js/script.js)

function FlipHor() {
    func = 'flip_hor'; // last used function
    var imgd = context.getImageData(0, 0, iW, iH);
    var data = imgd.data;
    var imgd2 = context.getImageData(0, 0, iW, iH);
    var data2 = imgd2.data;
    for (var x = 0; x < iW/2; x++) {
        for (var y = 0; y < iH; y++) {
            var i = (y*iW + x);
            var i2 = (y*iW + ((iW-1)-x));
            var iP1 = data2[i*4]*p1+er;
            var iP2 = data2[i*4+1]*p2+eg;
            var iP3 = data2[i*4+2]*p3+eb;
            data[i*4]   = data[i2*4]*p1+er; // red
            data[i*4+1] = data[i2*4+1]*p2+eg; // green
            data[i*4+2] = data[i2*4+2]*p3+eb; // blue
            data[i2*4]   = iP1; // red
            data[i2*4+1] = iP2; // green
            data[i2*4+2] = iP3; // blue
        }
    }
    context.putImageData(imgd, 0, 0);
}


function FlipHor() {
    func = 'flip_hor'; // last used function
    var imgd = context.getImageData(0, 0, iW, iH);
    var data = imgd.data;
    var imgd2 = context.getImageData(0, 0, iW, iH);
    var data2 = imgd2.data;
    for (var x = 0; x < iW/2; x++) {
        for (var y = 0; y < iH; y++) {
            var i = (y*iW + x);
            var i2 = (y*iW + ((iW-1)-x));
            var iP1 = data2[i*4]*p1+er;
            var iP2 = data2[i*4+1]*p2+eg;
            var iP3 = data2[i*4+2]*p3+eb;
            data[i*4]   = data[i2*4]*p1+er; // red
            data[i*4+1] = data[i2*4+1]*p2+eg; // green
            data[i*4+2] = data[i2*4+2]*p3+eb; // blue
            data[i2*4]   = iP1; // red
            data[i2*4+1] = iP2; // green
            data[i2*4+2] = iP3; // blue
        }
    }
    context.putImageData(imgd, 0, 0);
}
现场演示

结论 (Conclusion)

Hope that today`s lesson was interesting for you. We added new effect to our application – Horizontal Flip. I will be glad to see your thanks and comments. Good luck!

希望今天的课程对您很有趣。 我们在应用程序中添加了新效果–水平翻转。 看到您的感谢和评论，我将非常高兴。 祝好运！

翻译自: https://www.script-tutorials.com/html5-image-effects-app-adding-horizontal-flip/

js image 翻转

cukengwei3786
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 如何将图片进行镜像翻转处理
qq_27487739的博客
07-04 1005
以上代码将图片进行水平镜像翻转处理。如果需要垂直镜像翻转，可以将。
（js）leetcode 832. 翻转图像
M_Eve的博客
02-24 177
题目： 给定一个二进制矩阵A，我们想先水平翻转图像，然后反转图像并返回结果。 水平翻转图片就是将图片的每一行都进行翻转，即逆序。例如，水平翻转[1, 1, 0]的结果是[0, 1, 1]。 反转图片的意思是图片中的0全部被1替换，1全部被0替换。例如，反转[0, 1, 1]的结果是[1, 0, 0]。 示例 1： 输入：[[1,1,0],[1,0,1],[0,0,0]] 输出：[[1,0,0],[0,1,0],[1,1,1]] 解释：首先翻转每一行: [[0,1,1...
Unity多媒体展示项目经验分享-ImageEffect+动态绑定
weixin_33769207的博客
06-04 450
Unity多媒体展示项目经验分享-ImageEffect+动态绑定+网络通信 &lt;ignore_js_op&gt; “海尔科技展墙”是去年年初我们为上海家电博览会制作的一个多媒体展项，有限的工期以及对画面的高标准要求为我们的制作带来很大压力，现在来看不得不庆幸当时选对了工具——Unity“简单易用、所见即所得”的特点让我们感受颇深，并且受益匪浅，在此分享一些经验。首先看视频：叠加Unity自...
js 图片水平循环转动
宋有诚的专栏
07-06 1169
window.onload=function(){           var rt=new imgRound("imgContainer",120,90,300,80,230,0.01);           setInterval(function(){r
【JavaScript】js实现图片翻转
热爱思考、活力满满、开朗爱笑的年轻人
06-07 3301
我们先来看一个没有预加载的图片翻转的例子:<img src="image/help.gif" onmouseover="this.src='images/help_rollover.gif'" onmouseout="this.src='images/help.gif'" > 当鼠标指针经过或者离开<img>元素时候,事件处理程序会重新设置其src属性。 为了有用起见,像
Image-merge.rar_Image.merge_image merge应用_merge image
09-14
实现两幅图像的合并zipMerge(Mat inImg1,Mat inImg2,Mat outImg)
IMAGE_COMPRESSION.rar_image compression_medical image_nearestl5x
09-24
medical image compression using wavelet technique
JPEG.rar_image_image compression_jpeg_majorxt5_recall4m5
09-21
JPEG image compression and compression rate calculation of matlab code and image
IFM.zip_MOP5_image fusion_image processing_woredcb_zip
07-13
this is for image fusion
GPAC.rar_image similarity_分水岭_分水岭分割_多水平集_水平集算法C++
09-20
多区域的分割方法，用到分水岭及水平集等多种算法
[jQuery插件]jquery实现图片垂直水平翻转效果
12-22
jquery实现图片垂直水平翻转效果
js 控制图片左右旋转
05-10
js 控制图片左右旋转 兼容ie ff js 控制图片左右旋转 js 控制图片左右旋转 js 控制图片左右旋转
832. 翻转图像(Python)
playboygogogo的博客
10-30 212
832. 翻转图像 给定一个二进制矩阵 A，我们想先水平翻转图像，然后反转图像并返回结果。 水平翻转图片就是将图片的每一行都进行翻转，即逆序。例如，水平翻转 [1, 1, 0] 的结果是 [0, 1, 1]。 反转图片的意思是图片中的 0 全部被 1 替换， 1 全部被 0 替换。例如，反转 [0, 1, 1] 的结果是 [1, 0, 0]。 示例 1: 输入: [[1,1,0],[1,0,1],[0,0,0]] 输出: [[1,0,0],[0,1,0],[1,1,1]] 解释: 首先翻转每一行: [[0,
原生JS实现图片旋转功能
m0_52334927的博客
09-15 8974
废话不多说，直接进入主题 原生JS代码实现图片旋转的效果，下面两条是功能 单击鼠标左键图片向左旋转45°， 单机鼠标右键图片向右旋转45° 成功后的效果(视频放不了！) 上JS代码 html部分(只是一个简简单单的图片) <img src="img/1.jpg" id="img01" /> JS代码部分 <script> //记录旋转角度的变量 var current = 0; //鼠标右键点击事件 img01.oncontextmenu = fu
js实现图片左右垂直翻转
木偶笔记
03-31 9088
js实现图片左右垂直翻转
html5 canvas 图片水平翻转
大爱无疆的博客
03-30 7278
一个html5游戏 要求把图片 水平翻转 在网上找了资料要不是看不懂 就是看了没用 不满足需求 　　图片翻转 可以利用css IE的滤镜 由于项目不需要兼容IE所以直接无视它 o(∩_∩)o 哈哈 　　图片翻转有以下几种方式： 　　css 　　-moz-transform: matrix(-1, 0, 0, 1, 0, 0); chrome safari 　　-webkit-transf
css+js实现图片反转效果
u013742084的专栏
07-16 5131
一个图片，点击图片图片反转180deg后，出现图片的简介  html部分 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aliquid laboriosam a ipsam ducimus ea nobis officiis dignissimos co
优雅的实现图片翻转（js实现）
sina_panda
03-04 4012
/** * rollover.js: unobtrusive image rollovers.（优雅的实现代码翻转） * * To create image rollovers, include this module in your HTML file and（要创建图片翻转效果，将这个模块引用到你的html文件中） * use the data-rollover attribute o
Jquery 实现图片水平旋转效果
平凡的人类的博客
02-23 1497
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
js引入image并调整大小，水平翻转
最新发布
06-10
可以使用 JavaScript 来动态地添加图片，并对其进行大小调整和水平翻转。下面是一个例子： ```html <!DOCTYPE html> <html> <title>JS Image // 创建一个新的图片对象 var img = new Image(); // 设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值