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. vue music 歌单组件

    在data里面定义 discList: [] methods: { _getRecommend() { getRecommend().then((res) => { if(res.code == ...

  2. Linux修改串口irq

    /******************************************************************************* * Linux修改串口irq * 说明 ...

  3. python的pip源在windows和linux修改

    windows和linux修改python的pip源 https://www.cnblogs.com/cwp-bg/p/8497075.html windows和linux修改python的pip源 ...

  4. 【转】pycharm的一些快捷键

    最近在学着用GA来做游戏的自动化,然后有用到pycharm来做一些脚本的编辑和试调.然后在试调时进行多行注释一行一行来感觉有点儿麻烦,然后就想着pycharm有没有多行注释的快捷方式.. 然后在网上查 ...

  5. web本地存储（localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  6. vs2013 乱码问题

    单击一下代码框  然后点文件  有个高级保存选项  改成utf-8  就可以显示中文了

  7. VsCode中运行nodeJs代码的简单方法

    VsCode安装包默认内置的node debug插件需要配置工程调试运行文件才能正常运行,对于想要运行一个简单的js文件或者就是一段js代码时比较麻烦,为此可以安装Code Runner插件 安装完后 ...

  8. C#：进程、线程、应用程序域(AppDomain)与上下文分析

    进程     进程是操作系统用于隔离众多正在运行的应用程序的机制.在．Net之前,每一个应用程序被加载到单独的进程中,并为该进程指定私有的虚拟内存.进程不能直接访问物理内存,操作系统通过其它的处理把这 ...

  9. Shell编程时常用的系统文件(转)

    10.1 Linux系统目录结构 / 根目录,所有文件的第一级目录 /home 普通用户家目录 /root 超级用户家目录 /usr 用户命令.应用程序等目录 /var 应用数据.日志等目录 /lib ...

  10. WebDriverException: Message: 'phantomjs.exe' executable needs to be in PATH.

    本文转载自:http://blog.csdn.net/sinat_36764186/article/details/55520444 网上的某测试代码: from selenium import we ...