- 本地预览（FileReader）
- 拖拽（drag & drop）
- 切图（canvas）
拖拽：
| DataTransfer 对象 | 退拽对象用来传递的媒介，使用一般为Event.dataTransfer。 |
| draggable 属性 | 就是标签元素要设置draggable=true，否则不会有效果，例如： |
| ondragstart 事件 | 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 |
| ondragenter 事件 | 当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上 |
| ondragover 事件 | 拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上 |
| ondrop 事件 | 被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 |
| ondragend 事件 | 当拖拽完成后触发的事件，此事件作用在被拖曳元素上 |
| drageleave事件 | 当拖拽离开此处时触发，只在离开这个对象时触发一次，此事件作用在目标元素上 |
| Event.preventDefault() 方法 | 阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。 |
| Event.effectAllowed 属性 | 就是拖拽的效果。 |
图1是页面上所使用到拖拽的地方。左图为拖拽上传图片，右图为拖拽参考线。
document.ondragleave = function(e){
e.preventDefault();
var el = document.getElementById('target_box');
el.className = el.className.replace(/over/g,'');
}
document.ondrop = function(e){
e.preventDefault();
}
document.ondragenter = function(e){
e.preventDefault();
var el = document.getElementById('target_box');
el.className = el.className + ' over';
}
document.ondragover = function(e){
e.preventDefault();
var el = document.getElementById('target_box');
el.className = el.className + ' over';
}
var box = document.getElementById('target_box');
box.ondrop = function(e){
e.preventDefault();
//获取文件列表
var fileList = e.dataTransfer.files;
var reader = new FileReader();
reader.onload = function(e){
var img = new Image();
img.src = this.result;
img.onload = function(){
if(this.width>1000){
canvas.style.marginLeft = ((this.width - 1000)/2) * -1 + 'px';
}
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this,0,0);
}
}
reader.readAsDataURL(fileList[0]);
document.getElementById('target_box').style.display = 'none';
document.getElementById('doc').style.display = 'display';
};
本地预览（FileReader）
| FileReader接口的方法 | |
|---|---|
| readAsBinaryString(file) | 将文件读取二进制码 通常我们将它传送到后端，后端可以通过这段字符串存储文件 |
| readAsText(file,[encoding]) | 将文件读取文本 第二个参数是文本的编码方式，默认UTF-8 |
| readAsDataURL(file) | 将文件读取为DataURL 将文件读取为一串Data URL字符串，将小文件以一种特殊格式的URL地址直接读入页面。小文件指图像与html等格式的文件。 |
| FileReader接口的事件 | |
| onabort | 数据读取中断时触发 |
| onerror | 数据读取出错时触发 |
| onloadstart | 数据读取开始时触发 |
| onprocess | 数据读取中 |
| onload | 数据读取成功完成时触发 |
| onloadend | 数据读取完成时触发，无论成功失败 |
//增加标尺目标事件
document.getElementById('cvs').ondrop = function(ev){
var div = document.createElement('div');
div.style.width = '100%'
div.style.height = '1px';
div.style.background = '#4affff';
div.style.position = 'absolute'
div.style.top = ev.offsetY + 18 + 'px';
document.getElementById('screen').appendChild(div);
rulerTop.push(ev.offsetY);
return false;
}
Canvas：
这里先介绍下canvas的drawImage方法，切图的核心方法就是这个，我们先来看看官方给出的使用方法与解释：
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)
| image | 所要绘制的图像。这必须是表示 @@##@@ 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。 |
| sourceX, sourceY | 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。 |
| sourceWidth, sourceHeight | 图像所要绘制区域的大小，用图像像素表示。 |
| destX, destY | 所要绘制的图像区域的左上角的画布坐标。 |
| destWidth, destHeight | 图像区域所要绘制的画布大小。 |
//绘制图片
function scaleCanvas (canvas, width, height, destX, destY) {
var w = canvas.width,
h = canvas.height;
var cutCanvas = document.createElement('canvas');
var cutCtx = cutCanvas.getContext('2d');
cutCanvas.width = width;
cutCanvas.height = height;
cutCtx.drawImage(canvas, 0, 0, w, h, destX, destY, w, h);
return cutCanvas;
}
//获取图片URL
function getDataURL (canvas, width, height, destX, destY) {
canvas = scaleCanvas(canvas, width, height, destX, destY);
return canvas.toDataURL('image/jpeg');
}
//将conver转成IMG格式
var convertToImage = function (canvas, width, height, destX, destY) {
var strData = getDataURL(canvas, width, height, destX, destY);
return encodeURIComponent(strData);
}
