以前要想在图片上传前,对图片剪裁下,纯用js的话,很难实现。现在有了html5了,腰也不疼了,腿也不抽筋了。
主要用到html5的2个特性:
1、FileReader
FileReader可以把本地文件进行读取并且转化为Base64编码的数据,很便于在html页面里显示。
2、canvas
对图片的放大缩小啊,左移右移啊,实现起来很简单。尤其是它还可以对图片的像素进行操作(红、绿、蓝、透明),最后利用toDataURL方法用图片进行剪裁。美中不足的话,目前还不支持gif格式,有点小遗憾。
下面是我写的一个简易小例子的片段(完整代码在附件里)
选择图片用的是
<input id="upload" type="file" />
选择文件生成Base64及图片加载后初始化canvas的代码:
var upload = $('#upload');
upload.change(function (e) {
e.preventDefault();
var file = upload[0].files[0],
reader = new FileReader();
reader.onload = function (event) {
img.src = event.target.result;
var result = img.src.toString().match(/^data:(image\/[a-z+]+);base64,/);
if (result) {
imgType = result[1];
}
};
reader.readAsDataURL(file);
return false;
});
img.onload = function () {
var min = Math.min(img.width, img.height);
scale = (bWH - 2 * borderWH) / min;
$('#range').attr('min', scale * 100);
// 判断下可放缩的范围
if (min >= (bWH - 2 * borderWH)) {
$('#range').attr('max', 100);
}
else {
$('#range').attr('max', scale * 100)
}
canvasScale(true, scale);
$('#range').val(scale * 100);
}
对图片放缩时,我没有使用canvas的scale方法,因为它会把canvas的大小也一起放缩了,和我想实现的需求不符。我利用的是canvas的drawImage的方法。放大就把dw、dh相应放大,缩小就相应缩小达到类似的效果。
function canvasScale(init, num) {
var w = img.width;
var h = img.height;
scale = num;
dw = w * scale;
dh = h * scale;
if (init) {
dx = 0;
dy = 0;
if (bWH > dw) {
dx = (bWH - dw) / 2;
}
if (bWH > dh) {
dy = (bWH - dh) / 2;
}
}
else {
if (dx > borderWH) {
dx = borderWH;
}
else if (dx < bWH - borderWH - dw) {
dx = bWH - borderWH - dw;
}
if (dy > borderWH) {
dy = borderWH;
}
else if (dy < bWH - borderWH - dh) {
dy = bWH - borderWH - dh;
}
}
// 大图
ctx.clearRect(0, 0, bWH, bWH);
ctx.drawImage(img, 0, 0, w, h, dx, dy, dw, dh);
// 大图四周的框
canvasPadding(ctx, borderWH, bWH);
// 小图
ctxSmall.clearRect(0, 0, sWH, sWH);
ctxSmall.drawImage(img, (15 - dx) / scale, (15 - dy) / scale,
(bWH - 2 * borderWH) / scale, (bWH - 2 * borderWH) / scale,
0, 0, sWH, sWH);
}
最后就剩下一个截取功能了
function canvasToDataURL() {
var canvasTmp = document.createElement('canvas');
canvasTmp.width = bWH - 2 * borderWH;
canvasTmp.height = bWH - 2 * borderWH;
var ctxTmp = canvasTmp.getContext('2d');
ctxTmp.drawImage(img, (15 - dx) / scale, (15 - dy) / scale,
(bWH - 2 * borderWH) / scale, (bWH - 2 * borderWH) / scale,
0, 0, canvasTmp.width, canvasTmp.height);
// 像素操作
var imgPixels = ctxTmp.getImageData(0, 0, canvasTmp.width, canvasTmp.height);
var lenW = imgPixels.width;
var lenH = imgPixels.height;
var red = $('#red').val();
var green = $('#green').val();
var blue = $('#blue').val();
var opacity = $('#opacity').val();
for (var y = 0; y < lenH; y++) {
for (var x = 0; x < lenW; x++) {
imgPixels.data[4 * (y * lenW + x) + 0] *= red;
imgPixels.data[4 * (y * lenW + x) + 1] *= green;
imgPixels.data[4 * (y * lenW + x) + 2] *= blue;
imgPixels.data[4 * (y * lenW + x) + 3] = opacity;
}
}
ctxTmp.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
// 生成对应类型的图片
return canvasTmp.toDataURL(imgType);
}
测试如下:
ff,chrome,mx3都支持FileReader和canvas。
mx3下FileReader还有点问题,估计日后会改好。
chrome本地安全问题,需要放到服务器上才能看效果。
ff目前对<input type="range" />还不支持。
分享到:
相关推荐
html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果
(最新版本)HTML5批量图片上传插件支持多个图片上传功能
HTML图片懒加载,亲测可用,插件也比较小,使用起来挺方便的.根据jquery 提供的 lazyload.js 插件实现图片懒加载,demo 在最下面。 lazyLoading.js 可以缓解庞大项目的网络压力lazyLoading.js图片懒加载
支持手机触屏左右拖拽滑动图片_html5左右滑动图片切换插件,支持手机触屏左右拖拽滑动图片_html5左右滑动图片切换插件(html)
jQuery html5支持手机触屏幻灯片图片轮播代码
html5图片上传支持拖动图片上传_批量图片上传插件
HTML5 3D IMAGES GALLERY 支持旋转的3d图片展示,就是一个3d相册,旋转的图片支持鼠标悬停效果,当鼠标悬停于图片上时,图片由黑白变成彩色,本相册仅是缩略图展示,不会放大图片,可作为一个相册的前置部分来用,...
HTML5全屏图片左右滑动轮播代码是一款全屏响应式图片轮播布局,按钮控制图片水平滑动预览查看,图片支持鼠标悬停文字动画展示特效。
官网的html2pdf不支持中文,根据底层tcpdf实现中文的支持。 这个是最简版的示例,html2pdf完整的示例代码,可以参见 https://github.com/cychai/html2pdf
支持图片放大的 html5 jQuery图库相册插件示例,支持许多鼠标特效,单击相册缩略图后,在当前位置显示大图片,并自动排列小图,看上去十分漂亮的HTML5相册。本图集特效中的图片在上传打包前已删除,看效果的朋友,请...
html5上传视频和图片 可预览上传,支持多文件上传, HTML5+js 文件想小,简单好用。后端结合PHP等语言。
html5上传插件支持文件上传和图片上传代码 html5上传插件支持文件上传和图片上传代码
自适应H5全新前端UI界面设计 图片网盘外链5.0系统支持图片违规检测网站源码 PHP网盘与外链分享步伐,撑持一切格局文件的上传,可以天生文件外链、图片外链、音乐视频外链,天生外链同时主动天生响应的UBB代码和html...
完美支持各个主流浏览器,chrome,火狐, ios ,android 微信等的浏览器。解决某些手机拍照 图片旋转问题,解决图片压缩问题。欢迎使用
jquery+html5实现图片上传并裁切功能,上传图片前可预览裁切效果,显示裁切框,应用jquery.Jcrop.min.js实现,兼容性方面,适用浏览器:FireFox、Chrome、Opera. 不支持IE8、360、Safari、傲游、搜狗、世界之窗。本...
浏览器端html5+cavas+js浏览器端压缩图片上传,内附demo简单易用已验证手机浏览器。 资源出处:如果不想消耗积分请移步https://github.com/kairyou/html5-make-thumb下载;感谢原作者。
HTML5批量图片上传插件支持多个图片上传功能,HTML5批量图片上传插件支持多个图片上传功能
实现效果: jQuery html5支持手机触屏幻灯片图片轮播图,点击图片,实现图片之间的切换,非常适用于我们的企业网站或者商城网站,添加轮播图,使网站变得更加美观。php中文网推荐下载!
HTML5 图片上传 带预览功能 (pc,手机都能适配) 支持预览 适配各种机型 HTML5 图片上传 带预览功能 (pc,手机都能适配) 支持预览 适配各种机型