Description

In the field of image processing, We always to show image after modified the image raw data.It is very easy with using c, c++ and other compiled programming language. But, if you use the interpreted programming language like javascript. i think it will maybe more complicated.But, We always can find work way.

The below code is not all, Just some code snippet.

Code snippet

Here rotation ways use the temporary variable to storage temporary image every rotated. before rotatetion, should use src image.

var RotateImg = {

    srcImg:"",          // storage src img path, when you begin to rotate every time, you should use src image that can reduce the error of each roataiton

    tmpImg:"",          // storage temp image oath after rotated src image.

};

/** Use the canvas to rotate image raw data to show */

RotateImg.rotate = function(nAngle)

{

    var Img = new Image();

    Img.addEventListener("load",function(){

        var imgW = Img.width;

        var imgH = Img.height;

        var cvs = document.createElement("canvas");

        var context = cvs.getContext( "2d" );

        var degree = nAngle * Math.PI / 180;

        switch ( nAngle )

        {

            case 0://Clockwise 0

                cvs.width  = imgW;

                cvs.height = imgH;

                context.drawImage( Img, 0, 0, imgW, imgH );

                break;

            case 90://Clockwise 90

                cvs.width  = imgH;

                cvs.height = imgW;

                context.rotate( degree );

                context.drawImage( Img, 0, -imgH, imgW, imgH );

                break;

            case 180://Clockwise 180

                cvs.width  = imgW;

                cvs.height = imgH;

                context.rotate( degree );

                context.drawImage( Img, -imgW, -imgH, imgW, imgH );

                break;

            case 270://Clockwise 270

                cvs.width  = imgH;

                cvs.height = imgW;

                context.rotate( degree );

                context.drawImage( Img, -imgW, 0, imgW, imgH );

                break;

        }

        /** jpeg level [0,1] */

        var dataBase64 = cvs.toDataURL( "image/jpeg", 0.8 );

        /** remove base64 description information before image data.---->data:image/png;base64,iVBORw0KG... */

        dataBase64 = dataBase64.split( "," )[1];

        dataBase64 = window.atob( dataBase64 );

        var ia = new Uint8Array( dataBase64.length );

        for ( var i = 0; i < dataBase64.length; i++ ) {

            ia[i] = dataBase64.charCodeAt( i );

        };

        var blob = new Blob( [ia], {type:"image/jpeg"} );

        /** storage temp image path in member */

        RotateImg.tmpImg = window.URL.createObjectURL( blob );

        RotateImg.showImg(RotateImg.tmpImg);

    },false);

    Img.src = RotateImg.srcImg;

};

Here another rotation ways not use the temporary variable, Just use the src. This way is more complex.

RotateImg.rotateExampleImage = function( nAngle )

{

    imgLoaded = true;

    var  img = new Image();

    img.onload = function()

    {

        var imgW = img.width;

        var imgH = img.height;

        var degree = nAngle * Math.PI / 180;

        var cvs  = document.getElementById( "canvas" );

        var context = cvs.getContext( "2d" );

        switch ( nAngle )

        {

            case 0://Clockwise 0

                var xyImgScale    = imgW / imgH;

                var xyCanvasScale = cvs.width / cvs.height;

                var finalHeight   = 0;

                var finalWidth    = 0;

                if( xyImgScale >= xyCanvasScale ) {

                    finalWidth = cvs.width * 1;

                    finalHeight = finalWidth / xyImgScale;

                } else {

                    finalHeight = cvs.height * 1;

                    finalWidth = finalHeight * xyImgScale;

                }

                var xPos = ( cvs.width - finalWidth   ) / 2;

                var yPos = ( cvs.height - finalHeight ) / 2;

                var maxV = cvs.width > cvs.height ? cvs.width : cvs.height;

                context.clearRect( -maxV, -maxV, 2*maxV, 2*maxV );

                context.rotate( degree );

                context.drawImage( img, 0, 0, imgW, imgH, xPos, yPos,finalWidth, finalHeight );

                context.rotate( -degree );

                break;

            case 90://Clockwise 90

                var xyImgScale    = imgW / imgH;

                var xyCanvasScale = cvs.height / cvs.width;

                var finalHeight   = 0;

                var finalWidth    = 0;

                if( xyImgScale >= xyCanvasScale ) {

                    finalWidth = cvs.height * 1;

                    finalHeight = finalWidth / xyImgScale;

                } else {

                    finalHeight = cvs.width * 1;

                    finalWidth = finalHeight * xyImgScale;

                }

                var xPos = ( cvs.height - finalWidth   ) / 2;

                var yPos = ( cvs.width - finalHeight ) / 2;

                var maxV = cvs.width > cvs.height ? cvs.width : cvs.height;

                context.clearRect( -maxV, -maxV, 2*maxV, 2*maxV );

                context.rotate( degree );

                context.drawImage( img, 0, 0, imgW, imgH, xPos, yPos-cvs.width , finalWidth,finalHeight );

                yPos = yPos-cvs.width;

                context.rotate( -degree );

                break;

            case 180://Clockwise 180

                var xyImgScale    = imgW / imgH;

                var xyCanvasScale = cvs.width / cvs.height;

                var finalHeight   = 0;

                var finalWidth    = 0;

                if( xyImgScale >= xyCanvasScale ) {

                    finalWidth = cvs.width * 1;

                    finalHeight = finalWidth / xyImgScale;

                } else {

                    finalHeight = cvs.height * 1;

                    finalWidth = finalHeight * xyImgScale;

                }

                var xPos = ( cvs.width - finalWidth   ) / 2;

                var yPos = ( cvs.height - finalHeight ) / 2;

                var maxV = cvs.width > cvs.height ? cvs.width : cvs.height;

                context.clearRect( -maxV, -maxV, 2*maxV, 2*maxV );

                context.rotate( degree );

                context.drawImage( img, 0, 0, imgW, imgH, xPos-cvs.width, yPos-cvs.height,finalWidth, finalHeight );

                context.rotate( -degree );

                break;

            case 270://Clockwise 270

                var xyImgScale    = imgW / imgH;

                var xyCanvasScale = cvs.height / cvs.width;

                var finalHeight   = 0;

                var finalWidth    = 0;

                if( xyImgScale >= xyCanvasScale ) {

                    finalWidth = cvs.height * 1;

                    finalHeight = finalWidth / xyImgScale;

                } else {

                    finalHeight = cvs.width * 1;

                    finalWidth = finalHeight * xyImgScale;

                }

                var xPos = ( cvs.height - finalWidth   ) / 2;

                var yPos = ( cvs.width - finalHeight ) / 2;

                var maxV = cvs.width > cvs.height ? cvs.width : cvs.height;

                context.clearRect( -maxV, -maxV, 2*maxV, 2*maxV );

                context.rotate( degree );

                context.drawImage( img, 0, 0, imgW, imgH, xPos-cvs.height, yPos, finalWidth,finalHeight );

                context.rotate( -degree );

                break;

        }

    };

    img.src = RotateImg.srcImg;

}

Fit show image in view rect center

RotateImg.showImg = function( imgSrc )

{

    var img = new Image();

    var loaded = false;

    function loadHandler() {

        if (loaded) {

            return;

        }

        loaded = true;

        /** core code for fit view rect to show image */

        var imgW = img.width;

        var imgH = img.height;

        var xyImgScale  = imgW / imgH;

        var mycvs  = document.getElementById( "canvas" );

        var xyCanvasScale = mycvs.width / mycvs.height;

        var finalHeight = 0;

        var finalWidth  = 0;

        if( xyImgScale >= xyCanvasScale ){

            finalWidth  = mycvs.width * 1;

            finalHeight = finalWidth / xyImgScale;

        }else{

            finalHeight = mycvs.height * 1;

            finalWidth  = finalHeight * xyImgScale;

        }

        var xPos = ( mycvs.width - finalWidth  ) / 2;

        var yPos = ( mycvs.height - finalHeight ) / 2;

        var context = mycvs.getContext( "2d" );

        context.clearRect( 0, 0, mycvs.width, mycvs.height );

        context.drawImage( img, 0, 0, img.width, img.height, xPos, yPos,finalWidth, finalHeight );

    }

    img.addEventListener('load', loadHandler);

    img.addEventListener('error', function(event){

        //alert("error:");

    });

    img.src = imgSrc;

    if (img.complete) {

        loadHandler();

    }

};

Reference

segmentfault

stackoverflow

stackoverflow

stackoverflow

Rotate image and fit show use canvas的更多相关文章

  1. html5 canvas 绘制太极图

    <div class="container"> <canvas id="myCanvas" width="400" hei ...

  2. 讲解Canvas中的一些重要方法

    Canvas所提供的各种方法根据功能来看大致可以分为几类: 第一是以drawXXX为主的绘制方法: 第二是以clipXXX为主的裁剪方法: 第三是以scale.skew.translate和rotat ...

  3. html 5 canvas 绘制太极demo

    一个练习canvas的小案例.其中若有小问题,欢迎大神拍砖……^_* 代码效果预览地址:http://code.w3ctech.com/detail/2500. <div class=" ...

  4. 转载爱哥自定义View系列－－Canvas详解

    上面所罗列出来的各种drawXXX方法就是Canvas中定义好的能画什么的方法(drawPaint除外),除了各种基本型比如矩形圆形椭圆直曲线外Canvas也能直接让我们绘制各种图片以及颜色等等,但是 ...

  5. canvas图表详解系列（2）：折线图

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  6. 基于canvas的电子始终

    //code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  7. canvas旋转文本

    canvas旋转文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. 大家都能看懂的 canvas基础教程

    原文链接: http://www.shitu91.com/cms/canvasSub/index.html 01.canvas简单的认识 canvas 是html5提供给我们的一个绘图标签 默认大小 ...

  9. Canvas的flag具体的含义

    示例代码: package com.loaderman.customviewdemo; import android.content.Context; import android.graphics. ...

随机推荐

  1. spring注解事务使用总结

    在使用spring的注解事务的时候,需要考虑到事务的传播行为.遇到什么类型的异常时,事务才起作用.事务方法之间的嵌套调用时,怎么样才生效等等诸多问题.网上搜到很多的主要还是一堆理论文字描述,我这里给出 ...

  2. .NET 命令行参数包含应用程序路径吗？

    如果你关注过命令行参数,也许发现有时你会在命令行参数的第一个参数中中看到应用程序的路径,有时又不会.那么什么情况下有路径呢? 其实是否有路径只是取决于获取命令行参数的时候用的是什么方法.而这是 Win ...

  3. 浅谈一致性Hash原理及应用

    在讲一致性Hash之前我们先来讨论一个问题. 问题:现在有亿级用户,每日产生千万级订单,如何将订单进行分片分表? 小A:我们可以按照手机号的尾数进行分片,同一个尾数的手机号写入同一片/同一表中. 大佬 ...

  4. animationx详解

    animation是CSS3中极其强大的功能,它可以完成许多炫酷有趣的动画效果,网上也有非常不错的类库.下面将做详细介绍. 1.@keyframes:用于定义动画的具体动作(帧动作),一般要加上浏览器 ...

  5. ssh的时候提示No user exists for uid 501

    原来是oh my zash升级导致的.关闭iterm2然后重新打开iterm2就可以了

  6. 《DSP using MATLAB》Problem 2.17

    1.代码: %% ------------------------------------------------------------------------ %% Output Info abo ...

  7. Javascript 中 switch case 等于 （== ）还是 恒等于（===）？

    Javascript 中 switch case 等于 (== )还是 恒等于(===)? 可以测试一下以下代码,这个 case 中是 等于(==)还是恒等于(===) <script> ...

  8. 写写Django中DRF框架概述以及序列化器对象serializer的构造方法以及使用

    写写Django中DRF框架概述以及序列化器对象serializer的构造方法以及使用 一.了解什么是DRF DRF: Django REST framework Django REST framew ...

  9. 在linux下利用nohup来后台运行java程序

    nohup java -jar /etc/deny/denyHttp_fat.jar & http://limaoyuan.iteye.com/blog/900928 http://zshou ...

  10. 详解Centos7 修改mysql指定用户的密码

    本文介绍了Centos7 修改mysql指定用户的密码,具体如下: 1.登陆mysql或者mariadb(两种任选其一) [root@localhost ~]# mysql -u root [root ...