H5 realizes image compression and uploading
This article mainly introduces H5 image compression and uploading examples in detail. It has certain reference value. Interested friends can refer to it.
After receiving the demand, ask the front-end whether it can compress picture? Because some images are too large, it is too slow to transfer them to the server and then compress them. I have never played like this in my consciousness. In the morning, my boss sent me a Zhihu link. When I saw it, it turned out that the seniors had already implemented it using canvas (I was ashamed of my knowledge for 3 seconds, and then started working on it immediately)! .
canvas compression
Using a ready-made library on github: https://github.com/stomita/ios-imagefile-megapixel, I have to worship stomita This great god. The general idea is to sample the image and display it on the canvas, and then use the canvas.toDataURL method to obtain the base64 string to achieve compression. For example, after the input element triggers the change event, read the file inside and perform the operation:
var fileInput = document.getElementById('fileInput');
fileInput.onchange = function() {
var file = fileInput.files[0];
// 创建一个压缩对象，该构造函数接收file或者blob。
var mpImg = new MegaPixImage(file);
// render方法的maxWith，maxHeight,以及quality都决定了压缩图片的质量
var resImg = document.getElementById('resultImage');
mpImg.render(resImg, { maxWidth: 300, maxHeight: 300, quality: 0.5 });
};
压缩完成会得到A picture similar to this:
data:image/jpeg This format has been used a lot, and the background images in many styles are just like this.
There are two points to note. The resImg here is a preview image, which already exists in the document. If you do not need a preview, but just create an img for compression (document.createElement(" img")), which will have one less tagName attribute. You can modify the source code or add this attribute yourself. The source code will be judged based on the tagName. If it does not exist, an error will be reported:
MegaPixImage.prototype.render = function (target, options, callback) {
//....
target.tagName = target.tagName || "IMG"; //加上这一句
var tagName = target.tagName.toLowerCase();
if (tagName === 'img') {
target.src = renderImageToDataURL(this.srcImage, opt, doSquash);
} else if (tagName === 'canvas') {
renderImageToCanvas(this.srcImage, target, opt, doSquash);
}
if (typeof this.onrender === 'function') {
this.onrender(target);
}
if (callback) {
callback();
}
if (this.blob) {
this.blob = null;
URL.revokeObjectURL(this.srcImage.src);
}
};In addition, this is a time-consuming operation. If multiple pictures are compressed, It cannot be called directly, and needs to be slightly transformed, otherwise the previous image will enter the later image without being compressed.
fileSelected: function () {
var files = $("#fileImage")[0].files;
var count = files.length;
console.log("共有" + count + "个文件");
for (var i = 0; i < count; i++) {var item = files[i];
console.log("原图片大小", item.size);
if (item.size > 1024 * 1024 * 2) {
console.log("图片大于2M，开始进行压缩...");
(function(img) {
var mpImg = new MegaPixImage(img);
var resImg = document.createElement("img");
resImg.file = img;
mpImg.render(resImg, { maxWidth: 500, maxHeight: 500, quality: 1 }, function() {
//do some thing
});
})(item);
}
core.previewImage(item);
}
},Upload processing
1. Post base64 string directly
uploadBase64str: function (base64Str) {
var formdata = new FormData();
formdata.append("base64str", base64Str);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (e) {
var percentComplete = Math.round(e.loaded * 100 / e.total);
para.onProgress(percentComplete.toString() + '%');
});
xhr.addEventListener("load", function (e) {
para.uploadComplete(xhr.responseText);
});
xhr.addEventListener("error", function (e) {
para.uploadError(e);
});
xhr.open("post", para.base64strUrl, true);
xhr.send(formdata);
},For example, base64strUrl here is /home/MUploadImgBase64Str. The MVC controller method is as follows:
[HttpPost]
public ActionResult MUploadImgBase64Str(string base64str)
{
try
{
var imgData = base64str.Split(',')[1];
//过滤特殊字符即可
string dummyData = imgData.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
if (dummyData.Length % 4 > 0)
{
dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, '=');
}
byte[] byteArray = Convert.FromBase64String(dummyData);
using (System.IO.MemoryStream ms = new System.IO.MemoryStream(byteArray))
{
var img = System.Drawing.Image.FromStream(ms);
var path = "~/Content/UploadFiles/mobile/";
var uploadpath = Server.MapPath(path);
if (!Directory.Exists(uploadpath))
{
Directory.CreateDirectory(uploadpath);
}
var saveName = uploadpath + “stoneniqiu” + ".jpg";
img.Save(saveName);
return Json(saveName);
}
}
catch (Exception e)
{
return Json(e.Message);
}
}How many MB of pictures can be compressed? Tens of k or hundreds of k. Of course, if the width, height and quality are set too small, the picture will be very distorted. How to get this string? There are two methods, one is to read src directly:
var base641 = resImg.src;
The other is to use canvas conversion:
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/jpeg");
return dataURL;
// return dataURL.replace("data:image/png;base64,", "");
}
var base64 = getBase64Image(resImg);For the same picture, the string sizes obtained by the two are different, but I can't tell the difference in picture quality.
For example, for a 2M picture, the string size read through the getBase64Image method is only 64k, but the size read directly by src is 270k, and the resulting pictures are smaller. . The following are the corresponding images of the original image (2.2M), base64 (48k), and src (202k).
getBase64Image obtains a smaller base64 string through the canvas's toDataURL.
2. You can also convert the blob object on the front end and then post it to the back end
function dataURItoBlob(dataUrl) {
var byteString = atob(dataUrl.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: 'image/jpeg' });
}3. If it is not compressed, install it directly into formdata in, send to the background.
uploadFile: function (file) {
console.log("开始上传");
var formdata = new FormData();
formdata.append(para.filebase, file);//这个名字要和mvc后台配合
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (e) {
var percentComplete = Math.round(e.loaded * 100 / e.total);
para.onProgress(percentComplete.toString() + '%');
});
xhr.addEventListener("load", function (e) {
para.uploadComplete(xhr.responseText);
});
xhr.addEventListener("error", function (e) {
para.uploadError(e);
});
xhr.open("post", para.url, true);
xhr.send(formdata);
},The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Implement image compression upload function through HTML5 mobile development
##
The above is the detailed content of H5 realizes image compression and uploading. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to enable or disable memory compression on Windows 11
Sep 19, 2023 pm 11:33 PM
With memory compression on Windows 11, your device will choke even with a limited amount of RAM. In this article, we will show you how to enable or disable memory compression on Windows 11. What is memory compression? Memory compression is a feature that compresses data before writing it to RAM, thus providing more storage space on it. Of course, more data stored in physical memory translates into faster system operation and better overall performance. This feature is enabled by default in Windows 11, but if it's somehow not active, you can disable or re-enable it. How to enable memory compression in Windows 11? Click the search bar, type powershell, and click
7-zip maximum compression rate setting, how to compress 7zip to the minimum
Jun 18, 2024 pm 06:12 PM
I found that the compressed package downloaded from a download website will be larger than the original compressed package after decompression. The difference is tens of Kb for a small one and several dozen Mb for a large one. If it is uploaded to a cloud disk or paid space, it does not matter if the file is small. , if there are many files, the storage cost will be greatly increased. I studied it specifically and can learn from it if necessary. Compression level: 9-Extreme compression Dictionary size: 256 or 384, the more compressed the dictionary, the slower it is. The compression rate difference is larger before 256MB, and there is no difference in compression rate after 384MB. Word size: maximum 273 Parameters: f=BCJ2, test and add parameter compression rate will be higher
How to upload lyrics to QQ Music
Feb 23, 2024 pm 11:45 PM
With the advent of the digital age, music platforms have become one of the main ways for people to obtain music. However, sometimes when we listen to songs, we find that there are no lyrics, which is very disturbing. Many people hope that lyrics can be displayed when listening to songs to better understand the content and emotions of the songs. QQ Music, as one of the largest music platforms in China, also provides users with the function of uploading lyrics, so that users can better enjoy music and feel the connotation of the songs. The following will introduce how to upload lyrics on QQ Music. first
Simple steps to upload your own music on Kugou
Mar 25, 2024 pm 10:56 PM
1. Open Kugou Music and click on your profile picture. 2. Click the settings icon in the upper right corner. 3. Click [Upload Music Works]. 4. Click [Upload Works]. 5. Select the song and click [Next]. 6. Finally, click [Upload].
How to use Nginx for compression and decompression of HTTP requests
Aug 02, 2023 am 10:09 AM
How to use Nginx to compress and decompress HTTP requests Nginx is a high-performance web server and reverse proxy server that is powerful and flexible. When processing HTTP requests, you can use the gzip and gunzip modules provided by Nginx to compress and decompress the requests to reduce the amount of data transmission and improve the request response speed. This article will introduce the specific steps of how to use Nginx to compress and decompress HTTP requests, and provide corresponding code examples. Configure gzip module
How to improve computer upload speed
Jan 15, 2024 pm 06:51 PM
Upload speed becomes very slow? I believe this is a problem that many friends will encounter when uploading things on their computers. If the network is unstable when using a computer to transfer files, the upload speed will be very slow. So how can I increase the network upload speed? Below, the editor will tell you how to solve the problem of slow computer upload speed. When it comes to network speed, we all know that the speed of opening web pages, download speed, and upload speed are also very critical. Especially some users often need to upload files to the network disk, so a fast upload speed will undoubtedly save you a lot of money. Less time, what should I do if the upload speed is slow? Below, the editor brings you pictures and texts on how to deal with slow computer upload speeds. How to solve the problem of slow computer upload speed? Click "Start--Run" or "Window key"
What does h5 mean?
Aug 02, 2023 pm 01:52 PM
H5 refers to HTML5, the latest version of HTML. H5 is a powerful markup language that provides developers with more choices and creative space. Its emergence promotes the development of Web technology, making the interaction and effect of web pages more Excellent, as H5 technology gradually matures and becomes popular, I believe it will play an increasingly important role in the Internet world.
Golang's method to achieve image quality compression
Aug 17, 2023 pm 10:28 PM
Golang's method of achieving image quality compression. With the rapid development of the Internet, images have become one of the important media for people to communicate and transmit information online. However, high-resolution images not only take up a lot of storage space, but also increase the loading time during network transmission, which has a certain impact on the user experience. Therefore, in practical applications, image compression is a very meaningful task. This article will introduce how to use Golang to compress image quality. First, we need to import Gola
