扫码关注官方订阅号
在移动端怎样上传图片?,而且在上传前把图片压缩一定的大小?
学习是最好的投资!
对于异步上传来说,如果仍想用文件直接上传方法的话,可以采用HTML5的FormData,具体操作可以参考这篇博客。http://www.cnblogs.com/lhb25/...
FormData
本人还有另外一种异步上传图片的方法。先将图片转换成base64字符串,然后再把base64字符串提交到服务器上,服务器接收后,可以再用具体的API将base64字符串转换成图片内容。以下为具体实现方法:
var getObjectURL = function(file) { var url = null; if (window.createObjectURL !== undefined) { // basic url = window.createObjectURL(file); } else if (window.URL !== undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL !== undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }
getObjectURL方法用于将传入的input中的图片file对象,转换成一个临时的url,而这个url是同域的。
getObjectURL
var converImgTobase64 = function(url, callback, outputFormat) { var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'; img.onload = function(){ canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img,0,0); var dataURL = canvas.toDataURL(outputFormat || 'image/png'); callback.call(this, dataURL); canvas = null; }; img.src = url; }
converImgTobase64方法就是将上面所得到的url传入,通过canvasAPI转换成base64字符串,注意这个url必须是同域的,不可跨域,所以getObjectURL这个方法是很有必要的。
converImgTobase64
例子:
var input = $("input[type=file]")[0], src = getObjectURL(input.files[0]); converImgTobase64(src, function(base64Str) { //处理base64Str相关的callback,可以直接在这里发送ajax请求。 });
这部分组件的代码在本人的一个util库中,欢迎参考并提出整改意见~~~https://github.com/zero-mo/Br...
另外,图片压缩的话,这里有一个是基于canvas进行操作的,你可以试一下。 http://www.cnblogs.com/xiao-y...
canvas
刚写的文章:https://segmentfault.com/a/11...主要是用原生的HTML5文件表单选择,然后用插件压缩,最后直接用插件输出的FormData上传。
如果不考虑兼容 IE 可以用 FileReader API 读取文件 获得文件的 Base64 值img 标签 可以直接用 Base64 展示图片之后可以用一些插件剪裁图片后上传服务器保存 FileReader API 参考文档: https://developer.mozilla.org...jQuery 剪裁图片插件(支持移动端): http://www.jq22.com/jquery-in...
如果不考虑兼容 IE 可以用 FileReader API 读取文件 获得文件的 Base64 值img 标签 可以直接用 Base64 展示图片之后可以用一些插件剪裁图片后上传服务器保存
IE
FileReader API
Base64
img
FileReader API 参考文档: https://developer.mozilla.org...jQuery 剪裁图片插件(支持移动端): http://www.jq22.com/jquery-in...
FileReader API 参考文档:
jQuery 剪裁图片插件(支持移动端):
至于压缩的话,剪裁之后的图片大小自然比原图小很多
原问题地址:https://segmentfault.com/q/10...
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
对于异步上传来说,如果仍想用文件直接上传方法的话,可以采用HTML5的
FormData,具体操作可以参考这篇博客。http://www.cnblogs.com/lhb25/...本人还有另外一种异步上传图片的方法。先将图片转换成base64字符串,然后再把base64字符串提交到服务器上,服务器接收后,可以再用具体的API将base64字符串转换成图片内容。以下为具体实现方法:
getObjectURL方法用于将传入的input中的图片file对象,转换成一个临时的url,而这个url是同域的。converImgTobase64方法就是将上面所得到的url传入,通过canvasAPI转换成base64字符串,注意这个url必须是同域的,不可跨域,所以getObjectURL这个方法是很有必要的。例子:
这部分组件的代码在本人的一个util库中,欢迎参考并提出整改意见~~~https://github.com/zero-mo/Br...
另外,图片压缩的话,这里有一个是基于
canvas进行操作的,你可以试一下。http://www.cnblogs.com/xiao-y...
刚写的文章:
https://segmentfault.com/a/11...
主要是用原生的HTML5文件表单选择,然后用插件压缩,最后直接用插件输出的FormData上传。
以下引用我之前的回答
至于压缩的话,剪裁之后的图片大小自然比原图小很多
原问题地址:https://segmentfault.com/q/10...