JavaScript实现翻转图片的三种方法小结

更新时间：2024年01月24日 08:21:42 作者：xulihang

有时,我们可能需要翻转Web应用中的媒体元素,所以这篇文章小编为大家详细介绍了三种使用JavaScript翻转图片的方法,希望对大家有所帮助

编写一个HTML5页面以调整翻转图像

使用以下模板创建一个新的HTML5页面，然后让我们为其添加翻转图像的功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flip an Image with JavaScript</title>
  <style>
  </style>
</head>
<body>
  <div class="home">
    <h2>Flip an Image</h2>
    <button id="flipButton">Flip</button>
  </div>
  <script>
  </script>
</body>
</html>

选择所需方向

我们可以在两个方向上翻转图像：水平和垂直。可以添加一个select元素来选择所需的方向。

<label>
  Direction:
  <select id="directionSelect">
    <option>Horizontal</option>
    <option>Vertical</option>
  </select>
</label>

加载图片

添加用于选择文件的input元素，并使用按钮触发它。图片将被加载到一个img元素中。

HTML：

<button id="loadFileButton">Load a File</button>
<input style="display:none;" type="file" id="file" onchange="loadImageFromFile();" accept=".jpg,.jpeg,.png,.bmp" />
<div class="imageContainer">
  <img id="image"/>
</div>
<style>
  .imageContainer {
    overflow: auto;
  }
  #image {
    max-width: 50%;
  }
</style>

JavaScript：

function loadImageFromFile(){
  let fileInput = document.getElementById("file");
  let files = fileInput.files;
  if (files.length == 0) {
    return;
  }
  let file = files[0];
  fileReader = new FileReader();
  fileReader.onload = function(e){
    document.getElementById("image").src = e.target.result;
  };
  fileReader.onerror = function () {
    console.warn('oops, something went wrong.');
  };
  fileReader.readAsDataURL(file);
}

使用CSS翻转图像

我们可以使用CSS属性transform来翻转HTML元素，用法如下：

img.style.transform = "scaleY(-1)"; //flip vertically
img.style.transform = "scaleX(-1)"; //flip horizontally
img.style.transform = "scaleX(-1) scaleY(-1)"; //flip both vertically and horizontally

下面是在页面中写的用于翻转图像的代码，它会记住之前的翻转状态。

function flipImageWithCSS(){
  let img = document.getElementById("image");
  if (document.getElementById("directionSelect").selectedIndex == 0) {
    if (img.style.transform.indexOf("scaleX") != -1) {
      img.style.transform = img.style.transform.replace("scaleX(-1)","");
    }else{
      img.style.transform = img.style.transform+" scaleX(-1)";
    }
  }else{
    if (img.style.transform.indexOf("scaleY") != -1) {
      img.style.transform = img.style.transform.replace("scaleY(-1)","");
    }else{
      img.style.transform = img.style.transform+" scaleY(-1)";
    }
  }
}

使用Canvas翻转图像

HTML5提供了一个canvas标签，我们可以用它操作图像数据。与只改变视觉效果的CSS不同，我们可以使用它来实际获得翻转的图像。

向页面添加一个隐藏的canvas元素。

<canvas id="canvasHidden"></canvas>
<style>
  #canvasHidden {
    display: none;
  }
</style>

添加一个select元素以选择要使用的翻转方法。

<label>
  Method:
  <select id="methodSelect">
    <option>CSS</option>
    <option>Canvas</option>
  </select>
</label>

当所选方法为"Canvas"时，使用canvas翻转图像。

let method = document.getElementById("methodSelect").selectedIndex;
if (method == 0) {
  flipImageWithCSS();
}else if (method == 1){
  document.getElementById("image").style.transform = "";
  flipImageWithCanvas();
}

使用Canvas翻转图像的具体步骤：

将canvas的大小设置为图像的大小。

const image = document.getElementById("image");
const canvas = document.getElementById("canvasHidden");
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;

获取canvas的context以执行操作。

const ctx = canvas.getContext("2d");

将原点(0,0)设置为(width,0)，然后在水平方向上使用缩放系数-1处理图像以水平翻转图像。我们可以使用类似的逻辑来垂直翻转图像。

if (document.getElementById("directionSelect").selectedIndex == 0) {
  context.translate(width, 0);
  context.scale(-1, 1);
}else{
  context.translate(0, height);
  context.scale(1, -1);
}

使用drawImage绘制图像内容。

context.drawImage(image, 0, 0);

显示翻转后的图像。

image.src = canvas.toDataURL();

使用Dynamic Web TWAIN翻转图像

Dynamic Web TWAIN是一个文档扫描SDK，可以在浏览器中扫描文档。它提供了各种图像处理方法。我们可以使用其Flip和Mirror方法翻转图像。

使用它的优点是，它可以用于批量处理大量图像，因为处理是使用本地进程完成的。

以下是使用它的步骤：

在页面中引入Dynamic Web TWAIN。

<script src="https://unpkg.com/dwt@18.4.2/dist/dynamsoft.webtwain.min.js"></script>

初始化一个Web TWAIN的实例并使用它来翻转图像。可以在此处申请其许可证。

let DWObject;
Dynamsoft.DWT.AutoLoad = false;
Dynamsoft.DWT.ProductKey = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; //one-day trial
Dynamsoft.DWT.ResourcesPath = "https://unpkg.com/dwt@18.4.2/dist";

async function flipImageWithWebTWAIN(){
  if (!DWObject) {
    await initDWT();
  }
  DWObject.RemoveAllImages();
  let response = await fetch(document.getElementById("image").src);
  let buffer = await response.arrayBuffer();
  DWObject.LoadImageFromBinary(buffer,
  function(){
    if (document.getElementById("directionSelect").selectedIndex == 0) {
      DWObject.Mirror(0,
      function(){ //success
        document.getElementById("image").src = DWObject.GetImageURL(0);
      },
      function(errorCode, errorString){ //fail
        console.log(errorString);
      });
    }else{
      DWObject.Flip(0,
      function(){ //success
        document.getElementById("image").src = DWObject.GetImageURL(0);
      },
      function(errorCode, errorString){ //fail
        console.log(errorString);
      });
    }
  },
  function(errorCode, errorString){
    console.log(errorString);
  })
}

function initDWT(){
  return new Promise((resolve, reject) => {
    const title = document.querySelector("h2").innerText;
    document.querySelector("h2").innerText = "Loading Dynamic Web TWAIN...";
    Dynamsoft.DWT.CreateDWTObjectEx(
    {
      WebTwainId: 'dwtcontrol'
    },
    function(obj) {
      DWObject = obj;
      document.querySelector("h2").innerText = title;
      resolve();
    },
    function(err) {
      console.log(err);
      document.querySelector("h2").innerText = "Failed to load Dynamic Web TWAIN";
      reject(err);
    }
  );
  })
}

源代码

可以在以下仓库中找到所有代码和在线演示：

github.com/tony-xlh/Flip-Image-JavaScript

以上就是JavaScript实现翻转图片的三种方法小结的详细内容，更多关于JavaScript翻转图片的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

FireFox JavaScript全局Event对象
在IE下 JavaScript 中可以在任何地方使用全局的window.event来取得本次JavaScript被触发的Event，从而取得 KeyCode，EventSourceElement 等对象。
2009-06-06
Echart折线图手柄触发事件示例详解
这篇文章主要给大家介绍了关于Echart折线图手柄触发事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
用JS在浏览器中创建下载文件
前端很多项目中，都有文件下载的需求，特别是JS生成文件内容，然后让浏览器执行下载操作（例如在线图片编辑、在线代码编辑、iPresst等
2014-03-03
JavaScrpt的面向对象全面解析
javascript面向对象知识很广泛，想深入理解需要花费一些时间，本文给大家介绍了js面向对象的创建及相关属性介绍，感兴趣的小伙伴一起学习吧
2017-05-05
Javascript Tab 导航插件 (23个)
实现tab页很多方法，有一些是用纯CSS实现，其他大多数是基于jquery、mootools或者其他js框架实现，既然有这么多可以拿来即用的插件，又何苦重复造轮子。
2009-06-06
javascript 数组操作实用技巧
数组和字符串类型对象的方法我特容易搞混淆,所以把他列出来，免得每次取查。
2009-09-09
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
这篇文章主要介绍了原生js仿jq判断当前浏览器是否为ie,精确到ie6~8,需要的朋友可以参考下
2014-08-08
js游戏人物上下左右跑步效果代码分享
这篇文章主要介绍了js游戏人物上下左右跑步效果，推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
总结28个令人惊艳的JavaScript单行代码
JavaScript作为一种强大而灵活的脚本语言,充满了许多令人惊艳的特性,本文将带你探索28个令人惊艳的JavaScript单行代码,展示它们的神奇魅力,感兴趣的同学跟着小编一起来看看吧
2023-12-12
JS实现网页标题随机显示名人名言的方法
这篇文章主要介绍了JS实现网页标题随机显示名人名言的方法,涉及JavaScript中字符串、数组及随机数的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11