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. iOS-----多线程之NSThread

    多线程 iOS平台提供了非常优秀的多线程支持,程序可以通过非常简单的方式来启动多线程,iOS平台不仅提供了NSThread类来创建多线程,还提供了GCD方式来简化多线程编程,提供了NSOperatio ...

  2. axios请求requestBody和formData

    前言 在vue的后台管理开发中,应需求,需要对信息做一个校验,需要将参数传递两份过去,一份防止在body中,一份防止在formdata中,axios请求会默认将参数放在formdata中进行发送. 对 ...

  3. html页面控制字体大小的js代码

    dom对象控制显示文章字体大小的js代码 <head> <script type="text/javascript"> function check(siz ...

  4. test20181025 Color

    题意 分析 自己的想法 可以莫队+平衡树. 对每个颜色维护一颗平衡树,然后移动莫队端点的时候在平衡树中查询. 区间加操作容易实现. 单点修改转化为平衡树的插入删除. 感谢Z前辈的指导. 时间复杂度\( ...

  5. 使用_beginThreadex创建多线程（C语言版多线程）

    _beginThreadex创建多线程解读 一.需要的头文件支持 #include <process.h>         // for _beginthread() 需要的设置:Proj ...

  6. oracle之 数据泵dump文件存放nfs报ORA-27054

    问题描述:源端 10.2.0.4  目标端:11.2.0.4   在目标端划分1T存储与源端做一个NFS 错误:指定dump导出为本地文件系统,正常.   指定dump导出为nfs文件系统,报错. 报 ...

  7. MAC OX 配置 Tomcat 说明

    1: 首先在官网下载 Tomcat(我选择的是最新的9.0) , http://tomcat.apache.org/ 2:下载完成之后将压缩包解压在/Library/下 可使用快捷键 control+ ...

  8. iis 在站点中新建虚拟目录站点之后，虚拟目录中的 web.config 与 主站点中的 web.config冲突解决方案

    在虚拟目录站点中增加如下配置即可:<clear/>

  9. 【转】深入理解Java的接口和抽象类

    深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的 ...

  10. 学习blus老师js(2)--深入JavaScript

    1.函数传参 可变参(不定参):arguments 参数的个数可变,参数数组   例1.求和 求所有参数的和 <!DOCTYPE HTML> <html> <head&g ...