Giter Club home page Giter Club logo

sinoimageeditor's Introduction

在线图片编辑器

包括图片上传,裁剪,缩放,旋转,水印(文字和图片)等操作,最终上传到服务器,先来看看效果吧:

首先html中需要先添加如下div,3个canvas分别表示主图,水印图片和水印文字画布,外面套一层遮罩层(为了方便鼠标拖动)。

  <div style="width:600px; height:450px; overflow:auto;z-index:3;position:absolute;">
                <div>
                    <canvas id="canvas" width="400" height="400" style="border:2px solid gray;position:absolute;"></canvas>
                </div>
                <div  id='imageCover' style="width:100px; height:100px;position:absolute;cursor:pointer;display:none;z-index:4;">
                    <canvas id="watermarkImageCanvas"   width="100" height="100" style="position:absolute;"></canvas>
                </div>
                <div  id='textCover' style="width:100px; height:30px;position:absolute;cursor:pointer;z-index:5;display:none">
                    <canvas id="watermarkTextCanvas"   width="100" height="30" style="position:absolute;"></canvas>
                </div>
            </div>

div添加好了,接下来就是初始化和对图片的操作:
1.初始化操作,主图片画布,水印图片遮罩层,水印图片画布,水印文本遮罩层,水印文本画布

   sinoImageEditModule.init({
        canvasId:'canvas',
        imageCoverId:'imageCover',
           imageCanvasId:'watermarkImageCanvas',
        textCoverId:'textCover',
        textCanvasId:'watermarkTextCanvas',
        });

2.裁剪,鼠标选择一块矩形区域裁剪

  sinoImageEditModule.imageCut();

3.旋转,设置旋转角度(正数顺时针旋转,负数逆时针旋转)

  sinoImageEditModule.imageRotation(document.getElementById('inputRotation').value);

4.缩放,根据宽和高缩放图片

  sinoImageEditModule.setSize(500,300);

5.水印图片,可以鼠标移动图片,设置图片透明度,图片路径,大小等

     sinoImageEditModule.imageWatermark(src,opcity,left,top,width,height,callback);

6.水印文字,可以鼠标移动文字,设置文字内容,透明度,大小等

     sinoImageEditModule.textWatermark(opcity,txt,font,style,left,top,width,height,textLeft,TextTop,callback);

7.保存到服务端,POST图片base64值到远程服务器,CORS跨域保存

     sinoImageEditModule.saveImage('http://localhost:8055/Home/SaveImage',function(result)
            {
                if(result.State==1)
                    alert('保存成功,文件名:'+result.FileName);
                else
                    alert('保存失败');
            });

sinoimageeditor's People

Contributors

zhujinyong avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.