如何把一张图片做成和手机规格一样的大小?
我用来做墙纸。_百度知道
如何把一张图片做成和手机规格一样的大小?
我用来做墙纸。
我的意思是用个什么工具把尺寸过大的照片,剪裁成手机规格大小的图片,我用来做为壁纸。
把具体做法发一下。
我有更好的答案
用PS就可以，他是目前最好用的图片处理软件。 新建一图层，设置同手机屏支持大小，然后把你要的图片复制到这个图层，按CTRL+T，再按SHIFT等比缩放到原背景图，保存就行啦。
采纳率：28%
1.首先查询下你的手机型号所支持的像素格式与大小2.用photoshop软件，里边的大小设置，或者裁剪，很方便的。
用一个ACD see
或其他图片处理软件把图片分辨率改为你的手机的分辨率
就全平了~~~
你到网上看一下你手机的分辨率，然后再根据分辨率用你电脑上有的图像处理软件进行处理就差不多了。具体你看你电脑的软件咯，每个软件使用方法不同
用photoshop即可，俗称ps，如果不会的话，我帮你做~
各种图像、图片处理软件都可以啊！
其他4条回答
为您推荐：
其他类似问题
您可能关注的内容
墙纸的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。怎么把这个图片设置的和屏幕大小一样，当壁纸，就是太大了，只能截一小块_百度知道
怎么把这个图片设置的和屏幕大小一样，当壁纸，就是太大了，只能截一小块
我有更好的答案
只能在电脑办公软件缩小 在放到手机上
手机还是电脑？
为您推荐：
其他类似问题
壁纸的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。移动端上(传图片太大)处理方案
利用FileReader和FormData实现图片预览和上传(base64转二进制文件)监听表单文件变化文件表单的样式主要通过让它后面，通过别的DOM来美化它。 type="file"&input.on.('change', preview);预览预览使用 FileReader 对象来读：function preview(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onloadend = function () {
var dataURL = reader.
var img = new Image();
img.src = dataURL;
reader.readAsDataURL(file);
}提交图片文件（二进制文件 非 base64）base64 转 二进制文件/**
* dataURL to blob, ref to https://gist.github.com/fupslot/5015897
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i & byteString. i++) {
ia[i] = byteString.charCodeAt(i);
return new Blob([ab], {type: mimeString});
}构造 FormData 填充二进制文件数据，通过 ajax 的方式进行提交：var fd = new FormData();
var blob = dataURItoBlob(dataURL);
fd.append('file', blob);
type: 'POST',
url: '/upload',
processData: false,
contentType: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.
console.log('进度', percentComplete);
}, false);
}).success(function (res) {
}).error(function (err) {
console.error(err);
});注意：不要漏了指定 processData 和 contentType 为 false 。压缩业务中不需要前端不需要压缩，因为后端有更靠谱的压缩方案，但是前端其实也可以压缩，那就是用 canvas 把图画出适合的大小，然后上传。主要流程：在 new 出来的 Image 对象，我们监听它的 onload 事件按照压缩比例，算出压缩后的图片尺寸创建 canvas ，尺寸设置成上一步骤算出来的压缩后的图片尺寸调用 drawImage 方法，把图片绘制到 canvas 中调用 canvas 的 toDataURL ，取出 base64 格式的数据后续的传图步骤和上面的原图上传一样var img = new Image();
img.onload = function () {
var w = Math.min(400, img.width);
var h = img.height * (w / img.width);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width =
canvas.height =
ctx.drawImage(img, 0, 0, w, h);
var dataURL = canvas.toDataURL('image/png');
img.src = reader.自己的 OneWord 客户端的上传组件就是这么做的： 这样一看，好像除去业务逻辑的话，好像也没多少代码具体思路：select local file -& Blob -& DataUrl -& Canvas compress -& DataUrl -& Blob -& Upload file id="fileId1" type="file" accept="image/png,image/gif" name="file"
id="fileId2" type="file" multiple="multiple" name="file" 后缀名
audio/3gpp, video/3gpp
allpication/vnd.ms-asf
audio/basic
application/msword
application/msword
application/xml-dtd
image/vnd.dwg
image/vnd.dxf
image/jpeg
image/jpeg
image/jpeg
text/javascript, application/javascript
application/json
audio/mpeg, video/mpeg
audio/mpeg
audio/mp4, video/mp4
video/mpeg
video/mpeg
application/vnd.ms-project
application/ogg, audio/ogg
application/pdf
application/vnd.ms-powerpoint
application/vnd.ms-powerpoint
application/vnd.ms-powerpoint
application/rtf, text/rtf
image/vnd.svf
image/tiff
image/tiff
text/plain
application/vnd.ms-works
application/vnd.ms-works
application/xhtml+xml
application/vnd.ms-excel
application/vnd.ms-excel
application/vnd.ms-excel
application/vnd.ms-excel
application/vnd.ms-excel
text/xml, application/xml
aplication/zip
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet// input标签的files属性
document.querySelector("#fileId").files
// 返回的是一个文件列表数组// 获得上传文件DOM对象
var oFiles = document.querySelector("#fileId");
// 实例化一个表单数据对象
var formData = new FormData();
// 遍历图片文件列表，插入到表单数据中
for (var i = 0, file; file = oFiles[i]; i++) {
// 文件名称，文件对象
formData.append(file.name, file);
}// 实例化一个AJAX对象
var xhr = new XMLHttpRequest();
xhr.onload = function() {
alert("上传成功！");
xhr.open("POST", "upload.php", true);
// 发送表单数据
xhr.send(formData);Array
[jpg_jpg] =& Array
[name] =& jpg.jpg
[type] =& image/jpeg
[tmp_name] =& D:\xampp\tmp\phpA595.tmp
[error] =& 0
[size] =& 133363
[png_png] =& Array
[name] =& png.png
[type] =& image/png
[tmp_name] =& D:\xampp\tmp\phpA5A6.tmp
[error] =& 0
[size] =& 1214628
)但是问题来了，如果图片太大，如何处理？（现在的手机拍出的照片一般都有4M左右大小，硬件设备总在进步，虽然国内网速也在飞跃，但我们的处理方案也不能落后）方案如下：canvas.toDataURL("image/jpeg", 0.1);
图片上传，将base64的图片转成二进制对象，塞进formdata上传图片上传思路准备工作都做完了，那怎样用这些材料完成一件事情呢。这里要强调的是，考虑到移动端流量很贵，所以有必要对大图片进行下压缩再上传。图片压缩很简单，将图片用canvas画出来，再使用canvas.toDataUrl方法将图片转成base64格式。所以图片上传思路大致是：监听一个input(type=‘file’)的onchange事件，这样获取到文件file；将file转成dataUrl;然后根据dataUrl利用canvas绘制图片压缩，然后再转成新的dataUrl；再把dataUrl转成Blob；把Blob append进FormData中；xhr实现上传。手机兼容性问题理想很丰满，现实很骨感。实际上由于手机平台兼容性问题，上面这套流程并不能全都支持。所以需要根据兼容性判断。经过试验发现：部分安卓微信浏览器无法触发onchange事件（第一步就特么遇到问题）这其实安卓微信的一个遗留问题。
解决办法也很简单：input标签 &input type=“file" name="image" accept="image/gif, image/jpeg, image/png”&要写成&input type="file" name="image" accept=“image/*”&就没问题了。部分安卓微信不支持Blob对象部分Blob对象append进FormData中出现问题iOS 8不支持new File Constructor，但是支持input里的file对象。iOS 上经过压缩后的图片可以上传成功 但是size是0 无法打开。部分手机出现图片上传转换问题，。安卓手机不支持多选，原因在于multiple属性根本就不支持。多张图片转base64时候卡顿，因为调用了cpu进行了计算。上传图片可以使用base64上传或者formData上传上传思路修改方案经过考虑，我们决定做兼容性处理：这里边两条路，最后都是File对象append进FormData中实现上传。代码实现首先有个html&input type="file" name="image" accept=“image/*” onchange='handleInputChange'&然后js如下：
const imgFile = {};
function handleInputChange (event) {
const file = event.target.files[0];
const imgMasSize = 1024 * 1024 * 10;
if(['jpeg', 'png', 'gif', 'jpg'].indexOf(file.type.split("/")[1]) & 0){
if(file.size & imgMasSize ) {
if(!!window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
transformFileToFormData(file);
transformFileToDataUrl(file);
function transformFileToFormData (file) {
const formData = new FormData();
formData.append('type', file.type);
formData.append('size', file.size || "image/jpeg");
formData.append('name', file.name);
formData.append('lastModifiedDate', file.lastModifiedDate);
formData.append('file', file);
uploadImg(formData);
function transformFileToDataUrl (file) {
const imgCompassMaxSize = 200 * 1024;
imgFile.type = file.type || 'image/jpeg';
imgFile.size = file.
imgFile.name = file.
imgFile.lastModifiedDate = file.lastModifiedD
const reader = new FileReader();
reader.onload = function(e) {
const result = e.target.
if(result.length & imgCompassMaxSize) {
compress(result, processData, false );
compress(result, processData);
reader.readAsDataURL(file);
function compress (dataURL, callback, shouldCompress = true) {
const img = new window.Image();
img.src = dataURL;
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.
canvas.height = img.
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let compressedDataU
if(shouldCompress){
compressedDataUrl = canvas.toDataURL(imgFile.type, 0.2);
compressedDataUrl = canvas.toDataURL(imgFile.type, 1);
callback(compressedDataUrl);
function processData (dataURL) {
const binaryString = window.atob(dataUrl.split(',')[1]);
const arrayBuffer = new ArrayBuffer(binaryString.length);
const intArray = new Uint8Array(arrayBuffer);
const imgFile = this.imgF
for (let i = 0, j = binaryString. i & i++) {
intArray[i] = binaryString.charCodeAt(i);
const data = [intArray];
blob = new Blob(data, { type: imgFile.type });
} catch (error) {
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobB
if (error.name === 'TypeError' && window.BlobBuilder){
const builder = new BlobBuilder();
builder.append(arrayBuffer);
blob = builder.getBlob(imgFile.type);
throw new Error('版本过低，不支持上传图片');
const fileOfBlob = new File([blob], imgFile.name);
const formData = new FormData();
formData.append('type', imgFile.type);
formData.append('size', fileOfBlob.size);
formData.append('name', imgFile.name);
formData.append('lastModifiedDate', imgFile.lastModifiedDate);
formData.append('file', fileOfBlob);
uploadImg(formData);
uploadImg (formData) {
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e)=&{console.log(e.loaded / e.total)}, false);
xhr.addEventListener('error', ()=&{Toast.error("上传失败！", 2000, undefined, false);}, false);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
const result = JSON.parse(xhr.responseText);
if (xhr.status === 200) {
xhr.open('POST', '/uploadUrl' , true);
xhr.send(formData);
}多图并发上传这个上限没多久，需求又改了，一张图也满足不了我们的PM了，要求改成多张图。多张图片上传方式有三种：图片队列一张一张上传图片队列并发全部上传图片队列并发上传X个，其中一个返回了结果直接触发下一个上传，保证最多有X个请求。这个一张一张上传好解决，但是问题是上传事件太长了，体验不佳；多张图片全部上传事件变短了，但是并发量太大了，很可能出现问题；最后这个并发上传X个，体验最佳，只是需要仔细想想如何实现。并发上传实现最后我们确定X = 3或者4。比如说上传9张图片，第一次上传个3个，其中一个请求回来了，立即去上传第四个，下一个回来上传第5个，以此类推。这里我使用es6的generator函数来实现的，定义一个函数，返回需要上传的数组：*uploadGenerator (uploadQueue) {
const maxUploadSize = 3;
if(uploadQueue.length & maxUploadSize){
const result = [];
for(let i = 0; i & uploadQueue. i++){
if(i & maxUploadSize){
result.push(uploadQueue[i]);
if(i === maxUploadSize - 1){
yield [uploadQueue[i]];
yield uploadQueue.map((item)=&(item));
}调用的时候：
this.uploadGen = this.uploadGenerator(uploadQueue);
const firstUpload = this.uploadGen.next();
firstUpload.value.map((item)=&{
this.transformFileToDataUrl(item, this.compress, this.processData);
});这样将每次上传几张图片的逻辑分离出来。单个图片上传函数改进然后遇到了下一个问题，图片上传分成5步，图片转dataUrl压缩处理数据格式准备数据上传上传这里面前两个是回调的形式，最后一个是异步形式。无法写成正常函数一个调用一个；而且各个function之间需要共享一些数据，之前把这个数据挂载到this.imgFile上了，但是这次是并发，一个对象没法满足需求了，改成数组也有很多问题。所以这次方案是：第一步创建一个要上传的对象，每次都通过参数交给下一个方法，直到最后一个方法上传。并且通过回调的方式，将各个步骤串联起来。Upload完整的代码如下：/**
* Created by Aus on .
import React from 'react'
import classNames from 'classnames'
import Touchable from 'rc-touchable'
import Figure from './Figure'
import Toast from '../../../Feedback/Toast/components/Toast'
import '../style/index.scss'
// 统计img总数 防止重复
let imgNumber = 0;
// 生成唯一的id
const getUuid = () =& {
return "img-" + new Date().getTime() + "-" + imgNumber++;
class Uploader extends React.Component{
constructor (props) {
super(props);
this.state = {
imgArray: [] // 图片已上传 显示的数组
this.handleInputChange = this.handleInputChange.bind(this);
this.compress = this.compress.bind(this);
this.processData = this.processData.bind(this);
componentDidMount () {
// 判断是否有初始化的数据传入
const {data} = this.
if(data && data.length & 0){
this.setState({imgArray: data});
handleDelete(id) {
this.setState((previousState)=&{
previousState.imgArray = previousState.imgArray.filter((item)=&(item.id !== id));
return previousS
handleProgress (id, e) {
// 监听上传进度 操作DOM 显示进度
const number = Number.parseInt((e.loaded / e.total) * 100) + "%";
const text = document.querySelector('#text-'+id);
const progress = document.querySelector('#progress-'+id);
text.innerHTML =
progress.style.width =
handleUploadEnd (data, status) {
// 准备一条标准数据
const _this =
const obj = {id: data.uuid, imgKey: '', imgUrl: '', name: data.file.name, dataUrl: data.dataUrl, status: status};
// 更改状态
this.setState((previousState)=&{
previousState.imgArray = previousState.imgArray.map((item)=&{
if(item.id === data.uuid){
return previousS
// 上传下一个
const nextUpload = this.uploadGen.next();
if(!nextUpload.done){
nextUpload.value.map((item)=&{
_this.transformFileToDataUrl(item, _this.compress, _this.processData);
handleInputChange (event) {
const {typeArray, max, maxSize} = this.
const {imgArray} = this.
const uploadedImgArray = []; // 真正在页面显示的图片数组
const uploadQueue = []; // 图片上传队列 这个队列是在图片选中到上传之间使用的 上传完成则清除
// event.target.files是个类数组对象 需要转成数组方便处理
const selectedFiles = Array.prototype.slice.call(event.target.files).map((item)=&(item));
// 检查文件个数 页面显示的图片个数不能超过限制
if(imgArray.length + selectedFiles.length & max){
Toast.error('文件数量超出最大值', 2000, undefined, false);
let imgPass = {typeError: false, sizeError: false};
// 循环遍历检查图片 类型、尺寸检查
selectedFiles.map((item)=&{
// 图片类型检查
if(typeArray.indexOf(item.type.split('/')[1]) === -1){
imgPass.typeError =
// 图片尺寸检查
if(item.size & maxSize * 1024){
imgPass.sizeError =
// 为图片加上位移id
const uuid = getUuid();
// 上传队列加入该数据
uploadQueue.push({uuid: uuid, file: item});
// 页面显示加入数据
uploadedImgArray.push({ // 显示在页面的数据的标准格式
id: uuid, // 图片唯一id
dataUrl: '', // 图片的base64编码
imgKey: '', // 图片的key 后端上传保存使用
imgUrl: '', // 图片真实路径 后端返回的
name: item.name, // 图片的名字
status: 1 // status表示这张图片的状态 1：上传中，2上传成功，3：上传失败
// 有错误跳出
if(imgPass.typeError){
Toast.error('不支持文件类型', 2000, undefined, false);
if(imgPass.sizeError){
Toast.error('文件大小超过限制', 2000, undefined, false);
// 没错误准备上传
// 页面先显示一共上传图片个数
this.setState({imgArray: imgArray.concat(uploadedImgArray)});
// 通过该函数获取每次要上传的数组
this.uploadGen = this.uploadGenerator(uploadQueue);
// 第一次要上传的数量
const firstUpload = this.uploadGen.next();
// 真正开始上传流程
firstUpload.value.map((item)=&{
* 图片上传分成5步
* 图片转dataUrl
* 处理数据格式
* 准备数据上传
* 前两步是回调的形式 后面是同步的形式
this.transformFileToDataUrl(item, this.compress, this.processData);
*uploadGenerator (uploadQueue) {
* 多张图片并发上传控制规则
* 上传1-max数量的图片
* 设置一个最大上传数量
* 保证最大只有这个数量的上传请求
// 最多只有三个请求在上传
const maxUploadSize = 3;
if(uploadQueue.length & maxUploadSize){
const result = [];
for(let i = 0; i & uploadQueue. i++){
// 第一次return maxUploadSize数量的图片
if(i & maxUploadSize){
result.push(uploadQueue[i]);
if(i === maxUploadSize - 1){
yield [uploadQueue[i]];
yield uploadQueue.map((item)=&(item));
transformFileToDataUrl (data, callback, compressCallback) {
* 图片上传流程的第一步
* @param data file文件 该数据会一直向下传递
* @param callback 下一步回调
* @param compressCallback 回调的回调
const {compress} = this.
const imgCompassMaxSize = 200 * 1024; // 超过 200k 就压缩
// 封装好的函数
const reader = new FileReader();
// ? 这是个回调过程 不是同步的
reader.onload = function(e) {
const result = e.target.
data.dataUrl =
if(compress && result.length & imgCompassMaxSize){
data.compress =
callback(data, compressCallback); // 图片压缩
data.compress =
callback(data, compressCallback); // 图片不压缩
reader.readAsDataURL(data.file);
compress (data, callback) {
* 压缩图片
* @param data file文件 数据会一直向下传递
* @param callback 下一步回调
const {compressionRatio} = this.
const imgFile = data.
const img = new window.Image();
img.src = data.dataU
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.
canvas.height = img.
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let compressedDataU
if(data.compress){
compressedDataUrl = canvas.toDataURL(imgFile.type, (compressionRatio / 100));
compressedDataUrl = canvas.toDataURL(imgFile.type, 1);
data.compressedDataUrl = compressedDataU
callback(data);
processData (data) {
// 为了兼容性 处理数据
const dataURL = data.compressedDataU
const imgFile = data.
const binaryString = window.atob(dataURL.split(',')[1]);
const arrayBuffer = new ArrayBuffer(binaryString.length);
const intArray = new Uint8Array(arrayBuffer);
for (let i = 0, j = binaryString. i & i++) {
intArray[i] = binaryString.charCodeAt(i);
const fileData = [intArray];
blob = new Blob(fileData, { type: imgFile.type });
} catch (error) {
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobB
if (error.name === 'TypeError' && window.BlobBuilder){
const builder = new BlobBuilder();
builder.append(arrayBuffer);
blob = builder.getBlob(imgFile.type);
throw new Error('版本过低，不支持上传图片');
data.blob =
this.processFormData(data);
processFormData (data) {
// 准备上传数据
const formData = new FormData();
const imgFile = data.
const blob = data.
formData.append('type', blob.type);
formData.append('size', blob.size);
// append 文件
formData.append('file', blob, imgFile.name);
this.uploadImg(data, formData);
uploadImg (data, formData) {
// 开始发送请求上传
const _this =
const xhr = new XMLHttpRequest();
const {uploadUrl} = this.
// 进度监听
xhr.upload.addEventListener('progress', _this.handleProgress.bind(_this, data.uuid), false);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 201) {
// 上传成功
_this.handleUploadEnd(data, 2);
// 上传失败
_this.handleUploadEnd(data, 3);
xhr.open('POST', uploadUrl , true);
xhr.send(formData);
getImagesListDOM () {
// 处理显示图片的DOM
const {max} = this.
const _this =
const result = [];
const uploadingArray = [];
const imgArray = this.state.imgA
imgArray.map((item)=&{
result.push(
&Figure key={item.id} {...item} onDelete={_this.handleDelete.bind(_this)} /&
// 正在上传的图片
if(item.status === 1){
uploadingArray.push(item);
// 图片数量达到最大值
if(result.length &= max )
let onPress = ()=&{_this.refs.input.click();};
或者有正在上传的图片的时候 不可再上传图片
if(uploadingArray.length & 0) {
// 简单的显示文案逻辑判断
let text = '上传图片';
if(uploadingArray.length & 0){
text = (imgArray.length - uploadingArray.length) + '/' + imgArray.
result.push(
&Touchable
activeClassName={'zby-upload-img-active'}
onPress={onPress}
&div className="zby-upload-img"&
&span key="icon" className="fa fa-camera" /&
&p className="text"&{text}&/p&
&/Touchable&
render () {
const imagesList = this.getImagesListDOM();
&div className="zby-uploader-box"&
{imagesList}
&input ref="input" type="file" className="file-input" name="image" accept="image/*" multiple="multiple" onChange={this.handleInputChange} /&
Uploader.propTypes = {
uploadUrl: React.PropTypes.string.isRequired, // 图上传路径
compress: React.PropTypes.bool, // 是否进行图片压缩
compressionRatio: React.PropTypes.number, // 图片压缩比例 单位：%
data: React.PropTypes.array, // 初始化数据 其中的每个元素必须是标准化数据格式
max: React.PropTypes.number, // 最大上传图片数
maxSize: React.PropTypes.number, // 图片最大体积 单位：KB
typeArray: React.PropTypes.array, // 支持图片类型数组
Uploader.defaultProps = {
compress: true,
compressionRatio: 20,
maxSize: 5 * 1024, // 5MB
typeArray: ['jpeg', 'jpg', 'png', 'gif'],
export default Uploader配合Figure组件使用达到文章开头的效果。源码在上总结使用1-2天时间研究如何实现原生上传图片，这样明白原理之后，上传再也不用借助插件了，再也不怕PM提出什么奇葩需求了。同时，也认识了一些陌生的函数。。
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！