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. PyalgoTrade 绘图（七）

    PyAlgoTrade使得绘制策略执行变得非常简单 from pyalgotrade import strategy from pyalgotrade.technical import ma from ...

  2. @Transactional、Spring的声明式事务

    传送门 一.Spring的声明式事务 需要在xml文件中配置 <!--配置事务管理器类--> <bean id="transactionManager" clas ...

  3. hibernate流程图

    流程图: 作者: IT程序狮 链接:http://www.imooc.com/article/1296来源:慕课网

  4. JAVA通过JDBC连接Oracle数据库详解【转载】

    JAVA通过JDBC连接Oracle数据库详解 (2011-03-15 00:10:03) 转载▼http://blog.sina.com.cn/s/blog_61da86dd0100q27w.htm ...

  5. sql server利用cte递归查询

    1.数据环境准备 参考Oracle递归查询文章. 2.查询某个节点下的所有子节点 with cte(id,name,parent_id) as ( select id,name,parent_id f ...

  6. WinForm中Application.Idle事件用法

    Application.Idle 事件 描述:当应用程序完成处理并即将进入空闲状态时发生.如果您有必须执行的任务在线程变为空闲之前,请将它们附加到此事件. public partial class F ...

  7. RDLC报表系列二

    ---------------------ReportServer数据库权限表说明------------------ --用户表 select * from Users --角色表 select * ...

  8. java单例模式等一些程序的写法....持续更新...

    一.单例模式的写法: public class MyFactory { /** * 饿汉式 */ private static MyFactory instance = new MyFactory() ...

  9. Fri Oct 31 18:00:00 UTC+0800 2008转换为yyyy-mm-dd

    这个其实网上有很多例子,都是直接用js在前端做了时间处理,我的处理也一样,想要变成2008-3-31,就用下面的js直接可以处理 function Todate(num) { //Fri Oct 31 ...

  10. [POJ] Financial Management

    Financial Management Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 182193   Accepted: ...