mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 13:27:33 +08:00
Added toBlob. Updated toImage to return a Promise.
This commit is contained in:
parent
8f2872a1fc
commit
fc55d96fe4
54
konva.js
54
konva.js
@ -3987,7 +3987,7 @@
|
||||
* @method
|
||||
* @name Konva.Node#toCanvas
|
||||
* @param {Object} config
|
||||
* @param {Function} config.callback function executed when the composite has completed
|
||||
* @param {Function} [config.callback] function executed when the composite has completed
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
* @param {Number} [config.y] y position of canvas section
|
||||
* @param {Number} [config.width] width of canvas section
|
||||
@ -4036,13 +4036,13 @@
|
||||
return url;
|
||||
}
|
||||
/**
|
||||
* converts node into an image. Since the toImage
|
||||
* method is asynchronous, a callback is required. toImage is most commonly used
|
||||
* converts node into an image. Since the toImage method is asynchronous,
|
||||
* the method returns a promise or a callback is required. toImage is most commonly used
|
||||
* to cache complex drawings as an image so that they don't have to constantly be redrawn
|
||||
* @method
|
||||
* @name Konva.Node#toImage
|
||||
* @param {Object} config
|
||||
* @param {Function} config.callback function executed when the composite has completed
|
||||
* @param {Function} [config.callback] function executed when the composite has completed
|
||||
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
|
||||
* "image/png" is the default
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
@ -4063,17 +4063,53 @@
|
||||
* // do stuff with img
|
||||
* }
|
||||
* });
|
||||
* OR
|
||||
* var img = await node.toImage({});
|
||||
* @returns {Promise<Image>}
|
||||
*/
|
||||
toImage(config) {
|
||||
if (!config || !config.callback) {
|
||||
throw 'callback required for toImage method config argument';
|
||||
}
|
||||
var callback = config.callback;
|
||||
delete config.callback;
|
||||
Util._urlToImage(this.toDataURL(config), function (img) {
|
||||
callback(img);
|
||||
return new Promise(resolve=>{
|
||||
Util._urlToImage(this.toDataURL(config), function (img) {
|
||||
resolve(img);
|
||||
callback(img);
|
||||
});
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Converts node into a blob.
|
||||
* @method
|
||||
* @name Konva.Node#toBlob
|
||||
* @param {Object} config
|
||||
* @param {Function} [config.callback] function executed when the composite has completed
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
* @param {Number} [config.y] y position of canvas section
|
||||
* @param {Number} [config.width] width of canvas section
|
||||
* @param {Number} [config.height] height of canvas section
|
||||
* @param {Number} [config.pixelRatio] pixelRatio of output canvas. Default is 1.
|
||||
* You can use that property to increase quality of the image, for example for super hight quality exports
|
||||
* or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
|
||||
* If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
|
||||
* @param {Boolean} [config.imageSmoothingEnabled] set this to false if you want to disable imageSmoothing
|
||||
* @example
|
||||
* var blob = await node.toBlob();
|
||||
* @returns {Promise<Blob>}
|
||||
*/
|
||||
toBlob(config = {}){
|
||||
const callback = config.callback;
|
||||
delete config.callback;
|
||||
return new Promise((resolve, reject)=>{
|
||||
try{
|
||||
this.toCanvas(config).toBlob(blob => {
|
||||
resolve(blob);
|
||||
callback?.(blob);
|
||||
});
|
||||
} catch(err){
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
setSize(size) {
|
||||
this.width(size.width);
|
||||
this.height(size.height);
|
||||
|
Loading…
Reference in New Issue
Block a user