JavaScript实现点击图片翻转效果

最近在做一个有关人脸采集的项目，然后在编写前端模块时，遇到了一个问题，就是当客户上传照片或直接拍照上传时，会遇到有些图片可能会90度翻转过来所以，我们需要给个按钮客户让客户自己可以对照品进行旋转效果大致如下

图1.正常图片上传

图2.图片左旋转

图3.图片右旋转

以上就是一个图片旋转功能

下面我们就开始代码部分吧

这里我采取了一个方法，然后当前我的图片格式是base64,如果遇到其它格式也无所谓，因为我们最终的效果还是要转为image对象来实现的

/**
     * 图片旋转
     * @param direction 旋转的方向
     */
    rotate (direction) {
      const img = new Image()
      // 这里的思维就是，把图片映射到一个画板上，然后对图片进行重新绘制，所以这里要建一个canvas对象来充当我们的画板
      const canvas = document.createElement('canvas')
      // base64转换image对象
      img.src = this.uploadImage
      // 这里记得一定要在base64转换成图片对象后再进行其它操作，笔者在这里踩了个坑，onload方法就是图片加载再进行其它操作，如果图片是文件路径方式跨域调用效果更加明显
      img.onload = () => {
        // img的高度和宽度不能在img元素隐藏后获取，否则会出错
        const height = img.height
        const width = img.width
        // 旋转角度以弧度值为参数
        const ctx = canvas.getContext('2d')
        if (direction === 'right') {
          canvas.width = height
          canvas.height = width
          ctx.rotate(90 * Math.PI / 180)
          ctx.drawImage(img, 0, 0, width, -height)
        } else {
          canvas.width = height
          canvas.height = width
          ctx.rotate(-90 * Math.PI / 180)
          ctx.drawImage(img, 0, 0, -width, height)
        }
        // 旋转后的图片重新转为base64
        this.uploadImage = this.getBase64Image(img, canvas)
      }
    },
    /**
    * 把image文件转为base64
    */
    getBase64Image (img, canvas) {
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      return canvas.toDataURL('image/' + ext)
    }

注意：如果图片是跨域获取的话这里可能会使canvas转回base64出现问题，这时可能需要开启代理来进行图片获取

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现跟随鼠标立体翻转图片的方法

    本文实例讲述了JS实现跟随鼠标立体翻转图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Wanna tell her - interactive DHTML</title> <

  • JavaScript实现简单图片翻转的方法

    本文实例讲述了JavaScript实现简单图片翻转的方法.分享给大家供大家参考.具体如下: 这里先取两个命名smirk1.jpg和smirk2.jpg同样大小的图像 然后运行下面的代码,可以实现简单的图片翻转 <script type="text/javascript"> var revert = new Array(); var inames = new Array('smirk'); // Preload if (document.images) { var flipp

  • js实现按钮控制图片360度翻转特效的方法

    本文实例讲述了js实现按钮控制图片360度翻转特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现按钮控制图片360度翻转特效</title> <body> <script language="javascript"> var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var o

  • JS控制图片翻转示例代码(兼容firefox,ie,chrome)

    复制代码 代码如下: <!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>图片旋转效果<

  • JavaScript实现点击图片翻转效果

    JavaScript实现点击图片翻转效果

    最近在做一个有关人脸采集的项目,然后在编写前端模块时,遇到了一个问题,就是当客户上传照片或直接拍照上传时,会遇到有些图片可能会90度翻转过来所以,我们需要给个按钮客户让客户自己可以对照品进行旋转效果大致如下 图1.正常图片上传 图2.图片左旋转 图3.图片右旋转 以上就是一个图片旋转功能 下面我们就开始代码部分吧 这里我采取了一个方法,然后当前我的图片格式是base64,如果遇到其它格式也无所谓,因为我们最终的效果还是要转为image对象来实现的 /** * 图片旋转 * @param dire

  • JQuery学习笔记 实现图片翻转效果和TAB标签切换效果第1/2页

    所以自己也下了一个来学习,把之前写的几个JS代码都转换成JQuery,既能保证代码的清晰,也保证了代码的通用性,真是一举两得啊,由于是初学者,所以代码有许多的不足,还请大家多多指正:)1.实现图片翻转效果,DW本身提供了这个功能,不过还是自己写的好用,呵呵.之前写的方式比较麻烦,代码也比较乱,用JQuery改造后可以使其更加清晰,核心代码如下: JS代码 复制代码 代码如下: <script type="text/javascript"> <!-- $(documen

  • 图片翻转效果具体实现代码

    以下为程序代码: 复制代码 代码如下: <!DOCTYPE html /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

  • JavaScript基于SVG的图片切换效果实例代码

    JavaScript基于SVG的图片切换效果实例代码

    最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解到没. -_-!!! 图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下. 效果要求 点击控制块,图片切换.切换的时候使用圆形做遮罩,由小到大变化.每次切换的时候,圆的位置随机产生. 主要知识点 1. SVG 的裁切(遮罩),clip-path 的运用. 2. SVG 利用 JS 更改层

  • javascript实现点击图片切换功能

    javascript实现点击图片切换功能

    本文实例为大家分享了javascript实现点击图片切换的具体代码,供大家参考,具体内容如下 实现效果:图片点击切换 代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../reset.css"> <style> .

  • iOS 点击图片放大效果的实现

    iOS 点击图片放大效果的实现

    今天带来的是图片点击放大效果,这种效果一般在微博,微信朋友圈中比较常见 当我点击其中一张图片时,就会进入详情 具体实现如下 首先创建个 Controller(PhotoViewController) // // PhotoViewController.h // 点击图片放大效果 // // Created by Amydom on 17/1/9. // Copyright © 2017年 Amydom. All rights reserved. // #import <UIKit/UIKit.h

  • js鼠标点击图片切换效果实现代码

    js鼠标点击图片切换效果实现代码

    本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

  • Android编程实现GridView控件点击图片变暗效果的方法

    本文实例讲述了Android编程实现GridView控件点击图片变暗效果的方法.分享给大家供大家参考,具体如下: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); grid = (GridView) findViewById(R.id.grid); grid.setAdapte

  • 微信小程序实现点击卡片 翻转效果

    动画效果: wxml: <view class='main'> <!--正面的框 --> <view class="box b1" animation="{{animationMain}}" bindtap='rotateFn' data-id="1" > <image src=""></image> </view> <!--背面的框 -->

随机推荐