html设置自动切图指定位置,HTML5自助切图
在现在这个到处是HTML5话题的时代,好像不懂点HTML5都有点落伍。那我也跟上潮流一把吧,今天给大家分享的是基于HTML5的自助切图。
在组里经常会被某设计师叫切板仔,确实重构很大一部分工作都花在切图上,而如何提高切图效率或者让切图自助化也是我们重构师的追求。基于这个前提我自己抱着研究的心态,使用HTML5大致实现了一下。一开始觉得HTML5是个很神秘很高深的东西,其实当你去了解他,你会发他是很空虚,且很容易上…………….手的。
这里使用到的HTML5技术包括:
本地预览(FileReader)
拖拽(drag & drop)
切图(canvas)
拖拽:
拖拽基本事件如下:
ataTransfer 对象
退拽对象用来传递的媒介,使用一般为Event.dataTransfer。
draggable 属性
就是标签元素要设置draggable=true,否则不会有效果,例如:
title=”拖拽我” draggable=”true”&rt;列表1
ondragstart 事件
当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
ondragenter 事件
当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
ondragover 事件
拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
ondrop 事件
被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
ondragend 事件
当拖拽完成后触发的事件,此事件作用在被拖曳元素上
drageleave事件
当拖拽离开此处时触发,只在离开这个对象时触发一次,此事件作用在目标元素上
Event.preventDefault() 方法
阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性
就是拖拽的效果。
Event.preventDefault() 方法 阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性 就是拖拽的效果。
图1是页面上所使用到拖拽的地方。左图为拖拽上传图片,右图为拖拽参考线。
介绍完拖拽基本事件后,再来看下页面是如何通过拖拽将本地图片通过拖拽的方式拖到页面指定区域使用图片上传,这也是拖拽现在比较常用到的功能。给document增加拖拽事件,当拖拽元素进入页面时改变目标元素样式提示用户目标元素位置,当拖拽元素离开页面后还原样式。代码如下:
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';
}
当图片被拖到上传区域后通过FileReader方法读取本地文件,然后将图片通过canvas来绘制,如果图片的宽度是大于画布1000px将水平居中处理,这里因为切图的时候需要将图片完整切出来,所以在设置canvas宽度时需要显示成图片的大小,所以这里使用了负marginLeft(这里将图片宽度减1000得出超出1000的区域,然后再除于2得出marginLeft的值)外面套一层1000px的方式来实现水平居中。代码如下:
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
数据读取完成时触发,无论成功失败
这里因为标尺不需要做任何事情处理只需要拖拽效果,所以只需要增加draggable属性就可以,代码如下:
然后给目标元素增加Drop事件,当拖拽的标尺在目标元素上放开时新建一个参考线并通过offsetY来获取鼠标释放时的Y坐标,然后再将这个Y坐标存到数组里。
//增加标尺目标事件
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的drawImage方法,切图的核心方法就是这个,我们先来看看官方给出的使用方法与解释:
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight)
image
所要绘制的图像。这必须是表示
sourceX, sourceY
图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。
sourceWidth, sourceHeight
图像所要绘制区域的大小,用图像像素表示。
destX, destY
所要绘制的图像区域的左上角的画布坐标。
destWidth, destHeight
图像区域所要绘制的画布大小。
了解了drawImage方法后我们来看下,如何通过drawImage达到切图效果,其实这里的切图,只是通过drawImage加上高宽和偏移量来实现所谓的切图效果,代码如下:
//绘制图片
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);
}
这里先说下大致实现的原理,首先先创建一个新的canvas然后设置好宽高,而这个宽高就是参考线分隔的每一块宽高,然后过通drawImage将原图上某块局域复制一份出来,再通过toDataURL转成base64编码方便本地显示。
所在在这个Demo中image就是我们刚上传的那个图片,sourceX、sourceY和destWidth、destHeight取图片的原始高宽,而我们要复制的局域也是从新的canvas上的左上角开始,所以这里的sourceX、sourceY为0,0。这里最主要的就是destX、destY,就是他们来控制复制局域的起始坐标,因为新图片是需要从最左边开始复制,所以destX为0,而destY将根据参考线的纵坐标来定值。
这里要注意一下,因为域的问题,所以如果页面不是放到服务器上运行而是本地运行的话会出现权限报错情况
最后附上Demo一枚,欢迎大家尽情的暴、使劲暴。(Demo只支持chrome浏览器,其他浏览器会有不良反应,请见谅)
好了,整个HTML5自助化切图的主要代码就这些,这里第一次尝试用HTML5去做一些实实在在的东西,可能代码并不是最优,还能继续优化,大家如果对于文章有什么建议或不明白的地方欢迎讨论。
在旧版的切图工具里,我们的做法是将图片上传到服务器,然后通过服务器端把图片切好后把对应的地址返回,前端再把页面显示出来。这样的做法会导致在网络慢时出现长时间的等待,而如果页面放弃这里的操作,还需要将图片从服务器端删除掉。在拖拽参考线时也只能通过大量的代码去实现,还需要编写一些服务器端代码。
HTML5版相对有响应速度快(本地读取)、拖拽功能简单、前端切图不需要依赖服务器,减少开发成本。
反正HTML5是个上流、好玩、有趣、简单的好东西,值得你一生拥有。
html设置自动切图指定位置,HTML5自助切图相关推荐
- 怎么用MindManager将导图导出为HTML5交互式导图
Mindmanager思维导图软件有着友好的用户界面以及丰富的思维导图制作功能.再搭配与Microsoft 软件的无缝集成功能,使得这款思维导图软件越来越受到职场人士的喜爱. 不仅是作为制作思维导图的 ...
- 怎样将c++的对话框自动移到指定位置_【Excel技巧】如何批量创建多个指定名称的工作表...
在平时的Excel应用中,经常遇到需要同时创建多个工作表,工作表表格的表头及格式都一样,只是表格输入的具体内容不一样.比如,我们要做学员签到表,从1月至12月,每个月占用一个sheet工作表. 类似这 ...
- php qrcode 生成二维码后变成透明背景且按需调整大小并贴到图片的指定位置
发现自己快两个月没写博客,最近搞定毕业的相关事情了,稍微松点了,可以全身心地投入到工作中来,今天想起写写博客,记录下最近工作过的内容,供以后查看温习.打算建立个栏目专门存放工作的记录内容,希望能坚持下 ...
- ios view 切上部分圆角_IOS开发入门之给view添加圆角并指定位置
本文将带你了解IOS开发入门之给view添加圆角并指定位置,希望本文对大家学IOS有所帮助. ios中给view添加圆角并指定位置 在ios开发中,为了有个不错的UI交互效果,我们经常会用到为视图添加 ...
- 设置图的位置_消防泵房内设备、管网、阀门的设置及系统图
这是消防泵房内的消防泵.喷淋泵.稳压泵以及管网.阀门设置的平面布置图,从图中可以看出每组消防泵均有两个独立的吸水管,吸水管上设置有闸阀.过滤器.柔性接头,但是没有设置真空表.压力表或真空压力表.出水管 ...
- 获取光标位置及动态设置光标到指定位置
问题场景:页面有一个字段框(可以理解为一个div中有很多label),一个input框,进入页面,input框自动获取焦点,点击每一个label会把label的内容进行处理,比如加个括号()表示是个函 ...
- R语言使用rnorm函数生成正太分布数据、使用plot函数可视化折线图、使用text函数在可视化图像的指定位置添加自定义文本
R语言使用rnorm函数生成正太分布数据.使用plot函数可视化折线图.使用text函数在可视化图像的指定位置添加自定义文本 目录 R语言使用rnorm函数生成正太分布数据.使用plot函数可视化折线 ...
- python使用matplotlib可视化线图(line plot)、在可视化图像中的指定位置添加横线(add horizontal line in matplotlib plot)
python使用matplotlib可视化线图(line plot).在可视化图像中的指定位置添加横线(add horizontal line in matplotlib plot) 目录
- R语言ggplot2可视化绘制线图(line plot)、使用gghighlight包突出高亮线图的满足条件的线图、设置高亮线图不显示默认自动显示的文本标签(use_direct_label)
R语言ggplot2可视化绘制线图(line plot).使用gghighlight包突出高亮线图的满足条件的线图.设置高亮线图不显示默认自动显示的文本标签(use_direct_label = FA ...
最新文章
- 查看linux虚拟机信息,虚拟机:Linux查看线程信息的步骤
- MySQL 字符串删除表情符_PHP处理字符中的emoji表情(判断/移除/存储)
- graphcut 用于最优缝合先寻找_Image Stitching
- Android异步下载网络图片(其二:AsyncTask)
- 关于Zipalign的介绍和使用方法
- 12个git实战建议和技巧
- 【华为大咖分享】6.华为专家揭秘研发效能提升之道(后附PPT下载地址)
- 大数乘加运算然后取模 c++_技术解析 | FPGA运算单元可支持高算力浮点
- spring整合大全
- 精进 Quartz—Quartz大致介绍(一)
- batchsize和模型精度的影响
- [置顶] 【cocos2d-x入门实战】微信飞机大战之三:飞机要起飞了
- 倍福PLC使用Visualization功能实现可视化界面
- ios备忘录下载安卓版_ios8备忘录安卓版下载,ios8备忘录app软件下载安卓版 v3.0-开心路...
- 深度学习-Pytorch:Pytorch 创建CNN神经网络模型【ResNet模型】
- oracle if else怎么用,oracle if else语句使用介绍
- 投影幕布jsp_发现篇:亿立投影幕布真实使用感受诉说不看后悔 | 智能扫地机器人评测...
- iPhone清理工具:4Easysoft iPhone Cleaner for Mac
- 软件工程——初识文档
- RMVB格式介绍,如何播放该格式视频,以及将RMVB转换成MP4?
热门文章
- 代码整洁之道 1-3阅读笔记
- linux的normal模式,解决grub rescue问题时发现grub/目录下没有文件normal.mod怎么办?...
- HTML网页下,在div标签中嵌套其他html页面
- DSP TMS320C5509A 控制DDS AD9854芯片进行AM幅度调制
- 如何将pdf转换成ppt文件
- 一键U盘装系统 电脑为什么突然打不开
- 做软件第三方测试报告需要准备哪些材料,靠谱的软件测试中心推荐
- 机器学习-朴素贝叶斯-垃圾邮件
- FCPX插件:10组马赛克方格图像组合展示动画预设Mosaic Animation
- WeaQA:Weak Supervision via Captions for Visual Question Answering 论文笔记