在微博里给图片加水印,canvas完毕地方截图教程

By admin in 4858美高梅 on 2019年4月12日

前言

想给本身的某个图形加上水印,于是就捣腾了如此个东西。

此成效尚未思虑包容性(太懒了),只在Chrome下测试通过,假如你在怎么着IE火狐下测试不经过就不用作弄了。

因为运用了download属性,所以IE什么的就不用指望了,假若你是火狐浏览器的话,自身改一下包容性应该是没难题的。

代码什么的开了F12友好拿呢,未有压缩哦。(最终揶揄一下,本来代码是贴进博客里面包车型地铁,保存为草稿预览的时候也足以,结果在昭示后js代码全被遮挡了,最后不得不写到页脚里了。所以博得js代码到页脚那里获得就好了)

理所当然你也足以访问上面那一个github地址获取代码:代码地址。

除此以外为了弄进微博,特意把代码从ES201五改成了ES伍,所以多多少少有点乱,可是须求的笺注都助长去了,这么麻烦,点个赞啊。

关于要改水印样式什么的,控制台里更改那么些变量的性质即可。

var watermarkInfo = {
  fontSize: 18, // 像素值
  fontFamily: 'cursive',
  content: '',
  color: '#fffbf0'
};

 废话就不多说了,直接上创作。

采取背景图后,设置水印文字,然后拖动水印文字到任意地点,最后点击下载文件按钮即可。

选料背景图
安装水印

 

在搜狐里给图片加水印(canvas + drag),

JavaScript+html伍 canvas达成位置截图教程,html伍canvas

近日有时光精晓了下html五的各API,发现和讯博客园的头像设置是接纳canvas完结截图的,加以前段时间明白了下html5的File
API使用File API 之FileReader落成公文上传《JavaScript File
API文件上传预览》,
进一步觉得html伍好玩了,想着也试试写写那作用权当学习canvas吧。
上边奉上自笔者要好写的一个demo,代码写得比较少,很多细节不会处理。如若有不妥当的地点恳请指教,多谢啦
^_^ ^_^
4858美高梅 ,成效实现步奏:

  • 1、获取文件,读取文件并生成url
  • 二、依照容器的高低使用canvas绘制图片
  • 3、使用canvas绘制遮罩层
  • 4、使用canvas绘制裁剪后的图样
  • 伍、拖动裁剪框,重新裁剪图片

PS:因为是先把demo写好再写那篇小说的,所以分段贴的代码是直接从代码里面壹段段拷的,要注意this对象喔
先是步:获取文件,读取文件并生成url
在此地作者是使用html5里面包车型大巴file
api处理地点文件上传的,因为这么能够不须要把图片上传出服务器,再由服务器重回图片地址来做预览,详细请看:使用File
API 之FileReader实现文件上传

document.getElementById('post_file').onchange = function() {
  var fileList = this.files[0];
  var oFReader = new FileReader();
  oFReader.readAsDataURL(fileList);
  oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
    postFile.paintImage(oFREvent.target.result);//把预览图片url传给函数
  };
}  

其次步:依照容器的深浅使用canvas绘制图片

在上一步使用File
API的FileReader已经得到了急需上传图片的地方了,接下去须求动用canvas把这几个图形绘制出来。那里怎么不间接插入img而用canvas重新绘制呢,那不是少见多怪了啊?其实否则。假诺用img直接插入页面,就不能自适应居中了,借使采纳canvas绘制图片,不但能使图片自适应居中以及能等比例缩放,并且有利于把图纸的坐标,尺寸大小传给后来的遮罩层,那样能根据图片的坐标以及图片的尺码大小来绘制遮罩层。
那里稍微要留意下canvas的drawImage方法。

paintImage: function(url) {
  var t = this;
  var createCanvas = t.getImage.getContext("2d");
  var img = new Image();
  img.src = url;
  img.onload = function(){

    //等比例缩放图片(如果图片宽高都比容器小,则绘制的图片宽高 = 原图片的宽高。)
    //如果图片的宽度或者高度比容器大,则宽度或者高度 = 容器的宽度或者高度,另一高度或者宽度则等比例缩放
    //t.imgWidth:绘制后图片的宽度;t.imgHeight:绘制后图片的高度;t.px:绘制后图片的X轴;t.py:绘制后图片的Y轴
    if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
      t.imgWidth = img.width;
      t.imgHeight = img.height;

    } else {
      var pWidth = img.width / (img.height / t.regional.offsetHeight);
      var pHeight = img.height / (img.width / t.regional.offsetWidth);
      t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
      t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
    }
    //图片的坐标
    t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
    t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';

    t.getImage.height = t.imgHeight;
    t.getImage.width = t.imgWidth;
    t.getImage.style.left = t.px;
    t.getImage.style.top = t.py;

    createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);//没用直接插入背景图片而用canvas绘制图片,是为了调整所需框内图片的大小
    t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址
    t.cutImage();
    t.drag();
  };
},
 

出去的功效是那般的:

4858美高梅 1

 第3步:使用canvas绘制遮罩层 在上一步中早已把须求裁剪的背景图绘制出来了,今后亟待基于背景图的坐标和尺寸来绘制遮罩层覆盖在背景上边,并且动用canvas的clearRect方法清空出1块裁剪区域,使之与不裁剪的地方做明暗比较。
(这里的遮罩层仅仅是用来做体现效果,并从未做裁剪图片的工作。不驾驭这一步能或不可能一向去掉?有知情的童鞋麻烦告诉下自家。)

//绘制遮罩层:
t.editBox.height = t.imgHeight;
t.editBox.width = t.imgWidth;
t.editBox.style.display = 'block';
t.editBox.style.left = t.px;
t.editBox.style.top = t.py;

var cover = t.editBox.getContext("2d");
cover.fillStyle = "rgba(0, 0, 0, 0.5)";
cover.fillRect (0,0, t.imgWidth, t.imgHeight);
cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);
 

第五步:使用canvas绘制裁剪后的图片
在第3步里面,把遮罩层绘制好了,然则遮罩层并从未裁剪的能力,仅仅是用来展现裁剪区域与非裁剪区域的相比较而已,所以那里就起来做裁剪图片的功力了。同样接纳到canvas的drawImage方法。

//绘制剪切图片:
t.editPic.height = t.sHeight;
t.editPic.width = t.sWidth;
var ctx = t.editPic.getContext('2d');
var images = new Image();
images.src = t.imgUrl;
images.onload = function(){
  ctx.drawImage(images,t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth); //裁剪图片
  document.getElementById('show_edit').getElementsByTagName('img')[0].src = t.editPic.toDataURL(); //把裁剪后的图片使用img标签显示出来
}

第5步:拖动裁剪框,重新裁剪图片 使用截图上传头像成效时大家期待能裁剪到知足的图样,所以裁剪框就须要不停的更动才足以裁剪出圆满的图纸。前几步已经把裁剪图片的基本成效做出来了,所以未来亟待做的正是裁剪框跟进鼠标的移位来实时裁剪图片。

drag: function() {
  var t = this;
  var draging = false;
  var startX = 0;
  var startY = 0;

  document.getElementById('cover_box').onmousemove = function(e) {
    //获取鼠标到背景图片的距离
    var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
    var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
    //判断鼠标是否在裁剪区域里面:
    if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
      this.style.cursor = 'move';

      this.onmousedown = function(){
        draging = true;
        //记录上一次截图的坐标
        t.ex = t.sx;
        t.ey = t.sy;
        //记录鼠标按下时候的坐标
        startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
        startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
      }
      window.onmouseup = function() {
        draging = false;
      }

      if (draging) {
        //移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置),裁剪区域不能超出遮罩层的区域;
        if ( t.ex + (pageX - startX) < 0 ) {
          t.sx = 0;
        } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
          t.sx = t.imgWidth - t.sWidth;
        } else {
          t.sx = t.ex + (pageX - startX);
        };

        if (t.ey + (pageY - startY) < 0) {
          t.sy = 0;
        } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
          t.sy = t.imgHeight - t.sHeight;
        } else {
          t.sy = t.ey + (pageY - startY);
        }

        t.cutImage();
      }
    } else{
      this.style.cursor = 'auto';
    }
  };
}   

功勋卓著告成,图片如下:

 4858美高梅 2

有童鞋提议,每移动一下鼠标就裁剪一张图纸不是很耗质量吧,为啥不用background-position来做预览效果
保存的时候才用canvas裁出来?壹听觉得那提议很有道理,所以就在第6步把代码稍微改变了瞬间。鼠标移动的时候的预览效果是改变图片的background-position,点击保存按钮的时候才裁剪图片,把裁剪下来的图形生成新的url就足以传给服务器啦~~
以下代码是改良过来的,大家有啥样其余好的建议欢迎建议来喔 ^_^ ^_^
demo完整代码如下:
小心:因为用的是seajs写的,所以有个别留意下文件的加载情状啦
css:

body{text-align:center;}
#label{border:1px solid #ccc;background-color:#fff;text-align:center;height:300px; width:300px;margin:20px auto;position:relative;}
#get_image{position:absolute;}
#edit_pic{position:absolute;display:none;background:#000;}
#cover_box{position: absolute;z-index: 9999;display:none;top:0px;left:0px;}
#show_edit{margin: 0 auto;display:inline-block;}
#show_pic{height:100px;width:100px;border:2px solid #000;overflow:hidden;margin:0 auto;display:inline-block; }

html: 

<input type="file" name="file" id="post_file">
<button id="save_button">保存</button>
<div id="label">
  <canvas id="get_image"></canvas>
  <p>
    <canvas id="cover_box"></canvas>
    <canvas id="edit_pic"></canvas>
  </p>
</div>
<p>

  <img src="">
</p>


<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript">
seajs.use(['_example/fileAPI/index_v2.js'], function(clipFile) {
  clipFile.init({
    clipPos: {    //裁剪框的默认尺寸与定位
      x: 15,
      y: 15,
      height: 100,
      width: 100,
    },
  });
});

</script> 

js:

define(function(require, exports, module) {

  'use strict';

  var postFile = {
    init: function(options) {
      var t = this;
      t.regional = document.getElementById('label');
      t.getImage = document.getElementById('get_image');
      t.clipPic = document.getElementById('edit_pic');
      t.coverBox = document.getElementById('cover_box');
      t.achieve = document.getElementById('show_edit');

      t.clipPos = options.clipPos;

      //初始化图片基本参数
      t.bgPagePos = {     
        x: 0,
        y: 0,
        height: 0,
        width: 0
      };

      //传进图片
      document.getElementById('post_file').addEventListener("change", t.handleFiles, false);

      //点击保存按钮后再裁剪图片
      document.getElementById('save_button').onclick = function() {

        //绘制剪切后的图片:
        t.clipPic.height = t.clipPos.height;
        t.clipPic.width = t.clipPos.width;

        var ctx = t.clipPic.getContext('2d');
        var images = new Image();
        images.src = t.imgUrl;
        images.onload = function(){

          //drawImage(images,相对于裁剪图片的X, 相对于裁剪图片的Y, 裁剪的高度, 裁剪的宽度, 显示在画布的X, 显示在画布的Y, 显示在画布多高, 显示在画布多宽);
          ctx.drawImage(images,t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width, 0, 0, t.clipPos.height, t.clipPos.width); //裁剪图片

          document.getElementById('show_pic').getElementsByTagName('img')[0].src = t.clipPic.toDataURL();
        }
      };

      t.drag();
    },
    handleFiles: function() {

      var fileList = this.files[0];
      var oFReader = new FileReader();

      //读取文件内容
      oFReader.readAsDataURL(fileList);

      //当读取操作成功完成时调用.
      oFReader.onload = function (oFREvent) { 

        //把预览图片URL传给函数
        postFile.paintImage(oFREvent.target.result);
      };
    },
    paintImage: function(url) {
      var t = this;
      var createCanvas = t.getImage.getContext("2d");

      var img = new Image();
      img.src = url;

      //把传进来的图片进行等比例缩放
      img.onload = function(){
        //等比例缩放图片(如果图片宽高都比容器小,则绘制的图片宽高 = 原图片的宽高。)
        //如果图片的宽度或者高度比容器大,则宽度或者高度 = 容器的宽度或者高度,另一高度或者宽度则等比例缩放

        //t.bgPagePos.width:绘制后图片的宽度;
        //t.bgPagePos.height:绘制后图片的高度;
        //t.bgPagePos.x:绘制后图片的X轴;
        //t.bgPagePos.y:绘制后图片的Y轴
        if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
          t.bgPagePos.width = img.width;
          t.bgPagePos.height = img.height;

        } else {
          var pWidth = img.width / (img.height / t.regional.offsetHeight);
          var pHeight = img.height / (img.width / t.regional.offsetWidth);

          t.bgPagePos.width = img.width > img.height ? t.regional.offsetWidth : pWidth;
          t.bgPagePos.height = img.height > img.width ? t.regional.offsetHeight : pHeight;
        }

        //图片的坐标
        t.bgPagePos.x = (t.regional.offsetWidth - t.bgPagePos.width) / 2 + 'px';
        t.bgPagePos.y = (t.regional.offsetHeight - t.bgPagePos.height) / 2 + 'px';

        t.getImage.height = t.bgPagePos.height;
        t.getImage.width = t.bgPagePos.width;
        t.getImage.style.left = t.bgPagePos.x;
        t.getImage.style.top = t.bgPagePos.y;

        createCanvas.drawImage(img,0,0,t.bgPagePos.width,t.bgPagePos.height);//没用直接插入背景图片而用canvas绘制图片,是为了调整所需框内图片的大小

        t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址

        t.clipImg();
      };
    },
    clipImg: function() {
      var t = this;

      //绘制遮罩层:
      t.coverBox.height = t.bgPagePos.height;
      t.coverBox.width = t.bgPagePos.width;
      t.coverBox.style.display = 'block';
      t.coverBox.style.left = t.bgPagePos.x;
      t.coverBox.style.top = t.bgPagePos.y;

      var cover = t.coverBox.getContext("2d");
      cover.fillStyle = "rgba(0, 0, 0, 0.5)";
      cover.fillRect (0,0, t.bgPagePos.width, t.bgPagePos.height);
      cover.clearRect(t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width);

      t.achieve.style.background = 'url(' + t.imgUrl + ')' + -t.clipPos.x + 'px ' + -t.clipPos.y + 'px no-repeat';
      t.achieve.style.height = t.clipPos.height + 'px';
      t.achieve.style.width = t.clipPos.width + 'px';
    },
    drag: function() {
      var t = this;
      var draging = false;
      var _startPos = null;

      t.coverBox.onmousemove = function(e) {
        e = e || window.event;

        if ( e.pageX == null && e.clientX != null ) {

          var doc = document.documentElement, body = document.body;

          e.pageX = e.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
          e.pageY = e.clientY + (doc && doc.scrollTop || body && body.scrollTop);
        }

        //获取鼠标到背景图片的距离
        var _mousePos = {
          left: e.pageX - ( t.regional.offsetLeft + this.offsetLeft ),
          top: e.pageY - ( t.regional.offsetTop + this.offsetTop )
        }

        //判断鼠标是否在裁剪区域里面:
        if ( _mousePos.left > t.clipPos.x && _mousePos.left < t.clipPos.x + t.clipPos.width && _mousePos.top > t.clipPos.y && _mousePos.top < t.clipPos.y + t.clipPos.height ) {
          this.style.cursor = 'move';

          this.onmousedown = function(){
            draging = true;
            //记录上一次截图的坐标
            t.ex = t.clipPos.x; 
            t.ey = t.clipPos.y;

            //记录鼠标按下时候的坐标
            _startPos = {
              left: e.pageX - ( t.regional.offsetLeft + this.offsetLeft ),
              top: e.pageY - ( t.regional.offsetTop + this.offsetTop )
            }
          }

          if (draging) {
            //移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置),裁剪区域不能超出遮罩层的区域;
            if ( t.ex + ( _mousePos.left - _startPos.left ) < 0 ) {
              t.clipPos.x = 0;
            } else if ( t.ex + ( _mousePos.left - _startPos.left ) + t.clipPos.width > t.bgPagePos.width ) {
              t.clipPos.x = t.bgPagePos.width - t.clipPos.width;
            } else {
              t.clipPos.x = t.ex + ( _mousePos.left - _startPos.left );
            };

            if (t.ey + ( _mousePos.top - _startPos.top ) < 0) {
              t.clipPos.y = 0;
            } else if ( t.ey + ( _mousePos.top - _startPos.top ) + t.clipPos.height > t.bgPagePos.height ) {
              t.clipPos.y = t.bgPagePos.height - t.clipPos.height;
            } else {
              t.clipPos.y = t.ey + ( _mousePos.top - _startPos.top );
            }

            t.clipImg();
          }

          document.body.onmouseup = function() {
            draging = false;
            document.onmousemove = null;
            document.onmouseup = null;
          }
        } else{
          this.style.cursor = 'auto';
        }
      };
    }
  }
  return postFile;
});

以上便是本文的全体内容,希望对大家的学习抱有支持。

在微博里给图片加水印,canvas完毕地方截图教程。这篇小说首要介绍了JavaScript+html5canvas落成本地截图教程,对截图效能感兴趣的同伴们方可参考一下

落实进度中的难点与化解方案

代码什么的就不全部贴上来了,只是讲一下中间遭遇的局地标题与贯彻思路。

这几个难点你可能已经大半精通了,可是为了兼顾全数人,所以还是会将某些相比较简单的技术点也讲一下。

成套达成进度中相见的题材如下

  • 获得图片
  • 将上传文件转换为图片
  • 在图纸上加水印
  • 拖动文字加水印
  • 将最终修改的图片下载下来

前言

想给本人的有的图形加上水印,于是就捣腾了那般个东西。
此效率未有设想包容性(太懒了),只在Chrome下测试通过,即使您在如何IE火狐下测试不通过就毫无戏弄了。
因为使用了download属性,所以IE什么的就毫无指望了,若是您是火狐浏览器的话,本身改一下包容性应该是没难题的。
代码什么的开了F12祥和拿呢,未有压缩哦。(最后揶揄一下,本来代码是贴进博客里面的,保存为草稿预览的时候也得以,结果在公布后js代码全被屏蔽了,最终只可以写到页脚里了。所以博得js代码到页脚这里拿走就好了)
当然你也得以访问上面这些github地址获取代码:代码地址。
其它为了弄进天涯论坛,特意把代码从ES20一5改成了ES5,所以多多少少有点乱,但是必要的笺注都丰裕去了,这么麻烦,点个赞啊。
至于要改水印样式什么的,控制台里更改那些变量的习性即可。

var watermarkInfo = {
  fontSize: 18, // 像素值
  fontFamily: 'cursive',
  content: '',
  color: '#fffbf0'
};

 废话就不多说了,直接上创作。
挑选背景图后,设置水印文字,然后拖动水印文字到任意地方,最后点击下载文件按钮即可。
选用背景图 <input id=”target_file” type=”file”/>

然则原始的公文上传控件相比较丑,所以隐藏此控件,并加了四个新的按钮在它眼下

<a class="btn" id="btn_select_file" href="jacascript:void(0)">选择背景图</a>
<input id="target_file" type="file" style="display:none" />

而想达成点击选择背景图按钮去挑选文件,用以下代码即可

// 按下选择的背景图
$('#btn_select_file').click(function () {
  $('#target_file').click();
});

挑选文件后,文件上传控件会触发change事件,此时得以获得文件。

$('#target_file').change(function (event) {
    var imgFile = event.target.files[0];
    ......
});

您大概感兴趣的篇章:

  • THINKPHP+JS实现缩放图片式截图的贯彻
  • 运用NodeJS和PhantomJS抓取网址页面音讯以及网址截图
  • JavaScript获得XML数据附示例截图
  • JS图片自动轮换效果完结思路附截图
  • javascript在网页中落实读取剪贴板粘贴截图效用
  • JavaScript获得某年某月的末尾一天附截图
  • JavaScript贯彻网页截图作用
  • js+HTML伍实现摄像截图的诀要

canvas实现本地截图教程,html五canvas
方今有时间理解了下html5的各API,发现搜狐天涯论坛的头像设置是应用canvas完成截图的,加从前段…

近来有时光驾驭了下html伍的各API,发现天涯论坛今日头条的头像设置是应用canvas完结截图的,加从前段时间理解了下html五的File
API使用File API 之FileReader达成文件上传《JavaScript File
API文件上传预览》,
更为觉得html5好玩了,想着也尝试写写那意义权当学习canvas吧。
上边奉上本人要好写的3个demo,代码写得相比较少,很多细节不会处理。假诺有不妥贴的地点恳请指教,多谢啦
^_^ ^_^
效益达成步奏:

获取图片

取得图片实际上正是运用文件上传控件,也等于

<input id="target_file" type="file"/>

可是原始的文件上传控件相比较丑,所以隐藏此控件,并加了1个新的按钮在它后边

<a class="btn" id="btn_select_file" href="jacascript:void(0)">选择背景图</a>
<input id="target_file" type="file" style="display:none" />

而想完成点击采取背景图按钮去选取文件,用以下代码即可

// 按下选择的背景图
$('#btn_select_file').click(function () {
  $('#target_file').click();
});

挑选文件后,文件上传控件会触发change事件,此时得以获得文件。

$('#target_file').change(function (event) {
    var imgFile = event.target.files[0];
    ......
});

将文件转换为图片

文本转换为图片实际上首先需求读取文件,那里须求用到FileReader。

function setImgIntoCanvas(imgFile) {
  var reader = new FileReader();

  reader.onloadend = function (e) {
    var dataURL = e.target.result;
    img.onload = function (event) {
      var ctx = document.getElementById('target_canvas').getContext('2d');
      //将canvas大小设置为和图片一样大
      setCanvasSize(event.target.naturalWidth, event.target.naturalHeight);
      ctx.drawImage(img, 0, 0);
      setCanvasImgToDownloadLink();
    };
    img.src = dataURL;
  };
   reader.readAsDataURL(imgFile);
   resetWatermark();
};

 

以上为主题代码,通过FileReaderreadAsDataURL函数读取文件能够取得Base6四格式的图样数据,将图纸数据赋值给2个Image对象。

壹、获取文件,读取文件并生成url

将文件转换为图片

文本转换为图片实际上首先须求读取文件,那里须要用到FileReader。

function setImgIntoCanvas(imgFile) {
  var reader = new FileReader();

  reader.onloadend = function (e) {
    var dataURL = e.target.result;
    img.onload = function (event) {
      var ctx = document.getElementById('target_canvas').getContext('2d');
      //将canvas大小设置为和图片一样大
      setCanvasSize(event.target.naturalWidth, event.target.naturalHeight);
      ctx.drawImage(img, 0, 0);
      setCanvasImgToDownloadLink();
    };
    img.src = dataURL;
  };
   reader.readAsDataURL(imgFile);
   resetWatermark();
};

 

以上为骨干代码,通过FileReaderreadAsDataURL函数读取文件能够拿走Base64格式的图形数据,将图片数据赋值给三个Image对象。

在图纸上加水印

看了上边的代码,里面就有一个手续是将图纸渲染进canvas,实际上宗旨效用正是用canvas来给图片加水印。
操作思路正是先将图纸用drawImage渲染进canvas,再在钦点的地方用fillText渲染文字即可,并将最后的canvas用
toDataURL 转化为图片数据即可。
具体的用法能够参照作者的代码,然后查一下canvas的API即可。
那种在新手看来很难的事物说穿了事实上很简短,那里就不讲了。  
可是接下去就劳动了,倘若是反动水印,图片上加水印的地点一定不能够和图纸色差太小,要不然很难发现。
所以针对分化的图纸,水印的职位一定必要可调动。
最开端的方案是给定三个输入框,然后输入地点,接着渲染水印到文本上。
可是那么些方案首先就面临一个易用性的题目,小编怎么获得实际的职位吗,只可以二个贰个去试,并不是每一种用户都会用截图软件去找地点。
所以那里运用拖动文字的方案。

二、依照容器的高低使用canvas绘制图片

在图片上加水印

看了地点的代码,里面就有一个步骤是将图纸渲染进canvas,实际上核心功用就是用canvas来给图片加水印。

操作思路就是先将图纸用drawImage渲染进canvas,再在钦点的地点用fillText渲染文字即可,并将最终的canvas用

toDataURL

转载为图片数据即可。

现实的用法能够参考小编的代码,然后查一下canvas的API即可。

那种在新手看来很难的东西说穿了实际很简短,那里就不讲了。

 

但是接下去就劳动了,要是是反动水印,图片上加水印的地点一定不能够和图纸色差太小,要不然很难发现。

据此针对不一致的图形,水印的地点一定要求可调动。

最伊始的方案是给定八个输入框,然后输入地点,接着渲染水印到文本上。

只是这么些方案首先就面临叁个易用性的题目,作者怎么获得实际的职位吗,只好八个3个去试,并不是各类用户都会用截图软件去找地方。

据此那边运用拖动文字的方案。

拖动文字加水印

canvas就算也能捕获事件,获取鼠标地点,并促成拖动文字效果,可是贯彻起来太难为。

从而这边运用更简便易行的方案。

当我们设置水印时,间接将文字渲染到canvas上,然后在文字上方安置3个颜色透明的始末为水印文字的span成分。

然后我们在那些span成分上加drag事件。

HTML伍拖动作用网上第一次全国代表大会堆,那里就不讲了。

最首要讲一下跌实思路:

在起来拖动时,重新用图形渲染canvas,使得以前渲染的文字消失。

在得了拖动时,获取到具体的任务,再另行将文字渲染进canvas。

这边谈到来差不多,其实照旧有1部分细节,包罗css和js的格外,比如文字拖动到分界时的处理格局,又例如文字拖动到分界出现换行的景况。

还有1对别样的小坑点,须要您自身看代码去体会了。

此地贴出部分代码:

     // 绑定移动水印相关事件
     var bindEvent4DragWatermark = function () {
          $('#watermark').on('dragstart', function (e) {
            var ctx = document.getElementById('target_canvas').getContext('2d');
            ctx.clearRect(0, 0, $('#target_canvas').width(), $('#target_canvas').height());
            ctx.drawImage(img, 0, 0);
            // 显示可拖拽水印
            $(this).addClass('selected');
            watermarkInfo.offsetX = e.originalEvent.offsetX + canvasInfo.left;
            watermarkInfo.offsetY = e.originalEvent.offsetY + canvasInfo.top;
          });
          // 让水印跟着鼠标移动
          $('#watermark').on('drag', function (e) {
            var x = e.originalEvent.pageX;
            var y = e.originalEvent.pageY;
            if (x === 0 && y === 0) {
              return;
            }
            x -= watermarkInfo.offsetX;
            y -= watermarkInfo.offsetY;

            $('#watermark').css('left', x).css('top', y);
          });
          $('#watermark').on('dragend', function (e) {
            // 调整位置,使水印无法超出canvas边界
            var x = e.originalEvent.pageX - watermarkInfo.offsetX;
            var y = e.originalEvent.pageY - watermarkInfo.offsetY;
            if (x < 0) {
              x = 0;
            }
            if (y < 0) {
              y = 0;
            }

            var maxX = canvasInfo.width - watermarkInfo.width;
            var maxY = canvasInfo.height - watermarkInfo.height;
            if (x > maxX) {
              x = maxX;
            }
            if (y > maxY) {
              y = maxY;
            }
            $('#watermark').css('left', x).css('top', y);
            // 拖拽完水印,文本隐藏
            $('#watermark').removeClass('selected');
            setTextIntoCanvas();
          });
          // 让鼠标不显示禁用样式
          $('#canvas-container').on('dragover', function (e) {
            e.preventDefault();
          });
        }

三、使用canvas绘制遮罩层

拖动文字加水印

canvas即便也能捕获事件,获取鼠标地点,并贯彻拖动文字效果,不过完成起来太费事。

就此那里运用更不难的方案。

当大家设置水印时,直接将文字渲染到canvas上,然后在文字上方安置三个颜色透明的内容为水印文字的span成分。

然后我们在那一个span成分上加drag事件。

HTML5拖动功用网上一大堆,那里就不讲了。

重大讲一降低实思路:

在起头拖动时,重新用图形渲染canvas,使得此前渲染的文字消失。

在甘休拖动时,获取到具体的职责,再另行将文字渲染进canvas。

那边提及来差不多,其实依然有壹部分细节,包蕴css和js的协作,比如文字拖动到分界时的处理格局,又例如文字拖动到分界出现换行的动静。

再有一些其它的小坑点,需求你协调看代码去体会了。

此地贴出部分代码:

     // 绑定移动水印相关事件
     var bindEvent4DragWatermark = function () {
          $('#watermark').on('dragstart', function (e) {
            var ctx = document.getElementById('target_canvas').getContext('2d');
            ctx.clearRect(0, 0, $('#target_canvas').width(), $('#target_canvas').height());
            ctx.drawImage(img, 0, 0);
            // 显示可拖拽水印
            $(this).addClass('selected');
            watermarkInfo.offsetX = e.originalEvent.offsetX + canvasInfo.left;
            watermarkInfo.offsetY = e.originalEvent.offsetY + canvasInfo.top;
          });
          // 让水印跟着鼠标移动
          $('#watermark').on('drag', function (e) {
            var x = e.originalEvent.pageX;
            var y = e.originalEvent.pageY;
            if (x === 0 && y === 0) {
              return;
            }
            x -= watermarkInfo.offsetX;
            y -= watermarkInfo.offsetY;

            $('#watermark').css('left', x).css('top', y);
          });
          $('#watermark').on('dragend', function (e) {
            // 调整位置,使水印无法超出canvas边界
            var x = e.originalEvent.pageX - watermarkInfo.offsetX;
            var y = e.originalEvent.pageY - watermarkInfo.offsetY;
            if (x < 0) {
              x = 0;
            }
            if (y < 0) {
              y = 0;
            }

            var maxX = canvasInfo.width - watermarkInfo.width;
            var maxY = canvasInfo.height - watermarkInfo.height;
            if (x > maxX) {
              x = maxX;
            }
            if (y > maxY) {
              y = maxY;
            }
            $('#watermark').css('left', x).css('top', y);
            // 拖拽完水印,文本隐藏
            $('#watermark').removeClass('selected');
            setTextIntoCanvas();
          });
          // 让鼠标不显示禁用样式
          $('#canvas-container').on('dragover', function (e) {
            e.preventDefault();
          });
        }

将最终修改的图片下载下来

事先大家曾经讲到了用canvas的toDataURL函数获取最终的图形数据,然后关于下载就须求利用贰个HTML五的download属性。

<a class="btn" id="download_file" href="#" download="水印图片">下载合成图片</a>

接下去是安装图片数据的代码

/**
 * 设置canvas图像到下载链接上
 */
function setCanvasImgToDownloadLink() {
  var imgData = document.getElementById('target_canvas').toDataURL();
  $('#download_file').attr('href', imgData);
};

4、使用canvas绘制裁剪后的图片

将最后修改的图片下载下来

事先大家早就讲到了用canvas的toDataURL函数获取最后的图片数据,然后关于下载就须求运用一个HTML伍的download属性。

<a class="btn" id="download_file" href="#" download="水印图片">下载合成图片</a>

接下去是设置图片数据的代码

/**
 * 设置canvas图像到下载链接上
 */
function setCanvasImgToDownloadLink() {
  var imgData = document.getElementById('target_canvas').toDataURL();
  $('#download_file').attr('href', imgData);
};

将功用写进博客里

关于那有的第三要申请JS权限。

其次如果观看仔细,还足以在自家的代码中来看下列代码

// 此处通过这种方式将html插入,是因为博客园自动屏蔽了canvas标签和download属性
var initHtmlConstruct = function () {
  $('#canvas-container').text('').append('<canvas id="target_canvas" width="100" height="100">浏览器不支持此功能,请升级</canvas>')
  $('#toolbar').append('<a class="btn" id="download_file" href="#" download="水印图片">下载合成图片</a>');
}

至于原因注释里也写了,是因为博客园的编辑器屏蔽了canvas标签和download属性。

伍、拖动裁剪框,重新裁剪图片

将成效写进博客里

关于那有个别率先要提请JS权限。

说不上倘若观望仔细,还是能在本身的代码中看看下列代码

// 此处通过这种方式将html插入,是因为博客园自动屏蔽了canvas标签和download属性
var initHtmlConstruct = function () {
  $('#canvas-container').text('').append('<canvas id="target_canvas" width="100" height="100">浏览器不支持此功能,请升级</canvas>')
  $('#toolbar').append('<a class="btn" id="download_file" href="#" download="水印图片">下载合成图片</a>');
}

有关原因注释里也写了,是因为乐乎的编写器屏蔽了canvas标签和download属性。

总结

如上所述,那实际上是四个非常的小的效应,可是要把它做得好用一点,涉及到的知识点并不少,也不并不只笔者关系的那一点(比如canvas的反射率样式并不是用图形哦,而是用css样式,照旧从《css揭秘》那本书上学到的)。

理所当然这一个事物或多或少依然有那么部分毛病,也设有有的包容性上的难点,可是对本人而言够用就好。

也冀望下边介绍的一对东西对您也有获取。

+ drag), 前言
想给协调的片段图形加上水印,于是就捣腾了如此个东西。
此效用尚未挂念包容性(太懒了)…

PS:因为是先把demo写好再写那篇小说的,所以分段贴的代码是直接从代码里面1段段拷的,要专注this对象喔
首先步:获取文件,读取文件并生成url
在此处本人是使用html伍里面包车型大巴file
api处理地点文件上传的,因为那样能够不须求把图纸上流传服务器,再由服务器再次来到图片地址来做预览,详细请看:使用File
API 之FileReader达成文件上传

总结

总的来说,那实际上是1个十分小的效应,不过要把它做得好用一点,涉及到的知识点并不少,也不并不只笔者关系的那一点(比如canvas的光滑度样式并不是用图片哦,而是用css样式,仍旧从《css揭秘》那本书上学到的)。

本来那一个东西或多或少仍旧有那么有个别通病,也设有一些包容性上的题材,然则对自作者而言够用就好。

也可望地点介绍的壹部分事物对你也有获得。

1 document.getElementById('post_file').onchange = function() {
2   var fileList = this.files[0];
3   var oFReader = new FileReader();
4   oFReader.readAsDataURL(fileList);
5   oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
6     postFile.paintImage(oFREvent.target.result);//把预览图片url传给函数
7   };
8 }  

其次步:遵照容器的高低使用canvas绘制图片

在上一步使用File
API的File里德r已经获得了亟需上传图片的地点了,接下去须要动用canvas把这么些图片绘制出来。那里为什么不直接插入img而用canvas重新绘制呢,那不是大做文章了吧?其实不然。假如用img直接插入页面,就不能够自适应居中了,借使选取canvas绘制图片,不但能使图片自适应居中以及能等比例缩放,并且有利于把图片的坐标,尺寸大小传给后来的遮罩层,那样能依据图片的坐标以及图片的尺码大小来绘制遮罩层。
那边稍微要留意下canvas的drawImage方法。

 1 paintImage: function(url) {
 2   var t = this;
 3   var createCanvas = t.getImage.getContext("2d");
 4   var img = new Image();
 5   img.src = url;
 6   img.onload = function(){
 7   
 8     //等比例缩放图片(如果图片宽高都比容器小,则绘制的图片宽高 = 原图片的宽高。)
 9     //如果图片的宽度或者高度比容器大,则宽度或者高度 = 容器的宽度或者高度,另一高度或者宽度则等比例缩放
10     //t.imgWidth:绘制后图片的宽度;t.imgHeight:绘制后图片的高度;t.px:绘制后图片的X轴;t.py:绘制后图片的Y轴
11     if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
12       t.imgWidth = img.width;
13       t.imgHeight = img.height;
14   
15     } else {
16       var pWidth = img.width / (img.height / t.regional.offsetHeight);
17       var pHeight = img.height / (img.width / t.regional.offsetWidth);
18       t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
19       t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
20     }
21     //图片的坐标
22     t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
23     t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';
24       
25     t.getImage.height = t.imgHeight;
26     t.getImage.width = t.imgWidth;
27     t.getImage.style.left = t.px;
28     t.getImage.style.top = t.py;
29   
30     createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);//没用直接插入背景图片而用canvas绘制图片,是为了调整所需框内图片的大小
31     t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址
32     t.cutImage();
33     t.drag();
34   };
35 },

出来的效用是这么的:

4858美高梅 3

 第3步:使用canvas绘制遮罩层 在上一步中早已把供给裁剪的背景图绘制出来了,现在内需依照背景图的坐标和尺寸来绘制遮罩层覆盖在背景上面,并且选用canvas的clearRect方法清空出1块裁剪区域,使之与不裁剪的地点做明暗相比。
(那里的遮罩层仅仅是用来做显示效果,并不曾做裁剪图片的干活。不知道这一步能还是不能够间接去掉?有精通的童鞋麻烦告诉下自家。)

 1 //绘制遮罩层:
 2 t.editBox.height = t.imgHeight;
 3 t.editBox.width = t.imgWidth;
 4 t.editBox.style.display = 'block';
 5 t.editBox.style.left = t.px;
 6 t.editBox.style.top = t.py;
 7   
 8 var cover = t.editBox.getContext("2d");
 9 cover.fillStyle = "rgba(0, 0, 0, 0.5)";
10 cover.fillRect (0,0, t.imgWidth, t.imgHeight);
11 cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth)

第陆步:使用canvas绘制裁剪后的图纸
在第2步里面,把遮罩层绘制好了,可是遮罩层并不曾裁剪的力量,仅仅是用来体现裁剪区域与非裁剪区域的相比而已,所以那边就起来做裁剪图片的机能了。同样利用到canvas的drawImage方法。

 1 //绘制剪切图片:
 2 t.editPic.height = t.sHeight;
 3 t.editPic.width = t.sWidth;
 4 var ctx = t.editPic.getContext('2d');
 5 var images = new Image();
 6 images.src = t.imgUrl;
 7 images.onload = function(){
 8   ctx.drawImage(images,t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth); //裁剪图片
 9   document.getElementById('show_edit').getElementsByTagName('img')[0].src = t.editPic.toDataURL(); //把裁剪后的图片使用img标签显示出来
10 }

 

第五步:拖动裁剪框,重新裁剪图片 使用截图上传头像功效时大家意在能裁剪到满足的图样,所以裁剪框就必要不停的更动才足以裁剪出完美的图纸。前几步已经把裁剪图片的基本功能做出来了,所以今后急需做的便是裁剪框跟进鼠标的活动来实时裁剪图片。

 1 drag: function() {
 2   var t = this;
 3   var draging = false;
 4   var startX = 0;
 5   var startY = 0;
 6   
 7   document.getElementById('cover_box').onmousemove = function(e) {
 8     //获取鼠标到背景图片的距离
 9     var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
10     var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
11     //判断鼠标是否在裁剪区域里面:
12     if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
13       this.style.cursor = 'move';
14         
15       this.onmousedown = function(){
16         draging = true;
17         //记录上一次截图的坐标
18         t.ex = t.sx;
19         t.ey = t.sy;
20         //记录鼠标按下时候的坐标
21         startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
22         startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
23       }
24       window.onmouseup = function() {
25         draging = false;
26       }
27         
28       if (draging) {
29         //移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置),裁剪区域不能超出遮罩层的区域;
30         if ( t.ex + (pageX - startX) < 0 ) {
31           t.sx = 0;
32         } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
33           t.sx = t.imgWidth - t.sWidth;
34         } else {
35           t.sx = t.ex + (pageX - startX);
36         };
37   
38         if (t.ey + (pageY - startY) < 0) {
39           t.sy = 0;
40         } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
41           t.sy = t.imgHeight - t.sHeight;
42         } else {
43           t.sy = t.ey + (pageY - startY);
44         }
45   
46         t.cutImage();
47       }
48     } else{
49       this.style.cursor = 'auto';
50     }
51   };
52 }

 

居功至伟告成,图片如下:

 4858美高梅 4

有童鞋提出,每移动一下鼠标就裁剪一张图片不是很耗质量啊,为啥不要background-position来做预览效果
保存的时候才用canvas裁出来?一听觉得那建议很有道理,所以就在第伍步把代码稍微改变了1晃。鼠标移动的时候的预览效果是改变图片的background-position,点击保存按钮的时候才裁剪图片,把裁剪下来的图纸生成新的url就能够传给服务器啦~~
以下代码是勘误过来的,大家有如何别的好的提出欢迎提出来喔 ^_^ ^_^

demo完整代码如下:
在意:因为用的是seajs写的,所以有个别留意下文件的加载情形啦

css:

1 body{text-align:center;}
2 #label{border:1px solid #ccc;background-color:#fff;text-align:center;height:300px; width:300px;margin:20px auto;position:relative;}
3 #get_image{position:absolute;}
4 #edit_pic{position:absolute;display:none;background:#000;}
5 #cover_box{position: absolute;z-index: 9999;display:none;top:0px;left:0px;}
6 #show_edit{margin: 0 auto;display:inline-block;}
7 #show_pic{height:100px;width:100px;border:2px solid #000;overflow:hidden;margin:0 auto;display:inline-block; }

html: 

 1 <input type="file" name="file" id="post_file">
 2 <button id="save_button">保存</button>
 3 <div id="label">
 4   <canvas id="get_image"></canvas>
 5   <p>
 6     <canvas id="cover_box"></canvas>
 7     <canvas id="edit_pic"></canvas>
 8   </p>
 9 </div>
10 <p>
11   
12   <img src="">
13 </p>
14  
15  
16 <script type="text/javascript" src="../../lib/seajs/sea.js"></script>
17 <script type="text/javascript">
18 seajs.use(['_example/fileAPI/index_v2.js'], function(clipFile) {
19   clipFile.init({
20     clipPos: {    //裁剪框的默认尺寸与定位
21       x: 15,
22       y: 15,
23       height: 100,
24       width: 100,
25     },
26   });
27 });
28  
29 </script>

js:

4858美高梅 54858美高梅 6

  1 define(function(require, exports, module) {
  2  
  3   'use strict';
  4  
  5   var postFile = {
  6     init: function(options) {
  7       var t = this;
  8       t.regional = document.getElementById('label');
  9       t.getImage = document.getElementById('get_image');
 10       t.clipPic = document.getElementById('edit_pic');
 11       t.coverBox = document.getElementById('cover_box');
 12       t.achieve = document.getElementById('show_edit');
 13  
 14       t.clipPos = options.clipPos;
 15  
 16       //初始化图片基本参数
 17       t.bgPagePos = {    
 18         x: 0,
 19         y: 0,
 20         height: 0,
 21         width: 0
 22       };
 23  
 24       //传进图片
 25       document.getElementById('post_file').addEventListener("change", t.handleFiles, false);
 26  
 27       //点击保存按钮后再裁剪图片
 28       document.getElementById('save_button').onclick = function() {
 29  
 30         //绘制剪切后的图片:
 31         t.clipPic.height = t.clipPos.height;
 32         t.clipPic.width = t.clipPos.width;
 33  
 34         var ctx = t.clipPic.getContext('2d');
 35         var images = new Image();
 36         images.src = t.imgUrl;
 37         images.onload = function(){
 38  
 39           //drawImage(images,相对于裁剪图片的X, 相对于裁剪图片的Y, 裁剪的高度, 裁剪的宽度, 显示在画布的X, 显示在画布的Y, 显示在画布多高, 显示在画布多宽);
 40           ctx.drawImage(images,t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width, 0, 0, t.clipPos.height, t.clipPos.width); //裁剪图片
 41            
 42           document.getElementById('show_pic').getElementsByTagName('img')[0].src = t.clipPic.toDataURL();
 43         }
 44       };
 45  
 46       t.drag();
 47     },
 48     handleFiles: function() {
 49  
 50       var fileList = this.files[0];
 51       var oFReader = new FileReader();
 52  
 53       //读取文件内容
 54       oFReader.readAsDataURL(fileList);
 55  
 56       //当读取操作成功完成时调用.
 57       oFReader.onload = function (oFREvent) {
 58  
 59         //把预览图片URL传给函数
 60         postFile.paintImage(oFREvent.target.result);
 61       };
 62     },
 63     paintImage: function(url) {
 64       var t = this;
 65       var createCanvas = t.getImage.getContext("2d");
 66  
 67       var img = new Image();
 68       img.src = url;
 69  
 70       //把传进来的图片进行等比例缩放
 71       img.onload = function(){
 72         //等比例缩放图片(如果图片宽高都比容器小,则绘制的图片宽高 = 原图片的宽高。)
 73         //如果图片的宽度或者高度比容器大,则宽度或者高度 = 容器的宽度或者高度,另一高度或者宽度则等比例缩放
 74  
 75         //t.bgPagePos.width:绘制后图片的宽度;
 76         //t.bgPagePos.height:绘制后图片的高度;
 77         //t.bgPagePos.x:绘制后图片的X轴;
 78         //t.bgPagePos.y:绘制后图片的Y轴
 79         if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
 80           t.bgPagePos.width = img.width;
 81           t.bgPagePos.height = img.height;
 82  
 83         } else {
 84           var pWidth = img.width / (img.height / t.regional.offsetHeight);
 85           var pHeight = img.height / (img.width / t.regional.offsetWidth);
 86  
 87           t.bgPagePos.width = img.width > img.height ? t.regional.offsetWidth : pWidth;
 88           t.bgPagePos.height = img.height > img.width ? t.regional.offsetHeight : pHeight;
 89         }
 90  
 91         //图片的坐标
 92         t.bgPagePos.x = (t.regional.offsetWidth - t.bgPagePos.width) / 2 + 'px';
 93         t.bgPagePos.y = (t.regional.offsetHeight - t.bgPagePos.height) / 2 + 'px';
 94          
 95         t.getImage.height = t.bgPagePos.height;
 96         t.getImage.width = t.bgPagePos.width;
 97         t.getImage.style.left = t.bgPagePos.x;
 98         t.getImage.style.top = t.bgPagePos.y;
 99  
100         createCanvas.drawImage(img,0,0,t.bgPagePos.width,t.bgPagePos.height);//没用直接插入背景图片而用canvas绘制图片,是为了调整所需框内图片的大小
101          
102         t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址
103  
104         t.clipImg();
105       };
106     },
107     clipImg: function() {
108       var t = this;
109  
110       //绘制遮罩层:
111       t.coverBox.height = t.bgPagePos.height;
112       t.coverBox.width = t.bgPagePos.width;
113       t.coverBox.style.display = 'block';
114       t.coverBox.style.left = t.bgPagePos.x;
115       t.coverBox.style.top = t.bgPagePos.y;
116  
117       var cover = t.coverBox.getContext("2d");
118       cover.fillStyle = "rgba(0, 0, 0, 0.5)";
119       cover.fillRect (0,0, t.bgPagePos.width, t.bgPagePos.height);
120       cover.clearRect(t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width);
121  
122       t.achieve.style.background = 'url(' + t.imgUrl + ')' + -t.clipPos.x + 'px ' + -t.clipPos.y + 'px no-repeat';
123       t.achieve.style.height = t.clipPos.height + 'px';
124       t.achieve.style.width = t.clipPos.width + 'px';
125     },
126     drag: function() {
127       var t = this;
128       var draging = false;
129       var _startPos = null;
130  
131       t.coverBox.onmousemove = function(e) {
132         e = e || window.event;
133  
134         if ( e.pageX == null && e.clientX != null ) {
135  
136           var doc = document.documentElement, body = document.body;
137  
138           e.pageX = e.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
139           e.pageY = e.clientY + (doc && doc.scrollTop || body && body.scrollTop);
140         }
141  
142         //获取鼠标到背景图片的距离
143         var _mousePos = {
144           left: e.pageX - ( t.regional.offsetLeft + this.offsetLeft ),
145           top: e.pageY - ( t.regional.offsetTop + this.offsetTop )
146         }
147  
148         //判断鼠标是否在裁剪区域里面:
149         if ( _mousePos.left > t.clipPos.x && _mousePos.left < t.clipPos.x + t.clipPos.width && _mousePos.top > t.clipPos.y && _mousePos.top < t.clipPos.y + t.clipPos.height ) {
150           this.style.cursor = 'move';
151            
152           this.onmousedown = function(){
153             draging = true;
154             //记录上一次截图的坐标
155             t.ex = t.clipPos.x;
156             t.ey = t.clipPos.y;
157  
158             //记录鼠标按下时候的坐标
159             _startPos = {
160               left: e.pageX - ( t.regional.offsetLeft + this.offsetLeft ),
161               top: e.pageY - ( t.regional.offsetTop + this.offsetTop )
162             }
163           }
164  
165           if (draging) {
166             //移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置),裁剪区域不能超出遮罩层的区域;
167             if ( t.ex + ( _mousePos.left - _startPos.left ) < 0 ) {
168               t.clipPos.x = 0;
169             } else if ( t.ex + ( _mousePos.left - _startPos.left ) + t.clipPos.width > t.bgPagePos.width ) {
170               t.clipPos.x = t.bgPagePos.width - t.clipPos.width;
171             } else {
172               t.clipPos.x = t.ex + ( _mousePos.left - _startPos.left );
173             };
174  
175             if (t.ey + ( _mousePos.top - _startPos.top ) < 0) {
176               t.clipPos.y = 0;
177             } else if ( t.ey + ( _mousePos.top - _startPos.top ) + t.clipPos.height > t.bgPagePos.height ) {
178               t.clipPos.y = t.bgPagePos.height - t.clipPos.height;
179             } else {
180               t.clipPos.y = t.ey + ( _mousePos.top - _startPos.top );
181             }
182  
183             t.clipImg();
184           }
185  
186           document.body.onmouseup = function() {
187             draging = false;
188             document.onmousemove = null;
189             document.onmouseup = null;
190           }
191         } else{
192           this.style.cursor = 'auto';
193         }
194       };
195     }
196   }
197   return postFile;
198 });

View Code

 

以上就是本文的全体内容,希望对我们的读书抱有扶助。

转载自http://www.jb51.net/article/79068.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有