wangyulue / image-conversion Goto Github PK

Hi, thanks for the library. I have been trying to use the compressAccurately method to compress the image to certain size. However, when i am trying to compress an image of 3M, i set the config to {size: 100000, accuracy: 99} with same width and height as the original image. The image cannot be compressed to 100kb as wanted. It would end up be compressed image of around 300kb. Hence, would like to know what would be the reason of this. Thanks!

请问我在vue 项目中，引入该组件在IE浏览器报 “[vue-router] Failed to resolve async component default: SyntaxError: 缺少 ';'”这个错误，为什么？

能否在其基础添加水印功能？

When using type: "image/png", PNG image size is getting bigger or not change at all. However, if I put that empty, I guess the default is set to "image/png" then has no issue.

The demo actually has the same issue.

Thank for your contribution.
The package has problem on IE 11.
How can I solve this?

which hopefully is more efficient for resizing and compression vs. file -> img -> canvas, etc. step by step conversions.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

vue项目，安装该依赖后，无法兼容ie浏览器，ie浏览器会报语法错误

I was using the live site and it failed to convert any images (or change their dimensions, or compress them); I used a .jpg and a.png, image.

I was using Chrome on a Windows 10 OS.

I can supply screenshots.

function view() {
const file = document.getElementById('demo').files[0];
console.log(file);
imageConversion.compress(file, 0.9).then(res => {
console.log(res);
})
}
图片原来size 5357333
调用后size 1189802 type: 'image/jpeg'

参数中需要同时指定 width 和 height，能否只指定长边，自动计算短边，谢谢。

Describe the bug

When gifs are compressed, they become static image of first frame only.

import { compress } from "image-conversion";
const compressed_gif = await compress(YOUR_GIF_FILE_HERE, {
  quality: 0.8,
  type: `image/gif`,
});

view your newly compressed gif

Expected behavior
gif should maintain animation after compression when the gif ext type is specified

before

after

Desktop (please complete the following information):

• OS: linux
• Browser chrome

现在需要手动 config.orientation = xxx
建议增加一个 autoOrientation = true 来自动纠正方向

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

import * as imageConversion from 'image-conversion'

imageConversion.compressAccurately(file.raw, 90).then(res => {
imageConversion.compress(file.raw, {
quality: 0.6,
type: "image/jpeg",
width: 20,
scale: 0.5,
})
})

Describe the bug
A clear and concise description of what the bug is.

"Image not defined" error when trying to run a simple dataURLtoImage() conversion in node.js

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

See test.js script in node.js below:

const test = require("image-conversion");
var data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAALtJREFUOE9jXHXs/38GJBBmxYjMxWCvOoainIER2QBCmmGmIRsCNwBZs4qKCsOdO3cY0Glk58AMob4BR9c34w0D68BasDyGC6RftjCAJGEGEGI/Fa8BGwT3AroBuJwBMxjDAFAggmxHthmfIVgDUSzgKMOrDdZwb2AzAGQBzmiEGYAvFAkmJJAh+ADIhVhdANMECgt0QyaEPWQoWCUP9h7MlRhhgM8AmBxVDIDFFNkuQE6FKAkJ2QukxAIAO2u38XQweIsAAAAASUVORK5CYII=";
async function dataURLtoFile(dataURL){
	var image = await test.dataURLtoImage(dataURL);
	return image;
}
var finalImage = dataURLtoFile(data);

Expected behavior
A clear and concise description of what you expected to happen.

I didn't expect any errors with this simple script

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]: tested both on iPad OS and MacOS 14.2.1
• Browser [e.g. chrome, safari] *used node.js not browser
• Version [e.g. 22]: node 18.17. 1 on iPad OS and 20.12.2 on MacOS

Additional context
Add any other context about the problem here.

I'm a novice node.js user and apologize if I'm not understanding something basic about how image-conversion works. I'm hoping to use it both on node.js side and on client side browser (through loading through script).

Additionally, if could suggest once I get image-conversion working on my system, how I might easiest then convert the Image back to an image file and store as a local .jpeg file (e.g. store var finalImage in my script above), I'd appreciate it.

Thanks!

When specifying width(/or height) and the type, images won't get compressed at all.

See screenshots from the demo:

conversion.js 第205行 let n = bstr.length; 可以改成 let n = new ArrayBuffer(bstr.length)

I think my usage may be useful for other, jquery used
I replace the user selected image with compressed one (currently only convert single image, if multiple needed, this sample just for your reference):

使用vue-element-admin开发，报错"TypeError:` Cannot read property 'compressAccurately' of undefined"
代码如下：

<el-upload
            action="#"
            :limit="limit"
            :multiple="true"
            :auto-upload="false"
            :file-list="fileList"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="imgChange"
            list-type="picture"
          >
            <el-button size="small" type="primary">选择图片</el-button>
</el-upload>


<script>
import imageConversion from 'image-conversion'
imgChange(file, fileList) {
      imageConversion.compressAccurately(file.raw, 100)
}
</script>

Blob {
size: 3981435
type: "image/jpeg"
[[Prototype]]: Blob
}

png透明图片的背景会被改为黑色，有解决办法吗

用这种会变成黑色
imageConversion.compress(file,0.8)

用这种不会变色，但是图片也没有压缩效果
imageConversion.compress(file,{
quality: 0.8,
type: "image/png",
scale: 1,
})

Hello,
I was wondering if it would be possible to use a similar code and convert videos to lower versions in the browser?
Sorry if that question has an obvious answer, but I was looking for an in-browser converter for videos and came up to this repo.
Thank you for any hint on directions to consider.

Hi, can you publish v1.1.10 to npm?

上面的文件（约5MB），用类似下面的代码压缩失败（上传后发现没有压缩）：

                                                       compressAccurately(file, {
								size: 1000, // _self.imageSizeLimits[_self.islIndex],
								//accuracy: 0.9,
								type: 'image/png'
							}).then(res => {
								let blobUrl = URL.createObjectURL(res)
								this.imagesTemp.push(blobUrl)
								this.extensionDict[blobUrl] = 'png' // extension  // 压缩后上传丢失后缀
							})

但把 type: 'image/png' 改成 type: 'image/jpeg' 是可以正常压缩的

环境：Windows 10 （最近更新7月）、浏览器 HBuilderX 2.7.14 内置浏览器

imageConversion.compressAccurately(file, {
size: 100,
type: image/png
})
300kb的大概压缩到270左右，但是不指定type是可以的。

测试环境：
浏览器：Chrome 80
具体浏览器版本：Chrome/ 80.0.3987.132
系统：win10

复现步骤如下：
打开 测试页面
上传gif图片
size 填写50
开始压缩
gif图片压缩后变成静态图。

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

vue 项目 npm run build 发布应用时出错，如图：

`import * as imageConversion from 'image-conversion

compressImg(imgFile, type) {
console.log(type)
return new Promise((resolve) => {
// 压缩到250KB,这里的250就是要压缩的大小,可自定义
imageConversion.compressAccurately(imgFile, this.fileMaxSize).then(res => {
resolve(res)
})
})
},`

I get errors when i do this:

FIRST ERROR was 'require is not defined',
after including require.js I get
THEN I GET THIS ERROR
"
require.min.js:1 Uncaught Error: Module name "@babel/runtime/helpers/interopRequireDefault" has not been loaded yet for context: _. Use require([])
"
after including

I GET THIS ERROR

Uncaught ReferenceError: module is not defined
at interopRequireDefault.js:7

I'm getting "Uncaught SyntaxError: Unexpected token function" while running my app in genymotion android emulator using the library with Cordova 8.1.2

App works fine if I remove the library. I'm also using the library in a desktop website and it works fine there.

EDIT: I think the problem is that babel might not be working as intended

imageConversion.compressAccurately方法，设置压缩大小为300kb，在pc端压缩后大小正常，但在移动端会出现压缩后图片大小大于设置的值的情况，如3M的图片压缩后大小为400kb+

It gives "UnhandledPromiseRejectionWarning: ReferenceError: Blob is not defined" error.

imageConversion.compressAccurately(data, { size: 100, //The compressed image size is 100kb accuracy: 0.9, //the accuracy of image compression size,range 0.8-0.99,default 0.95; //this means if the picture size is set to 1000Kb and the //accuracy is 0.9, the image with the compression result //of 900Kb-1100Kb is considered acceptable; type: 'image/jpeg', width: 300, height: 200, orientation: 2, scale: 0.5 });