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. Jmeter-配置元件

    CSV Data Set Config(CSV数据集配置) 参考:http://www.cnblogs.com/yanzhe/p/7728139.html DNS Cache Manager(DNS缓 ...

  2. Java读取txt文件信息并操作。

    一.java读取txt文件内容 import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.Fi ...

  3. 51Nod 1006：最长公共子序列Lcs（打印LCS）

    1006 最长公共子序列Lcs  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). ...

  4. 《FDTD electromagnetic field using MATLAB》读书笔记 Figure 1.2

    函数f(x)用采样间隔Δx=π/5进行采样,使用向前差商.向后差商和中心差商三种公式来近似一阶导数. 书中代码: %% ---------------------------------------- ...

  5. 提高ASP.NET页面载入速度的方法

    前言 本文是我对ASP.NET页面载入速度提高的一些做法,这些做法分为以下部分: 目录 1.采用 HTTP Module 控制页面的生命周期. 2.自定义Response.Filter得到输出流str ...

  6. Archiva与maven配置使用

    在之前的博文里头已经介绍了Archiva私服的使用,本文主要介绍,如何与maven进行配置,在进行maven使用的时候可以自动上传至Archiva上 1.设置maven的用户配置,到maven的安装目 ...

  7. aop学习

    拦截器和过滤器的区别:https://blog.csdn.net/heyeqingquan/article/details/71482169 1,aop是一个编程思想,不是具体的实现,一般有Filte ...

  8. LINQ to SQL 建立实体类 (转)

    http://www.cnblogs.com/DebugLZQ/archive/2012/11/14/2770449.html 使用LINQ to SQL时,需要首先建立用于映射数据库对象的模型,也就 ...

  9. appium启动APP时避免重新安装的问题

    from appium import webdriverfrom time import sleepimport os #获取apk的绝对路径desired_cups = {}#设备平台desired ...

  10. HDU 4004 The Frog's Games(二分+小思维+用到了lower_bound)

    The Frog's Games Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others) ...