Pictool.browser
浏览器API
工具对象 util
import Pictool from 'pictool';
const util = Pictool.browser.util;
Pictool.browser.util
是个对象,主要封装了以下方法
util.getImageBySrc
通过图片URL获取生产图片元素HTMLImageElement
util.getImageDataBySrc
通过图片URL获取生产图片数据 ImageDatautil.compressImage
通过图片元素HTMLImageElement
将图片进行压缩处理util.imageData2Base64
通过图片数据ImageData
将图片进行转换成Base64
字符串util.imageData2DigitImageData
浏览器的ImageData
数据转Pictool
数字图像数据 DigitImageDatautil.digitImageData2ImageData
Pictool
数字图像数据DigitImageData转浏览器的ImageData
数据
沙箱类 Sandbox
import Pictool from 'pictool';
const Sandbox = Pictool.browser.Sandbox;
Pictool.browser.Sandbox
是个class
,主要提供一个对单一图片的图像处理沙箱
util.getImageBySrc
util.getImageBySrc
通过图片URL获取生产图片元素 HTMLImageElement
- 参数
imgSrc {string}
可以是图片URL
或者图片的base64
字符串 - 返回
Promise<HTMLImageElement>
const imgSrc = './assets/image/test.jpg';
Pictool.browser.util.getImageBySrc(imgSrc).then(function(img) {
// 测试结果
document.getElementById('J_Example_02').appendChild(img);
}).catch((err) => {
console.log(err);
});
util.getImageDataBySrc
util.getImageDataBySrc
通过图片URL获取生产图片数据 ImageData
- 参数
imgSrc {string}
可以是图片URL
或者图片的base64
字符串 - 返回
Promise<ImageData>
const imgSrc = './assets/image/test.jpg';
Pictool.browser.util.getImageDataBySrc(imgSrc).then(function(imgData) {
// 测试结果
document.getElementById('J_Example_03').innerHTML = `
<code>
${JSON.stringify(imgData)}
</code>
`;
}).catch((err) => {
console.log(err);
});
util.compressImage
util.compressImage
通过图片元素HTMLImageElement
将图片进行压缩处理
- 参数
img {HTMLImageElement}
: 可以是图片URL
或者图片的base64
字符串 - 参数
options {object}
: 是压缩图像的配置options.type {string}
可选image/png
,image/jpeg
和image/webp
- 默认是
image/png
- 默认是
options.encoderOptions {number}
,图片质量压缩比例, 范围在[0, 1]
之间的小数- 当
options.type
为image/jpeg
或image/webp
,压缩效果才能生效 - 默认为
1
- 当
- 返回
string
,为图片压缩后的base64
字符串
const compressImage = Pictool.browser.util.compressImage;
const options = {
type: 'image/jpeg', encoderOptions: 0.1
}
const compressImgSrc = compressImage(img, options);
// 测试结果
document.getElementById('J_Example_04').innerHTML = `<img src="${compressImgSrc}">`;
util.imageData2Base64
util.imageData2Base64
通过图片数据ImageData
将图片进行转换成Base64
字符串
- 参数
imgData {ImageData}
是图像的数据类型 - 返回
string
,为图片转换后的base64
字符串
const base64 = Pictool.browser.util.imageData2Base64(imgData)
// 测试结果
document.getElementById('J_Example_05').innerHTML = `<img src="${base64}">`;
util.imageData2DigitImageData
- 参数
imgData {ImageData}
是浏览器图像的数据类型 - 返回
imgData {DigitImageData}
Pictool
数字图像数据 DigitImageData
浏览器的ImageData
数据转Pictool
数字图像数据 DigitImageData
const digitImg = Pictool.browser.util.imageData2DigitImageData(imgData)
util.digitImageData2ImageData
Pictool
数字图像数据DigitImageData转浏览器的ImageData
数据
- 参数
imgData {DigitImageData}
Pictool
数字图像数据 DigitImageData - 返回
imgData {ImageData}
是浏览器图像的数据类型
const imgData = Pictool.browser.util.imageData2DigitImageData(digitImg)
Sandbox
Pictool.browser.Sandbox
是个class
,主要提供一个对单一图片的图像处理沙箱
- 初始化参数
imgSrc {string}
可以是图片URL
或者图片的base64
字符串 - 方法
queueProcess
- 参数
opts {array}
是个处理流程配置数据- 数组的元素为对象,
{process: string, options: any}
process
为图像处理算法,目前Pictool
支持的图像处理算法 digit.processoptions
为对应算法的参数,目前Pictool
处理算法对应参数 digit.process
- 数组的元素为对象,
- 返回
Promise<string>
图片处理后的base64
字符串
- 参数
const sandbox = new Pictool.browser.Sandbox(imgSrc);
const opts = [
{
process: 'sobel',
options: {},
},
{
process: 'invert',
options: {},
}
]
sandbox.queueProcess(opts).then(function(base64) {
document.getElementById('J_Example').innerHTML = `<img src="${base64}" />`;
}).catch(function(err) {
console.log(err);
});
处理效果如下