客户端PNG压缩使用javascript像pngcrush？ [英] Client PNG compression using javascript like pngcrush?
本文介绍了客户端PNG压缩使用javascript像pngcrush？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发HTML5应用程式。
当使用者从行动装置上传图片时，图片尺寸过大。
我想将图像压缩为PNG，像pngcrush方式。
前端有没有什么好的选择？ / p>
还是可以将pngcrush库移植到javascript？
解决方案
有几个项目似乎基于使用 emscripten （一个LLVM- JavaScript编译器）实际上将源自 pngcrush 的源代码编译为适用于浏览器的JavaScript。
- JavaScript-Packer /PNGCrush.html - 基于pngcrush-1.7.27
- richardassar / pngcrush.js - 基于pngcrush-1.7.27
- pngcrush-crushed - 基于pngcrush-1.7.58
pngcrush- 1.7.27是目前唯一不似乎为我生成损坏的图像。我在这里提出了一个使用promise的示例： http://plnkr.co/edit/iLpbOjlYiacR04oGdXSI?p =预览
以下是一个基本用法示例：
var instance = new pngcrush（）;
instance.exec（inputFile，function（stdoutEvent）{
console.log（stdoutEvent.data.line）;
}）then（function（doneEvent）{
var outputFile = new Blob（[doneEvent.data.data]，{type：'image / png'}）;
//使用outputFile执行某些操作
}
以下是 pngcrush-class.js 文件从上面的plunker中引用：
（function（exports）{
var noop = function（）{};
function pngcrush（）{
this.callbacks = {
'error'：[]，
'done' ]，
'start'：[]，
'stdout'：[]
};
}
pngcrush.prototype.exec = function文件，通知）{
var self = this;
if（this.execPromise）{
return this.execPromise.catch（noop）.then b $ b return self.exec（file，notify）;
}）;
}
if（file.type！=='image / png'）{
return Promise.reject（file）;
}
var promise = this.execPromise = this.readAsArrayBuffer（file）.then（function（event）{
var arrayBuffer = event.target.result;
return self.initWorker（）。then（function（worker）{
var done = new Promise（function（resolve，reject）{
var offDone，offError ，offStdout;
offDone = self.once（'done'，function（event）{
offError（）;
offStdout（）;
resolve（event）;
} ;
offError = self.once（'error'，function（event）{
offDone（）;
offStdout（）;
reject（event）;
} ;
offStdout = self.on（'stdout'，function（event）{
if（typeof notify ==='function'）{
notify.call（self，event）;
}
}）;
worker.postMessage（{
'type'：'file'，
'data'：new Uint8Array（arrayBuffer）
}）;
worker.postMessage（{
'type'：'command'，
'command'：'go'
}）;
}）;
done.catch（noop）.then（function（）{
worker.terminate（）;
}）;
return done;
}）;
}）;
promise.catch（noop）.then（function（）{
if（promise === self.execPromise）{
delete self.execPromise;
}
}）;
return promise;
};
pngcrush.prototype.initWorker = function（）{
var self = this;
if（this.workerPromise）{
return this.workerPromise;
}
var promise = this.workerPromise = new Promise（function（resolve，reject）{
var worker = new Worker（'worker.js'）;
worker.onerror = function（event）{
var callbacks = [];
reject（event）;
Array.prototype.push.apply（callbacks，self.callbacks.error）;
while（callbacks.length）{
callbacks.shift（）。call（self，event）;
}
};
worker.onmessage = function ）{
if（event.data.type ==='ready'）{
worker.onmessage = function（event）{
var name = event.data.type;
if（typeof self.callbacks [name]！=='undefined'）{
var callbacks = [];
Array.prototype.push.apply（callbacks，self.callbacks [name]）;
while（callbacks.length）{
callbacks.shift（）。call（self，event）;
}
}
};
resolve工人）;
}
};
}）;
promise.catch（noop）.then（function（）{
if（promise === self.workerPromise）{
delete self.workerPromise;
}
}）;
return promise;
};
pngcrush.prototype.on = function（name，callback）{
var self = this;
if（typeof this.callbacks [name]！=='undefined'&&&typeof callback ==='function'）{
this.callbacks [name] .push
var off =（function（）{
var ran = false;
return function（）{
if（ran === true）{
return;
}
ran = true;
var idx = self.callbacks [name] .lastIndexOf（callback）;
if（idx！== -1）{
self .callbacks [name] .splice（idx - 1，1）;
}
};
}）（）;
return off;
}
return noop;
};
pngcrush.prototype.once = function（name，callback）{
var off = this.on（name，function（）{
off（）;
callback.apply（this，arguments）;
}）;
return off;
};
pngcrush.prototype.readAsArrayBuffer = function（file）{
var fileReader = new FileReader（）;
return new Promise（function（resolve，reject）{
fileReader.onerror = reject;
fileReader.onload = resolve;
fileReader.readAsArrayBuffer（file）;
}）;
};
pngcrush.prototype.readAsDataURL = function（file）{
var fileReader = new FileReader（）;
return new Promise（function（resolve，reject）{
fileReader.onerror = reject;
fileReader.onload = resolve;
fileReader.readAsDataURL（file）;
}）;
};
exports.pngcrush = pngcrush;
}）（this）;
I'm developing HTML5 apps.
When user uploads image from their mobile, the size was too large.
I want to compress the image as PNG like the pngcrush way.
Is there any good way to choice on the frontend (like a javascript library)?
Or is it possible to port the pngcrush library to javascript?
解决方案
There are a few projects out there which seem to be based around the idea of using emscripten (a LLVM-to-JavaScript compiler) to actually compile the source code from pngcrush to working JavaScript for the browser.
- JavaScript-Packer/PNGCrush.html - based on pngcrush-1.7.27
- richardassar/pngcrush.js - based on pngcrush-1.7.27
- pngcrush-crushed - based on pngcrush-1.7.58
The version for pngcrush-1.7.27 is currently the only one that doesn't seem to produce corrupted images for me. I put together an example which uses promises here: http://plnkr.co/edit/iLpbOjlYiacR04oGdXSI?p=preview
Here's a basic usage example:
var instance = new pngcrush();
instance.exec(inputFile, function (stdoutEvent) {
console.log(stdoutEvent.data.line);
}).then(function (doneEvent) {
var outputFile = new Blob([doneEvent.data.data], { type: 'image/png' });
// do something with the outputFile
});
Here are the contents of the pngcrush-class.js file from the above plunker for reference:
(function(exports) {
var noop = function () {};
function pngcrush () {
this.callbacks = {
'error': [],
'done': [],
'start': [],
'stdout': []
};
}
pngcrush.prototype.exec = function (file, notify) {
var self = this;
if (this.execPromise) {
return this.execPromise.catch(noop).then(function () {
return self.exec(file, notify);
});
}
if (file.type !== 'image/png') {
return Promise.reject(file);
}
var promise = this.execPromise = this.readAsArrayBuffer(file).then(function (event) {
var arrayBuffer = event.target.result;
return self.initWorker().then(function (worker) {
var done = new Promise(function (resolve, reject) {
var offDone, offError, offStdout;
offDone = self.once('done', function (event) {
offError();
offStdout();
resolve(event);
});
offError = self.once('error', function (event) {
offDone();
offStdout();
reject(event);
});
offStdout = self.on('stdout', function (event) {
if (typeof notify === 'function') {
notify.call(self, event);
}
});
worker.postMessage({
'type': 'file',
'data': new Uint8Array(arrayBuffer)
});
worker.postMessage({
'type': 'command',
'command': 'go'
});
});
done.catch(noop).then(function () {
worker.terminate();
});
return done;
});
});
promise.catch(noop).then(function () {
if (promise === self.execPromise) {
delete self.execPromise;
}
});
return promise;
};
pngcrush.prototype.initWorker = function () {
var self = this;
if (this.workerPromise) {
return this.workerPromise;
}
var promise = this.workerPromise = new Promise(function (resolve, reject) {
var worker = new Worker('worker.js');
worker.onerror = function (event) {
var callbacks = [];
reject(event);
Array.prototype.push.apply(callbacks, self.callbacks.error);
while (callbacks.length) {
callbacks.shift().call(self, event);
}
};
worker.onmessage = function (event) {
if (event.data.type === 'ready') {
worker.onmessage = function (event) {
var name = event.data.type;
if (typeof self.callbacks[name] !== 'undefined') {
var callbacks = [];
Array.prototype.push.apply(callbacks, self.callbacks[name]);
while (callbacks.length) {
callbacks.shift().call(self, event);
}
}
};
resolve(worker);
}
};
});
promise.catch(noop).then(function () {
if (promise === self.workerPromise) {
delete self.workerPromise;
}
});
return promise;
};
pngcrush.prototype.on = function (name, callback) {
var self = this;
if (typeof this.callbacks[name] !== 'undefined' && typeof callback === 'function') {
this.callbacks[name].push(callback);
var off = (function () {
var ran = false;
return function () {
if (ran === true) {
return;
}
ran = true;
var idx = self.callbacks[name].lastIndexOf(callback);
if (idx !== -1) {
self.callbacks[name].splice(idx - 1, 1);
}
};
})();
return off;
}
return noop;
};
pngcrush.prototype.once = function (name, callback) {
var off = this.on(name, function () {
off();
callback.apply(this, arguments);
});
return off;
};
pngcrush.prototype.readAsArrayBuffer = function (file) {
var fileReader = new FileReader();
return new Promise(function (resolve, reject) {
fileReader.onerror = reject;
fileReader.onload = resolve;
fileReader.readAsArrayBuffer(file);
});
};
pngcrush.prototype.readAsDataURL = function (file) {
var fileReader = new FileReader();
return new Promise(function (resolve, reject) {
fileReader.onerror = reject;
fileReader.onload = resolve;
fileReader.readAsDataURL(file);
});
};
exports.pngcrush = pngcrush;
})(this);
这篇关于客户端PNG压缩使用javascript像pngcrush？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
